/* Design tokens: copied verbatim from the approved gate 3 handoff (work/designer/website-redesign/gate3/tokens.css, MWD-3). Edit there first. */
:root {
  /* ---------- colour: surfaces ---------- */
  --c-bg:            #FFFFFF;  /* page */
  --c-warm:          #FAF7F2;  /* alternating sections, hero gradient end */
  --c-sand:          #F3EEE6;  /* soft cards (DIY), demo slot, tab background */
  --c-ink-surface:   #1E1B18;  /* dark early-access section */

  /* ---------- colour: text ---------- */
  --c-ink:           #1E1B18;  /* headings, body. 16.9:1 on bg */
  --c-muted:         #5E574F;  /* secondary text. 7.1:1 on bg, 6.7:1 on warm, 6.2:1 on sand */
  --c-on-dark:       #FFFFFF;
  --c-on-dark-muted: #D8D1C7;  /* 11.3:1 on ink-surface */
  --c-subtle:        #8A8178;  /* icons, borders and decoration only, never text (3.8:1) */

  /* ---------- colour: lines ---------- */
  --c-line:          #E9E2D7;  /* card borders, dividers */
  --c-line-strong:   #CFC5B6;  /* input borders, secondary-button border (3:1 UI on bg is met by the focus ring, not the border) */

  /* ---------- colour: accent (actions only) ---------- */
  --c-accent:        #C2410C;  /* primary button bg (white text 5.2:1), links (5.2:1 on bg, 4.9:1 on warm) */
  --c-accent-hover:  #A8380A;  /* white text 6.5:1 */
  --c-accent-press:  #8F2F08;
  --c-accent-soft:   #FDEEE6;  /* selected chip bg, pill bg */
  --c-accent-border: #F3CDB9;
  --c-accent-ink:    #8F2F08;  /* text on accent-soft, 7.2:1 */
  --c-focus:         #C2410C;  /* focus ring */

  /* ---------- colour: status ---------- */
  --c-ok:            #2F7D5B;  /* icons, dots */
  --c-ok-soft:       #E5F2EB;
  --c-ok-ink:        #1D5A40;  /* text on ok-soft, 7.0:1 */
  --c-err:           #B42318;  /* error text on bg 6.6:1, error borders */
  --c-err-soft:      #FDECEA;
  --c-err-ink:       #7A1810;  /* text on err-soft, 9.3:1 */
  --c-warn-soft:     #FFF4DB;
  --c-warn-ink:      #6B4700;  /* text on warn-soft, 7.6:1 */
  --c-change-ink:    #8A5A00;  /* "changed" count on #FFF3D6 */
  --c-change-soft:   #FFF3D6;

  /* ---------- type ---------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* real file names and guide code only */

  /* size / line-height / weight / tracking. Desktop first; phone values in the -m tokens (≤600px) */
  --t-display: 800 66px/1.06 var(--font-sans);   --t-display-m: 800 40px/1.08 var(--font-sans);  /* tracking -0.022em */
  --t-h1-doc:  800 44px/1.1  var(--font-sans);   --t-h1-doc-m:  800 31px/1.15 var(--font-sans);  /* guide/privacy title, -0.02em */
  --t-h2:      800 44px/1.12 var(--font-sans);   --t-h2-m:      800 30px/1.15 var(--font-sans);  /* -0.02em */
  --t-h2-doc:  700 26px/1.25 var(--font-sans);   --t-h2-doc-m:  700 22px/1.3  var(--font-sans);  /* guide sections */
  --t-h3:      700 20px/1.3  var(--font-sans);   --t-h3-m:      700 18px/1.3  var(--font-sans);  /* -0.01em */
  --t-lead:    400 20px/1.55 var(--font-sans);   --t-lead-m:    400 17px/1.55 var(--font-sans);
  --t-body:    400 17px/1.6  var(--font-sans);   --t-body-m:    400 16px/1.6  var(--font-sans);
  --t-prose:   400 17px/1.75 var(--font-sans);   --t-prose-m:   400 16.5px/1.7 var(--font-sans); /* guide */
  --t-small:   400 14px/1.5  var(--font-sans);
  --t-label:   700 13px/1.3  var(--font-sans);   /* eyebrows, uppercase, +0.07em */
  --t-button:  700 17px/1    var(--font-sans);   --t-button-sm: 700 15px/1 var(--font-sans);
  --t-mono:    500 14px/1.6  var(--font-mono);
  --word-spacing: 0.04em;                         /* Plus Jakarta Sans sets tight; applied to body */

  /* ---------- space (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-28: 112px;
  --section-y: 112px;  --section-y-m: 64px;
  --container: 1120px; --gutter: 40px; --gutter-m: 16px;
  --measure: 68ch;     /* max reading width */

  /* ---------- shape ---------- */
  --r-sm: 8px; --r-input: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- elevation ---------- */
  --e-1: 0 1px 2px rgba(30,27,24,.05);
  --e-2: 0 1px 2px rgba(30,27,24,.05), 0 14px 36px rgba(30,27,24,.08);
  --e-3: 0 2px 4px rgba(30,27,24,.04), 0 28px 64px rgba(30,27,24,.11);

  /* ---------- focus ---------- */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--c-focus);  /* 3px white gap + 3px terracotta */

  /* ---------- motion ---------- */
  --m-fast: 120ms cubic-bezier(.2,.7,.3,1);  /* hover colour, chip toggle */
  --m-base: 200ms cubic-bezier(.2,.7,.3,1);  /* menu, banner, state swap */
  /* prefers-reduced-motion: all transitions → 0ms, no transforms */

  /* ---------- breakpoints (reference) ---------- */
  /* phone ≤ 600px · tablet 601–900px (split layouts stack) · desktop ≥ 901px */
}