/* TERNE. NIGHT WATER identity tokens. Locked in BRAND-demo-6-terne.md.
   ONE dark theme, no inversion. Radius 2. Warm ink on cool near-black ground.
   The accent is amber, the single working value; it is tuned at build until
   every use passes AA on real rendered frames (do NOT nudge it here without a
   contrast receipt). Contrast figures to be proved from rendered frames at
   build (see GATES-demo-6.md G4). */

:root{
  /* --- ground stack: blue-cast near-black, NOT pure black --- */
  --ground:#0C0E10;
  --panel:#14171A;
  --hairline:#232830;

  /* --- ink: warm off-white on cool ground --- */
  --ink:#E9E6DF;
  --ink-2:#9A958A;

  /* --- the one accent: amber (nav lights, HUD, focus, single CTA) --- */
  --accent:#E8A13D;
  /* focus is named separately from the accent even though it resolves to the same
     amber: focus is a designed state with its own treatment (a 2px offset ring),
     never the same treatment as selection, which is a solid leading bar. */
  --focus:#E8A13D;
  /* the amber CTA is 68% luminous, so its own text must be the dark ground and
     never white; this is the pair the buttons and the pressed view chips use. */
  --on-accent:#0C0E10;

  /* --- type: editorial serif display, neutral sans body/data --- */
  --font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, sans-serif;
  /* the ONE hook for the technical mono. Figures only: spec triplets, the HUD,
     build-sheet numbers and drawing captions. Never prose. */
  --font-mono:'TERNE Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* every number is tabular; enforced on body in main.css */

  /* --- shape and layout --- */
  --r:2px;
  --maxw:1200px;
  --gutter:24px;
  --hd:72px;

  /* --- motion: ONE duration, ONE curve, everywhere ---
     Measured across production sites: each one standardises on a single pair
     (Stripe ships 300ms cubic-bezier(0.25,1,0.5,1) in 437 places). This page had
     six ad-hoc durations. Every transition on the site resolves through these two
     tokens, and motion itself is gated behind prefers-reduced-motion in main.css. */
  --dur:300ms;
  --ease:cubic-bezier(0.25,1,0.5,1);
  --stagger:20ms;

  /* --- spacing: a 4px grid, nothing off it ---
     The page carried 29 distinct non-zero spacing values at 1280: hand-picked rem
     numbers, not a scale. Every margin, padding and gap now resolves through one
     of these. Named by multiples of 4 so the arithmetic stays visible. */
  --sp-1:4px;    --sp-2:8px;    --sp-3:12px;   --sp-4:16px;
  --sp-5:20px;   --sp-6:24px;   --sp-7:28px;   --sp-8:32px;
  --sp-10:40px;  --sp-12:48px;  --sp-14:56px;  --sp-16:64px;
  --sp-20:80px;  --sp-24:96px;  --sp-28:112px; --sp-32:128px;

  /* --- tracking ramp, measured off production display type ---
     Type tightens as it grows and opens up as it shrinks into caps. The h1 was
     sitting at -0.015em at 89.6px, far too loose for its size. */
  --track-display:-0.06em;   /* 40px and up */
  --track-mid:-0.04em;       /* 24 to 32px */
  --track-body:-0.02em;      /* 14 to 20px */
  --track-caps:0.08em;       /* uppercase labels, kickers, legends */

  /* --- type scale: size / leading pairs, every leading a multiple of 4 ---
     Display leading collapses to 1.0 at large sizes (measured: Vercel 64/64,
     Cosmos 54/54) and body sits at exactly 1.5. Sizes are DISCRETE STEPS rather
     than a fluid clamp on purpose: a clamp() size makes the leading fractional at
     almost every viewport, and the 4px leading grid is the whole point. */
  --t-d1:88px;    --lh-d1:88px;      /* hero h1, desktop            1.000 */
  --t-d2:56px;    --lh-d2:56px;      /* section h2, desktop         1.000 */
  --t-d4:32px;    --lh-d4:36px;      /* h2 phone, price, title      1.125 */
  --t-d5:24px;    --lh-d5:28px;      /* deposit, wordmark           1.167 */
  --t-lead:20px;  --lh-lead:28px;    /* hero sub                    1.400 */
  --t-body-lg:18px; --lh-body-lg:28px; /* section body              1.556 */
  --t-body:16px;  --lh-body:24px;    /* body base                   1.500 */
  --t-sm:14px;    --lh-sm:20px;      /* secondary, figures          1.429 */
  --t-xs:13px;    --lh-xs:20px;      /* captions                    1.538 */
  --t-micro:11px; --lh-micro:16px;   /* caps micro-labels           1.455 */
  --t-label:12px; --lh-label:16px;   /* caps labels                 1.333 */
}