/* ---------------------------------------------------------------------------
 * Eigen Hitchens — design tokens (v2, cool/technical)
 * Palette locked by founder 2026-07-01 via DC-18 / brand-family.md.
 * Token roles are shared across the three brands (Squatch CC · Tom Rankin ·
 * Eigen Hitchens); only the values differ per brand.
 * ------------------------------------------------------------------------- */

:root {
  /* ── Brand palette (cool / technical) ──────────────────────────────── */
  --eh-mist:        #F4F6F8;   /* bg.primary   — page canvas               */
  --eh-slate-mist:  #E4E9EE;   /* bg.secondary — alt sections, cards       */
  --eh-ink:         #26333F;   /* dark         — wordmark, dark blocks     */
  --eh-graphite:    #1C262E;   /* text.body    — main text                 */
  --eh-teal:        #1E7A8C;   /* accent       — signal teal, ticks, CTAs  */

  /* Contrast helpers */
  --eh-ink-90:      #2F3D4B;
  --eh-ink-hover:   #12202D;   /* darker ink for .btn--primary:hover        */
  --eh-graphite-70: rgba(28, 38, 46, 0.72);
  /* WCAG AA (normal text needs 4.5:1) -- 0.66 alpha composites to
   * 4.87:1 on --eh-mist, 4.62:1 on --eh-slate-mist, 5.04:1 on white.
   * (Old 0.56 alpha was 3.62:1 / 3.48:1 / 3.71:1 -- failed AA.)      */
  --eh-graphite-66: rgba(28, 38, 46, 0.66);
  --eh-graphite-25: rgba(28, 38, 46, 0.20);
  --eh-teal-hover:  #196877;
  --eh-teal-tint:   rgba(30, 122, 140, 0.12);
  --eh-white:       #FFFFFF;
  --eh-hairline:    rgba(28, 38, 46, 0.14);

  /* Semantic bindings — reference these in components, not the raw hues. */
  --bg-primary:     var(--eh-mist);
  --bg-secondary:   var(--eh-slate-mist);
  --bg-ink:         var(--eh-ink);
  --text-body:      var(--eh-graphite);
  --text-muted:     var(--eh-graphite-70);
  --text-quiet:     var(--eh-graphite-66);
  --text-on-ink:    #E9EEF3;
  --text-on-ink-muted: rgba(233, 238, 243, 0.72);
  --accent:         var(--eh-teal);
  --accent-hover:   var(--eh-teal-hover);
  --accent-tint:    var(--eh-teal-tint);
  --hairline:       var(--eh-hairline);
  --focus-ring:     0 0 0 3px rgba(30, 122, 140, 0.40);

  /* ── Type stacks — Inter (headings) · Lora (body) · JetBrains Mono ── */
  --font-sans:  'Inter', 'Inter var', 'SF Pro Display', -apple-system,
                'Segoe UI', Helvetica, Arial, system-ui, sans-serif;
  --font-serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype',
                'Palatino', 'Book Antiqua', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
                'Roboto Mono', Menlo, Consolas, monospace;

  /* ── Modular scale (1.25) fluid via clamp() — rubric 1.4 + 1.7 ────── */
  /*  Each heading step's max ≥ 2 × min (WCAG-zoom-safe). Minimums stay */
  /*  on the 1.25 modular scale (deviation ≤ 0.05).                     */
  --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1.75rem);
  --step-0:  clamp(1.00rem,  0.95rem + 0.25vw, 2.00rem);
  --step-1:  clamp(1.25rem,  1.17rem + 0.40vw, 2.50rem);
  --step-2:  clamp(1.563rem, 1.44rem + 0.60vw, 3.125rem);
  --step-3:  clamp(1.953rem, 1.78rem + 0.90vw, 3.906rem);
  --step-4:  clamp(2.441rem, 2.19rem + 1.28vw, 4.882rem);
  --step-5:  clamp(3.052rem, 2.68rem + 1.85vw, 6.104rem);   /* hero H1  */
  --step-6:  clamp(3.815rem, 3.20rem + 3.10vw, 7.630rem);   /* display  */

  --lh-body:    1.6;
  --lh-tight:   1.22;
  --lh-display: 1.12;

  /* ── Spacing (rem-based) ────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --section-y: clamp(4rem, 6vw + 2rem, 8rem);

  --measure:       65ch;
  --measure-tight: 52ch;
  --container:        min(72rem, 92vw);
  --container-narrow: min(52rem, 92vw);

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;
  --shadow-1:  0 1px 2px rgba(28, 38, 46, 0.06),
               0 4px 12px rgba(28, 38, 46, 0.06);
  --shadow-2:  0 2px 4px rgba(28, 38, 46, 0.08),
               0 12px 30px rgba(28, 38, 46, 0.10);

  --ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}