/* zewbie design tokens -- P4.1 WINNER, adopted VERBATIM from the winning entry.
   Provenance: artifacts/P4.1/entries/grok-4.6.md, section 11, final ```css block.
   Judged 2026-09-14 by claude-fable-5.1 on the seat pool against judge/RUBRIC-P4.1.md
   (sha256 923e412f5855e80e901a22b4cbb7ab436c722453eddf502e71d2108b5fa5ec84, pinned before any
   competitor was invoked). Every contrast ratio stated in DESIGN-SYSTEM.md was recomputed from
   THESE hexes by tools/design_system_check.py and survived to within 0.01 -- 20 pairs, 0
   mismatches. Do not edit a value here without re-running that checker in --mode accept. */

:root {
  /* spacing — 8pt grid, 4pt half-step (Material 3, IBM Carbon, Spec.fm).
     --sp-1 is legal only inside a component. 40px is a size, not a gap. */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* type — 16px base, ratio 1.250; 14px is the sole documented deviation */
  --fs-xs: 13px;    --lh-xs: 20px;
  --fs-sm: 14px;    --lh-sm: 20px;
  --fs-base: 16px;  --lh-base: 24px; /* 1.5 — SC 1.4.12 test value */
  --fs-lg: 20px;    --lh-lg: 28px;
  --fs-xl: 25px;    --lh-xl: 32px;
  --fs-2xl: 31px;   --lh-2xl: 40px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --measure: 66ch;  /* Bringhurst 45–75, 66 target */

  /* colour — warm stone ramp + one teal accent + states + absence + mock.
     Dark theme, later: add :root[data-theme=dark] and change nothing else. */
  --c-bg: #FFFFFF;
  --c-surface: #FAFAF9;
  --c-border: #E7E5E4;           /* decorative hairline ONLY — 1.2555:1, fails 1.4.11 on purpose */
  --c-border-strong: #8F8B86;    /* control edges: 3.3843:1 on bg, 3.2403:1 on surface */
  --c-text: #1C1917;
  --c-text-muted: #57534E;
  --c-accent: #115E59;
  --c-accent-fg: #FFFFFF;
  --c-ok: #15803D;
  --c-warn: #A16207;
  --c-danger: #B91C1C;
  --c-incomparable: #854D0E;     /* comparison refusal text — not a 4Cs grade */
  --c-mock-bg: #FFFBEB;
  --c-mock-text: #713F12;
  --c-mock-border: #A16207;

  /* layout */
  --container-max: 1200px;
  --rail-w: 280px;
  --card-min: 240px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --radius: 4px;
  --border-w: 1px;
  --focus-w: 2px;                /* thickness adopted from SC 2.4.13’s 2px figure */
  --focus-off: 2px;
  --shadow-float: 0 4px 12px rgb(28 25 23 / 0.10); /* the ONLY shadow; floating surfaces only */
  --control-min-h: 40px;         /* clears SC 2.5.8’s 24px without the spacing exception */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* tabular figures — mandatory on values and prices; never on labels */
.nums,
.price,
.attr-value,
.compare-cell,
td.numeric {
  font-variant-numeric: tabular-nums;
}