/* ════════════════════════════════════════════════════════════════════
   NexFlow · Design tokens — v10 "Workshop Editorial"
   Single source of truth for color, type, motion, layout.

   v10 design shift (de-AI pass):
     · Warm paper surfaces (not the cold #F7F8FA grey of every AI mock).
     · Deep teal-green brand + warm clay action colour. No startup-indigo.
     · Bricolage Grotesque display / Hanken Grotesk text / Spline Sans Mono.
       (Replaces the Inter + Instrument Serif + JetBrains Mono "AI trio".)
     · Tighter, printed radii; crisp warm hairlines; no gradient glows.
   These values cascade to every page — all templates link this file.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces · warm paper ──────────────────────────────────────── */
  --bg-0:#F4F1E9;              /* primary paper · warm oat */
  --bg-1:#FCFAF4;              /* elevated cards · warm white */
  --bg-2:#EBE6DA;             /* recessed inputs / wells */
  --bg-3:#DED7C7;             /* hover state */
  --bg-ink:#16140F;            /* dark surfaces · warm near-black */
  --bg-ink-2:#1C1A13;
  --bg-ink-3:#26231A;

  /* ── Text ───────────────────────────────────────────────────────
     Contrast budget vs. --bg-0 (#F4F1E9, L≈94):
       --fg-0  15.8:1   primary copy
       --fg-1   9.1:1   secondary copy / lists
       --fg-2   6.2:1   captions, eyebrows, meta
       --fg-3   4.6:1   small print, footers
       --fg-4   2.9:1   disabled / placeholder only
     The first four clear WCAG AA for normal text. --fg-4 is reserved
     for disabled/placeholder states where AA does not apply. */
  --fg-0:#1A1712;
  --fg-1:#3C372E;
  --fg-2:#585243;
  --fg-3:#6C6555;
  --fg-4:#9B9382;
  --fg-inv:#F4F1E9;
  --fg-inv-1:rgba(244,241,233,.88);
  --fg-inv-2:rgba(244,241,233,.70);
  --fg-inv-3:rgba(244,241,233,.5);

  /* ── Brand · deep teal-green (trust / flow) ─────────────────────── */
  --brand:#0E7C63;
  --brand-2:#0A5C49;           /* darker, for hover / depth */
  --brand-ink:#073A2F;         /* text-on-paper safe teal */
  --brand-soft:rgba(14,124,99,.10);
  --brand-line:rgba(14,124,99,.24);
  --brand-glow:rgba(14,124,99,.28);

  /* ── Action · warm clay (CTAs, emphasis, eyebrow ticks) ─────────── */
  --clay:#D2552B;
  --clay-2:#B5431E;
  --clay-soft:rgba(210,85,43,.10);
  --clay-line:rgba(210,85,43,.26);

  /* ── Semantic palette (warm-harmonised) ─────────────────────────── */
  --cyan:#127C92;
  --emerald:#0E7C63;
  --emerald-bright:#3FBD93;
  --amber:#B07719;
  --rose:#C24560;

  /* ── Industry accents ───────────────────────────────────────────
     v10: the brand colour no longer changes per industry (the
     colour-shifting accent was a generic "AI demo" tell). The
     switcher now changes the example CONTENT only; every accent
     resolves to the single brand teal so the identity stays steady. */
  --acc-realestate:var(--brand);
  --acc-healthcare:var(--brand);
  --acc-ecom:var(--brand);
  --acc-finance:var(--brand);
  --acc-legal:var(--brand);
  --acc:var(--brand);

  /* ── Hairlines & shadows · warm, printed (no glows) ─────────────── */
  --rule:rgba(26,23,18,.10);
  --rule-strong:rgba(26,23,18,.20);
  --rule-ink:rgba(244,241,233,.14);
  --shadow-1:0 1px 2px rgba(26,23,18,.05), 0 1px 3px rgba(26,23,18,.04);
  --shadow-2:0 8px 22px -8px rgba(26,23,18,.14), 0 2px 6px -2px rgba(26,23,18,.07);
  --shadow-3:0 28px 60px -22px rgba(26,23,18,.24), 0 10px 22px -12px rgba(26,23,18,.12);
  --shadow-brand:0 20px 48px -18px rgba(14,124,99,.30), 0 6px 18px -8px rgba(26,23,18,.16);
  --shadow-soft:0 4px 14px -4px rgba(26,23,18,.08), 0 1px 4px rgba(26,23,18,.05);

  /* ── Type ───────────────────────────────────────────────────────
     --font-serif kept as the variable NAME (used widely as the display
     face in existing CSS) but now points at the Bricolage grotesque
     display. --font-sans is the Hanken body face; --font-mono is used
     only in genuine technical/ledger contexts. */
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Bricolage Grotesque',var(--font-sans);
  --font-display:var(--font-serif);
  --font-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* type ramp (clamp-driven · respects mobile) */
  --t-display:clamp(50px,8vw,112px);
  --t-h1:clamp(38px,5.2vw,74px);
  --t-h2:clamp(29px,3.6vw,50px);
  --t-h3:clamp(22px,2.3vw,31px);
  --t-h4:clamp(18px,1.5vw,21px);
  --t-lead:clamp(17px,1.35vw,21px);
  --t-body:16px;
  --t-small:13px;
  --t-mono:11px;
  --t-eyebrow:12px;

  /* line-heights */
  --lh-display:.96;
  --lh-tight:1.04;
  --lh-snug:1.16;
  --lh-base:1.55;
  --lh-loose:1.7;

  /* tracking */
  --tr-display:-.02em;
  --tr-h:-.018em;
  --tr-body:-.003em;
  --tr-eyebrow:.1em;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-cinematic:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.4,0,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-fast:.18s;
  --d-base:.32s;
  --d-slow:.6s;
  --d-cine:.9s;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --maxw:1280px;
  --maxw-narrow:880px;
  --gutter:clamp(20px,4vw,56px);
  --section-y:clamp(80px,10vw,144px);
  --section-y-tight:clamp(48px,6vw,96px);

  /* ── Radii · tighter, printed ──────────────────────────────────── */
  --r-xs:3px;
  --r-s:6px;
  --r:9px;
  --r-m:12px;
  --r-l:14px;
  --r-xl:18px;

  /* ── Z-axis ─────────────────────────────────────────────────────── */
  --z-bg:0;
  --z-3d:1;
  --z-content:10;
  --z-nav:50;
  --z-overlay:80;
  --z-chat:100;
}

/* ── Reduced motion override ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:.01s; --d-base:.01s; --d-slow:.01s; --d-cine:.01s;
  }
  html { scroll-behavior: auto; }
}