/* Knut design tokens — light, one register. Zero web fonts: system faces only.
   Ported verbatim from the verified mockup
   (design/tokens.css + design/light.css), light-theme values only — this site
   ships a single register, not a light/dark cascade. */
:root {
  /* shell */
  --ink: #e6e5df;         /* app background */
  --slab: #f1f0ea;        /* raised surfaces: cards, option rows */
  --slab-2: #e9e8e1;      /* hover / recessed */
  --line: #c3c2b8;
  --line-soft: #d6d5cb;
  --fg: #1c1f24;
  --dim: #61656d;
  /* Not from the mockup — added during Task 13 review. --dim (#61656d) fails
     4.5:1 against the spine's own chrome background (#dedcd4, see .spine
     below): measured ~4.26:1. --dim itself is used correctly elsewhere (it
     passes against --ink/--slab/--slab-2) so it stays as-is; the spine's
     inactive labels use this darker variant instead. #55585f on #dedcd4
     measures ~5.19:1. */
  --dim-strong: #55585f;

  /* reading surface */
  --paper: #f4f3ee;
  --paper-edge: #d9d8ce;
  --paper-fg: #1a1d21;
  --paper-dim: #5c6068;

  /* THE DIAGRAM VOCABULARY'S OWN ACCENT AND FAINT, and deliberately not
     --rank1 and --paper-dim, which is what `--dg-accent` and `--dg-muted`
     aliased until 2026-09-02. Both of those are load-bearing chrome tokens --
     --rank1 paints forty-odd rules and already carries two documented contrast
     rulings of its own (--rank1-strong, --rank1-fill), --paper-dim another
     twenty -- so retuning either to separate the diagram roles would have
     moved the whole site to fix a picture. Same shape of ruling as
     --rank1-strong and --dim-strong above: one host needs a number the shared
     token cannot give it, so it gets its own.
     The values, and the arithmetic behind them, are gated by
     system_design/tests/test_ink_roles.py. */
  --diagram-accent: #186353;
  --diagram-faint: #82878f;

  /* semantics: rank 1 / rank 2 / failure — text-safe variants; fills stay bright */
  --rank1: #1b6e5c;        /* verdigris, TEXT-safe */
  /* Final review, B3: the spine's "knut" wordmark (.spine .mark) sets its
     text at 12.5px/700 — NOT WCAG large text (needs >=18.66px bold), so the
     ordinary 4.5:1 floor applies — and --rank1 on the spine's #dedcd4
     measured only 4.46:1. Same class of fix as --dim-strong below (a
     darker, still-in-family variant for this one low-contrast host);
     #124f42 on #dedcd4 measures ~6.88:1. */
  --rank1-strong: #124f42;
  --rank1-fill: #2e9c86;   /* fills only, dark text on top */
  --rank2: #8f531d;        /* copper, text-safe */
  --alarm: #a8342b;        /* vermilion, text-safe */
  --rank1-soft: #1b6e5c1f;
  --rank2-soft: #8f531d1a;

  /* type: serif reads, mono runs, sans navigates */
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: ui-serif, "New York", Charter, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* scale */
  --step--1: 0.78rem;
  --step-0: 0.94rem;
  --step-1: 1.06rem;
  --step-2: 1.35rem;
  --step-3: 1.75rem;
  --step-4: 2.4rem;

  /* layout */
  /* Fix round 1: widened from 74px so single-word tab labels ("Statement" is
     the longest) never wrap to a second line — verified with Playwright at
     both 1440px and a narrower 1100px. */
  --spine: 88px;
  --nav: 250px;
  --measure: 72ch;
  --radius: 3px;
}