/* tokens.css — Namesome design tokens. Light is default; dark via [data-theme="dark"].
Ported from the signed-off Phase B prototype (docs/prototype/assets/css/tokens.css,
frozen reference). TWO deliberate divergences from it, both the owner's, both taken at the
CP-C1 walk on 2026-08-29 (research/2026-08-29-owner-decisions-cp-c1.md); every other value
below is still byte-identical to the prototype's:
OF-6 — the BRAND TRIO (--brand, --brand-ink, --brand-soft, both blocks) went green → blue.
OF-6b — the NEUTRALS (--bg, --surface-2, --ink, --ink-2, --line in both blocks, plus dark
--surface) went green-tinted → blue-tinted, so the greys sit under the new brand
instead of pulling against it. These are the exact hexes the owner approved on the
header-options page. Light --surface stays #FFFFFF — white has no tint to change.
The prototype keeps its green for both: it is a frozen record of what was signed off, not a
source this file re-reads.
Neither set was picked by eye. Every pair the stylesheets actually compose out of a moved
token was measured against the value it replaced, with the same module check battery job 5
uses (static/js/wheel-state.js `contrastRatio`), and every one of them holds its WCAG class
or beats it, in both themes. The wave's W3 and W5a reports carry those tables; `/styleguide`
re-measures the same pairs off the running document, in both themes, so they can be checked
rather than believed.
The other edits in this port are this header, the --font-current note beside the type
tokens, and the three ALTERNATE WHEEL PALETTES added at Task 16a (spec §3.1's theme
presets). Those are an addition and not a change: --seg-1 … --seg-6, --seg-ink and
--seg-wash still hold exactly the values the prototype signed off, and the presets are
applied by scoping a class on the wheel page rather than by redefining them here (site.css,
`.wh-pal-*`). The wheel is neither brand nor neutral: OF-6 and OF-6b between them moved the
brand and the greys and left all twenty-four segment colours, --seg-ink, --seg-wash and
--ok/--warn/--danger exactly where they were.
Load order for a page is: fonts.css, tokens.css, base.css, components.css.
fonts.css carries the self-hosted @font-face rules for the three families named below;
the prototype's Google Fonts is banned in production and must never come back. */
:root {
/* palette */
--bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #EEF1F5;
--ink: #171E27; --ink-2: #56616F; --line: #D9DEE6;
--brand: #0B63C5; --brand-ink: #FFFFFF; --brand-soft: #E1EBFC;
--ok: #2E7D46; --warn: #9A6210; --danger: #B3372E;
--seg-1: #2F9E8F; --seg-2: #EFB63F; --seg-3: #E4785F;
--seg-4: #5B8DEF; --seg-5: #9E7BE0; --seg-6: #63A85F;
/* Ink and wash for anything drawn ON a segment. Segments do not invert, so
neither of these may be redefined in the dark block.
--seg-ink clears 4.5:1 on all six.
IT IS DELIBERATELY NO LONGER EQUAL TO --ink. It was, up to OF-6b (2026-08-29): both
read #16211F, which made them look like one value with two names. The neutrals went
blue-tinted at OF-6b and --seg-ink did not follow, because it is not a neutral — it is
the dark half of the wheel's band promise, measured against twenty-four fixed segment
colours that did not move either. Re-tinting it would have re-opened all twenty-four.
--seg-wash is the wheel's "not the winner" veil: painted over a losing slice
at partial alpha it always moves that slice AWAY from --seg-ink, so the name
stays readable in both themes. A theme-following wash would darken the losers
in dark mode and bury their labels. */
--seg-ink: #16211F;
--seg-wash: #FFFFFF;
/* ── the alternate wheel palettes (Task 16a, spec §3.1 "theme presets") ──
Three more sets of six, built the way the --seg family was: six hues in ONE
narrow lightness band, so a slice can be told from its neighbour by hue and
the two things painted on it never change.
THE BAND IS THE PROMISE, and it is a promise about --seg-ink and --seg-wash,
which do not invert. Every colour below sits where
contrast(colour, --seg-ink) >= 4.5 the label stays AA in both themes
contrast(colour, --seg-wash) >= 1.8 the hairline between two slices, and
the veil over a losing one, stay visible
— the same window the six shipped segments sit in (5.00…8.99 and 1.84…3.30).
Check battery job 5 (`node app/qa/sweeps.ts --only=seg-palettes`) reads THIS FILE
and asserts it of all twenty-four, against the same module that constrains a
colour a person picks — so a hand-edited hex here cannot quietly take a name off
a slice.
A preset is chosen on the wheel page and nowhere else: site.css's `.wh-pal-*`
maps one of these families onto --seg-1 … --seg-6 for the wheel's stage only,
which is why the chips (the disc's legend) follow the disc without a second
rule. "Classic" is the absence of that class — it IS the --seg family. */
--pal-warm-1: #DF7583; --pal-warm-2: #E48467; --pal-warm-3: #E89D5C;
--pal-warm-4: #EAB343; --pal-warm-5: #CAB52F; --pal-warm-6: #D992A9;
--pal-cool-1: #34A68F; --pal-cool-2: #47B8CA; --pal-cool-3: #5EA4D7;
--pal-cool-4: #7392E8; --pal-cool-5: #9385DB; --pal-cool-6: #B786D7;
--pal-bright-1: #EF718A; --pal-bright-2: #F68952; --pal-bright-3: #E8B40A;
--pal-bright-4: #2EB95C; --pal-bright-5: #50B8EC; --pal-bright-6: #BF78E2;
/* The one image token: the select chevron, drawn as a background by
`select.input` in components.css. (The header used to draw it too, on a
locale