[F-1] Design token layer, base stylesheet, and persistent header

[liangricky7]

Blocked by: — (the scaffold must be merged to main first) · Blocks: F-2 (#27)

(Was sprint 1 ticket 2.) The token layer is the most-depended-on artifact in the project: every screen reads it. All values are in DESIGN.md §8. It needs no backend endpoint, so it can start now.

• All 22 colour tokens, the eight-step type ramp (display, title, heading, subheading, body, ui, meta, label), the 4px spacing scale plus gutter / rail-left / rail-right / measure, and the four radii exist as the single source of truth
• No component hardcodes a value that exists as a token
• Dark mode swaps at the token layer, not per component. Raw accent (#510087) is never used on a dark background: it measures 1.5:1 and is forbidden
• Contrast for ink, ink-soft and ink-faint against ground and surface meets WCAG AA, verified by measurement and recorded. Use ink-faint: #786F66, not the mockups' #8B8278, which fails at 3.6:1
• The persistent header shows the wordmark in accent with the "TigerRacing Encyclopedia" lockup beneath at label scale, and a search field on fill that is present but does nothing until the search screen exists
• The notifications bell and account menu are absent. Both are v2
• No shadows on cards, panels, tiles or the header. Depth comes from the two background tones and hairline rules
• :focus-visible shows a 2px accent outline with offset, never suppressed
• prefers-reduced-motion disables any motion
• Content caps at 1180px. Below ~900px the side rails stack above the content instead of breaking. No mobile-specific design

Watch out: the mockups in docs/mockups/ use shorthand variable names (--soft, --faint, --strong) and one out-of-date colour. Build from DESIGN.md, not from them.

---

Source: docs/frontend-tickets.md