/* ==========================================================================
   heathandheather.wedding — Token Floor
   Design Stack Stage 4. Derived from design/DIRECTION.md.

   RULE: no raw hex and no raw px below this file. A component that needs a
   value not defined here is a token-floor bug and is fixed here, not there.
   ========================================================================== */

:root {
  /* ---- Palette: the reception (couple's storyboard, exact values) ------- */
  --c-ink:        #0A0902;  /* near-black, warm */
  --c-moss:       #232906;  /* deep foliage */
  --c-oxblood:    #330810;  /* burgundy */
  --c-cedar:      #AD6C59;  /* clay rose */
  --c-blush:      #F6D5D0;  /* palest pink */

  /* ---- Palette: the paper (sampled from the invitation artwork) --------- */
  --c-parchment:  #E4DFDB;  /* warm greige. NOT white. */
  --c-gold:       #C0A97F;  /* antique olive-brass. NOT yellow gold. */
  --c-gold-lit:   #D4C4A5;  /* gilt catching light */
  --c-gold-deep:  #9C8460;  /* gilt in shadow */

  /* ---- The light journey ------------------------------------------------
     Five stops from five o'clock to full dark. The page ground interpolates
     across these as the visitor scrolls. Never pure white, never pure black. */
  --ground-0: #E4DFDB;  /* the paper        — §1 Invitation */
  --ground-1: #C6AE9C;  /* light falling    — §2 The Day     */
  --ground-2: #6E3B31;  /* ember            — §3 The Place / §4 Staying */
  --ground-3: #330810;  /* oxblood          — §5 Reply       */
  --ground-4: #0A0902;  /* candlelit dark   — §6 / §7        */

  /* ---- Foreground ------------------------------------------------------- */
  --fg-on-light:        #2A2620;
  --fg-on-light-muted:  #5C554C;
  --fg-on-dark:         #E4DFDB;
  --fg-on-dark-muted:   #A9A199;
  --fg-accent:          var(--c-gold);

  /* ---- Accent by light level -------------------------------------------
     Gold is unreadable as TEXT on parchment (1.72:1). On the paper the
     invitation's own type is dark and only the ornament is gilt; this follows
     that. Every stop below is measured >= 4.5:1 against its ground. */
  --acc-0: #6B5730;  --acc-1: #453516;  --acc-2: #E8DCC0;  --acc-3: #C0A97F;  --acc-4: #C0A97F;
  --mut-0: #5C554C;  --mut-1: #4A4034;  --mut-2: #EFE7DC;  --mut-3: #A9A199;  --mut-4: #A9A199;

  /* ---- Rules and edges -------------------------------------------------- */
  --rule-gold:  1px solid var(--c-gold);
  --rule-hair:  1px solid var(--c-gold-deep);

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* ---- Type scale — fluid, 375px → 1440px -------------------------------
     Sized against the longest real headline in COPY.md:
     "An 1891 house on a hill in the Ozarks." (38 characters)               */
  --t-xs:  clamp(0.70rem, 0.68rem + 0.10vw, 0.78rem);
  --t-sm:  clamp(0.83rem, 0.80rem + 0.13vw, 0.94rem);
  --t-base:clamp(1.00rem, 0.96rem + 0.19vw, 1.19rem);
  --t-md:  clamp(1.20rem, 1.13rem + 0.31vw, 1.44rem);
  --t-lg:  clamp(1.44rem, 1.31rem + 0.55vw, 1.90rem);
  --t-xl:  clamp(1.73rem, 1.48rem + 1.05vw, 2.60rem);
  --t-2xl: clamp(2.07rem, 1.62rem + 1.92vw, 3.60rem);
  --t-3xl: clamp(2.49rem, 1.71rem + 3.31vw, 5.00rem);

  /* ---- Tracking ---------------------------------------------------------
     The invitation's authority comes from letterspaced roman caps.          */
  --track-caps-wide:  0.34em;  /* "KINDLY JOIN US" — smallest, widest        */
  --track-caps:       0.18em;  /* names, detail blocks                       */
  --track-display:    0.06em;  /* section headlines                          */
  --track-body:       0.005em;

  /* ---- Line height ------------------------------------------------------ */
  --lh-tight:   1.12;
  --lh-display: 1.14;
  --lh-body:    1.62;
  --lh-caps:    1.9;   /* letterspaced caps need vertical air to breathe     */

  /* ---- Weight ----------------------------------------------------------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  /* ---- Spacing — 8px base ----------------------------------------------- */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  3rem;
  --s-6:  4rem;
  --s-7:  6rem;
  --s-8:  8rem;
  --s-9:  12rem;
  --s-10: 16rem;

  /* Section rhythm. DIRECTION.md: minimum 12rem between section blocks at
     desktop; the invitation's authority is the air around the text.         */
  --section-pad-y: clamp(var(--s-7), 12vh, var(--s-9));
  --measure:       62ch;
  --measure-tight: 44ch;

  /* ---- The arch ---------------------------------------------------------
     The signature move. A round-topped aperture, proportioned from the
     invitation: the arch springs at roughly 55% of the card height.         */
  --arch-radius:  50% 50% 0 0 / 38% 38% 0 0;
  --arch-inset:   var(--s-4);
  --arch-stroke:  2px;

  /* ---- Elevation — candlelight, not box-shadow -------------------------- */
  --glow-candle:  0 0 6rem -1rem rgba(192, 169, 127, 0.38);
  --glow-close:   0 0 2rem -0.5rem rgba(192, 169, 127, 0.55);
  --shadow-deep:  0 1.5rem 4rem -1.5rem rgba(10, 9, 2, 0.65);

  /* ---- Motion — candlelight, not UI ------------------------------------- */
  --dur-fast: 240ms;
  --dur-med:  520ms;
  --dur-slow: 820ms;
  --dur-veil: 1400ms;  /* the light level itself */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-soft: cubic-bezier(0.33, 0.00, 0.10, 1);
  /* Nothing springs. Nothing bounces. Nothing slides in from the left. */

  /* ---- Form (the instrument) -------------------------------------------- */
  --field-h:       3.25rem;
  --field-bg:      rgba(228, 223, 219, 0.05);
  --field-bg-hov:  rgba(228, 223, 219, 0.09);
  --field-border:  rgba(192, 169, 127, 0.34);
  --field-border-focus: var(--c-gold);
  --field-radius:  2px;
  --c-error:       #D98B7A;
  --c-success:     var(--c-gold-lit);

  /* ---- Layer order ------------------------------------------------------ */
  --z-page: 1;
  --z-arch: 5;
  --z-form: 10;
  --z-veil: 20;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med:  1ms;
    --dur-slow: 1ms;
    --dur-veil: 1ms;
  }
}