/* ============================================================
   tokens.css — design-token scaffold (the STRUCTURE, not the look)
   Override the VALUES per brand in your style.css. Keep the names.
   Pure #000/#fff and Inter/Poppins defaults are deliberately absent —
   choose real values from ART-DIRECTION.md.
   ============================================================ */
:root {
  /* — Colour — set per brand. Neutrals are warm/off, never pure. ---- */
  --c-bg:        #f6f4ef;   /* warm paper, not #fff */
  --c-surface:   #fffdf9;
  --c-ink:       #14110d;   /* off-black, not #000 */
  --c-ink-soft:  #4b463d;
  --c-line:      #e4ddd0;
  --c-brand:     #14110d;   /* eyedrop from logo */
  --c-accent:    #b3742f;   /* one accent, used sparingly */
  --c-accent-ink:#ffffff;

  /* — Type — name real faces in style.css via @font-face. ----------- */
  --f-display: "REPLACE-display", Georgia, serif;
  --f-text:    "REPLACE-text", system-ui, sans-serif;
  --f-mono:    ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale — 1.250 major third, clamps to viewport. */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.20rem);
  --step-1:  clamp(1.25rem, 1.13rem + 0.59vw, 1.69rem);
  --step-2:  clamp(1.56rem, 1.37rem + 0.97vw, 2.37rem);
  --step-3:  clamp(1.95rem, 1.64rem + 1.55vw, 3.32rem);
  --step-4:  clamp(2.44rem, 1.96rem + 2.40vw, 4.65rem);
  --step-5:  clamp(3.05rem, 2.33rem + 3.62vw, 6.52rem);  /* hero display */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* — Spacing rhythm — one scale, used everywhere for vertical music. */
  --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem;
  --sp-s: 1rem; --sp-m: 1.5rem; --sp-l: 2.5rem;
  --sp-xl: 4rem; --sp-2xl: 6rem; --sp-3xl: 9rem;   /* section gaps — be generous */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 78rem;
  --maxw-prose: 38rem;

  /* — Radius / depth — layered shadows read as money, flat reads cheap */
  --r-s: 4px; --r-m: 10px; --r-l: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,17,13,.04), 0 2px 6px rgba(20,17,13,.05);
  --shadow-2: 0 4px 12px rgba(20,17,13,.06), 0 12px 32px rgba(20,17,13,.09);
  --shadow-3: 0 8px 24px rgba(20,17,13,.08), 0 30px 70px rgba(20,17,13,.14);

  /* — Motion — name the feel; reused by motion.js. No `all 0.3s`. ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 220ms; --dur: 480ms; --dur-slow: 900ms;

  /* — Z layers — name them so you never guess a magic number. ------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 1000;
  --z-overlay: 5000; --z-modal: 9000; --z-toast: 9500;
}

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