/* ==========================================================================
   TOKENS — the single source of truth for the design system.
   Nothing in this file styles an element. If a value is used more than once
   anywhere on the site, it belongs here and nowhere else.
   ========================================================================== */

:root {

  /* ---- Color -------------------------------------------------------------
     Raw brand values. Use the semantic aliases below in actual rules, not
     these, so a palette tweak stays a one-line change.
     Ratio intent: neutrals ~80% (white 35 / cream 25 / charcoal 20),
     burgundy + taupe ~15%, gold + terracotta ~5%. */

  --white:            #FFFFFF;
  --cream:            #FFF2CA;   /* Dreamy Cream */
  --charcoal:         #1D0207;   /* never pure black */
  --burgundy:         #9C0F2A;   /* the one brand accent */
  --burgundy-deep:    #7D0C22;   /* hover / pressed only */
  --taupe:            #D2B18C;
  --gold:             #BF9142;
  --terracotta:       #D97757;

  /* Support tones, derived from the palette — not new brand colors. */
  --line:             #E4DED2;   /* warm hairline for cards + dividers */
  --line-strong:      #D8CFBE;
  --cream-deep:       #F7E7BC;   /* cream one notch down, for cream-on-cream */
  --ink-muted:        #5C4A4E;   /* charcoal lightened for secondary text */
  --ink-faint:        #8A7A7D;   /* captions, meta — still AA on white */
  --disabled-bg:      #E4DED2;
  --disabled-ink:     #9C8F86;

  /* Semantic aliases — reach for these when writing rules. */
  --bg:               var(--white);
  --bg-warm:          var(--cream);
  --bg-dark:          var(--charcoal);
  --text:             var(--charcoal);
  --text-muted:       var(--ink-muted);
  --text-on-dark:     #F4EFE6;
  --text-on-dark-mut: #B8ABA6;
  --accent:           var(--burgundy);
  --accent-hover:     var(--burgundy-deep);
  --focus-ring:       var(--burgundy);

  /* ---- Type --------------------------------------------------------------
     Two families only. Poppins headings, Inter everything else. */

  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale. Every ramp runs from the mobile size in design.md at a 640px
     viewport to the brand's exact desktop size at the 1200px container — so H1
     is 36px on a phone and lands on precisely 56px where the layout maxes out,
     rather than drifting past it on very wide screens. */
  --fs-h1:      clamp(2.25rem, 0.821rem + 3.571vw, 3.5rem);   /* 36 → 56 */
  --fs-h2:      clamp(1.75rem, 0.75rem + 2.5vw, 2.625rem);    /* 28 → 42 */
  --fs-h3:      clamp(1.375rem, 0.946rem + 1.071vw, 1.75rem); /* 22 → 28 */
  --fs-h4:      clamp(1.125rem, 0.982rem + 0.357vw, 1.25rem); /* 18 → 20 */

  /* Body is a flat 16px at every width — deliberately not scaled up on desktop,
     so more of a page fits in one scroll. Line height carries the readability
     instead (1.7, above the 1.6 brand floor). */
  --fs-body:    1rem;        /* 16 */
  --fs-body-lg: 1.125rem;    /* 18 — the lede sentence under a heading, only */
  --fs-sm:      0.9375rem;   /* 15px — captions, meta */
  --fs-xs:      0.8125rem;   /* 13px — eyebrow labels only */
  --fs-quote:   clamp(1.375rem, 0.803rem + 1.429vw, 1.875rem); /* 22 → 30 */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-extrabold: 800;

  --lh-tight:  1.12;   /* H1 / H2 */
  --lh-snug:   1.3;    /* H3 / H4 */
  --lh-body:   1.7;    /* body — brand floor is 1.6, we sit above it */
  --lh-loose:  1.8;    /* long-form article copy */

  --ls-tight:   -0.02em;  /* large headings only */
  --ls-normal:  0;
  --ls-eyebrow: 0.16em;   /* letterspaced label, the one uppercase exception */

  --measure:    68ch;   /* 65–75 char target for reading columns */
  --measure-sm: 52ch;   /* short intros, card copy */

  /* ---- Space -------------------------------------------------------------
     8px grid. Only these values. */

  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;

  /* Vertical rhythm for section wrappers — the fluid pair every section uses. */
  --section-y:       clamp(var(--sp-6), 4vw + 40px, var(--sp-8));  /*  64 → 128 */
  --section-y-tight: clamp(var(--sp-5), 3vw + 28px, var(--sp-7));  /*  48 →  96 */

  /* ---- Layout ------------------------------------------------------------ */

  --container:      1200px;
  --container-text: 780px;   /* article / long-form pages */
  --container-wide: 1360px;  /* rare full-bleed-ish galleries */
  --gutter:         clamp(var(--sp-3), 4vw, var(--sp-6));  /* 24 → 64 */
  --header-h:       76px;
  --header-h-sm:    64px;

  /* ---- Shape + depth -----------------------------------------------------
     Editorial and flat. Borders define, shadows barely exist. */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(29, 2, 7, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(29, 2, 7, 0.14);
  --shadow-lg: 0 24px 60px -24px rgba(29, 2, 7, 0.22);

  /* ---- Motion ------------------------------------------------------------
     Two durations, two easings. Anything slower than --dur-reveal is wrong.
     See UI EFFECT RULES: motion reveals content, it never gates it. */

  --dur-hover:  170ms;   /* 150–200ms — buttons, cards, links */
  --dur-reveal: 420ms;   /* 300–500ms — the one house entrance */
  --dur-panel:  260ms;   /* mobile menu, accordions */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --reveal-shift: 14px;  /* 8–16px rise on entrance */

  /* ---- Depth order ------------------------------------------------------- */

  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-overlay:  300;
  --z-skiplink: 400;
}

/* Dark section context. Set on any wrapper with a charcoal background so the
   components inside (buttons, links, rules) recolor without their own
   modifier classes. */
.on-dark {
  --text:       var(--text-on-dark);
  --text-muted: var(--text-on-dark-mut);
  --line:       rgba(244, 239, 230, 0.16);
  --line-strong:rgba(244, 239, 230, 0.28);
  --bg:         var(--charcoal);
  --focus-ring: var(--cream);
}