Color tokens: warm neutral ramps, semantic layer, deprecated aliases

[lokesh]

Color token architecture: warm neutral ramps, semantic layer, deprecated aliases

First PR of the visual modernization series. Restructures static/css/tokens/colors.css from a flat ~110-token legacy palette (17 near-duplicate greys, hex-named tokens, no semantic layer) into the two-tier system docs/ai/design.md promises:

1. Primitives — a warm "paper to ink" neutral ramp (--neutral-50…900, hue 40–45) replacing the grey + beige families; a blue ramp whose 500/600 steps are bit-identical to --primary-blue/--link-blue (zero brand drift); muted red/green/amber status ramps with AA-safe foreground steps.
2. Semantic tokens — --color-text/-secondary/-muted, --color-background/surface/-sunken/-header, --color-link/-hover/-visited, --color-primary family, borders, and --color-{success,error,warning}-{fg,bg,border}. Every one references a primitive only — this is the dark-mode seam (color-scheme: light is declared; dark mode ships later by re-pointing this layer).
3. Deprecated aliases — every legacy token name (--grey, --beige, --dark-grey, …) re-pointed at the ramps, so all ~2,100 existing var() consumers pick up the warm palette with zero consumer edits. --beige-bright deleted (zero consumers).

Guardrails

• tests/unit/js/token-contrast.test.js parses colors.css, resolves var() chains, and asserts the WCAG AA matrix (26 assertions: text ≥ 4.5:1 on its surfaces, non-text UI ≥ 3:1). Runs in npm test.
• bundlesize budgets added for tokens.css (6KB) and ol-components.css (8KB); currently 2.6KB / 1.5KB gzip.
• docs/ai/design.md updated (also fixes the reference to a nonexistent tokens/typography.css).

Verified

• npm run lint clean, npx jest 495/495, bundlesize budgets pass.
• Contrast matrix (computed): text 11.7:1, secondary 6.1:1, muted 5.0:1, link 7.4:1, on-primary 4.9:1.
• Visual sweep of /, search, work page, login at 1280 & 390 (below).

Before / after

Page	Before	After
Home (desktop)
Search (desktop)
Work page (desktop)
Login (desktop)
Work page (mobile 390)

Notes for review

• Deliberate value shifts (audited by grepping each token's consumers): --black → warm ink neutral-900; beiges → lighter paper tints; --gold stars → muted amber-400; header gradient endpoints → flat paper tints (gradient itself flattens in the foundation-surfaces PR).
• ~46 raw hsl() literals in component CSS derived from old token values do not shift via aliases; they're re-tokenized in the per-page PRs of this series.
• Rollback = revert one file (plus the test/budget additions).

🤖 Generated with Claude Code