/* ==========================================================================
   tokens.css — Design tokens
   Source of truth: design/DESIGN.md §3 (Design Tokens).
   Update this file when DESIGN.md tokens change; nothing else hard-codes values.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --------------------------------------------------------------------------
     Color palette — DESIGN §3.1
     -------------------------------------------------------------------------- */
  --c-ink:          #0E1F36;  /* deep navy: primary CTAs, dark bands, headings on light */
  --c-ink-2:        #1A1F2C;  /* body text on light */
  --c-gold:         #B89364;  /* champagne accent: eyebrows, dividers, icons */
  --c-gold-2:       #C9A063;  /* gold hover/large CTA */
  --c-cream:        #F5F1EB;  /* warm off-white section background */
  --c-paper:        #FFFFFF;  /* default page surface */
  --c-line:         #E7E2D6;  /* hairline dividers, card borders on cream */
  --c-mute:         #5A5F6B;  /* secondary/body grey */
  --c-on-ink:       #FFFFFF;            /* text on dark navy */
  --c-on-ink-mute:  #C8CDD6;            /* secondary text on dark navy */
  --c-on-ink-80:    rgb(255 255 255 / 0.8); /* CTA-band body line, DESIGN §4.10 */
  --c-rule-on-ink:  rgb(255 255 255 / 0.18); /* hairline dividers on --c-ink */

  /* Surface-aware focus outline color picked per band; see base.css. */

  /* --------------------------------------------------------------------------
     Typography — DESIGN §3.2
     Two families. Both self-hosted as WOFF2 (Latin Extended subset).
     -------------------------------------------------------------------------- */
  --ff-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale, mobile-first.
     Formula: clamp(min, calc(intercept + slope·vw), max), interpolating
     320px → 1280px viewport against the documented mobile/desktop sizes. */
  --fs-display:  clamp(2.5rem,    calc(1.83rem  + 3.33vw),   4.5rem);  /* 40 → 72 */
  --fs-h1:       clamp(2rem,      calc(1.5rem   + 2.5vw),    3.5rem);  /* 32 → 56 */
  --fs-h2:       clamp(1.5rem,    calc(1.25rem  + 1.25vw),   2.25rem); /* 24 → 36 */
  --fs-h3:       clamp(1.25rem,   calc(1.17rem  + 0.42vw),   1.5rem);  /* 20 → 24 */
  --fs-body-lg:  clamp(1.0625rem, calc(1.04rem  + 0.1vw),    1.125rem);/* 17 → 18 */
  --fs-body:     1rem;       /* 16 */
  --fs-small:    0.875rem;   /* 14 */
  --fs-eyebrow:  0.75rem;    /* 12 */

  /* Line heights and tracking (used at the element level, not per-element overrides) */
  --lh-tight:    1.05;       /* hero display */
  --lh-h2:       1.15;       /* section headings */
  --lh-body:     1.6;        /* body copy */
  --tk-display: -0.01em;     /* serif display tightening */
  --tk-eyebrow:  0.18em;     /* eyebrow tracking */
  --tk-button:   0.12em;     /* button tracking */

  /* --------------------------------------------------------------------------
     Spacing scale — DESIGN §3.3
     -------------------------------------------------------------------------- */
  --sp-1:  0.25rem;   /*   4px */
  --sp-2:  0.5rem;    /*   8px */
  --sp-3:  0.75rem;   /*  12px */
  --sp-4:  1rem;      /*  16px */
  --sp-5:  1.5rem;    /*  24px */
  --sp-6:  2rem;      /*  32px */
  --sp-7:  3rem;      /*  48px — section padding (mobile) */
  --sp-8:  4rem;      /*  64px — section padding (tablet) */
  --sp-9:  6rem;      /*  96px — section padding (desktop) */
  --sp-10: 8rem;      /* 128px — hero vertical padding (desktop) */

  /* --------------------------------------------------------------------------
     Layout — container, gutter, breakpoints — DESIGN §3.3
     -------------------------------------------------------------------------- */
  --container-max:  1200px;
  --gutter:         clamp(1.25rem, 4vw, 3rem); /* 20 → 48 */

  /* Breakpoint tokens are documentation-only: CSS custom properties cannot be
     read inside @media queries (until Cascade L5 ships widely). Stylesheets
     and JS read these as references; @media rules in layout.css use literal
     pixel values that match these tokens. */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* --------------------------------------------------------------------------
     Effects — DESIGN §3.4
     -------------------------------------------------------------------------- */
  --r-card:  4px;       /* nearly square cards */
  --r-pill:  999px;     /* icon circles */

  --sh-card: 0 1px 2px rgba(14, 31, 54, 0.04), 0 8px 24px rgba(14, 31, 54, 0.06);

  --rule-w-eyebrow: 32px; /* 32–48px decorative gold rule */
  --rule-w-hero:    48px;

  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  150ms;
  --dur:       240ms;

  /* --------------------------------------------------------------------------
     Z-index scale (kept low and explicit)
     -------------------------------------------------------------------------- */
  --z-skip-link:  100;  /* above everything when focused */
  --z-header:      50;  /* sticky header */
  --z-overlay:     60;  /* mobile-menu scrim */
  --z-menu:        70;  /* mobile-menu panel above scrim */
}

/* High-contrast preference: lift body color and rule weight where it matters. */
@media (prefers-contrast: more) {
  :root {
    --c-ink-2: var(--c-ink);
  }
}