/* tokens.css: the one token file for website draft 1 (lab/37/a) and the Mulholland system (lab/37/system). Every page in scope links it first; a.css and system.css also @import it, so the pages that link only those (the earlier homepages under a/v2-v4, the other system pages) get the same tokens. Kept by hand: add a token here, in its tier, and nowhere else (a/COMPONENTS.md, "Tokens", says how). This is a new design system lifted from the draft as it renders, not a normalisation of it. Sam, 2026-09-25: "THIS IS A BRAND NEW DESIGN SYSTEM ... THERE CAN BE 41 FONT SIZES SINCE WE LIFTED THIS SYSTEM". So every value the draft sets is here exactly as it renders: off the 4px step, every font size, every leading and tracking. The structure is Marijn's design skill (.claude/skills/design): one file, the W3C DTCG three tiers, every value a token; its Rules are not applied. Three tiers, one section each, in this order: 1 Primitives: raw values, named for what they are (--gray-990, --space-8, --text-m23, --duration-450, --number-0_85). Nothing outside this file reads them. 2 Semantic roles: named for what they do, each an alias of a primitive (or a calc over them). Components read this tier. Shared roles first (layout, spacing, type roles, colour, opacity, layers, motion, reveal), then the roles one component plays (the window, the system, the page components by area, the motion module, the page styles). The rules at the end of the tier rebind roles: a ground's colours, a page's face, a role's value at a width. 3 Component tokens: a component's own name for a semantic role, where it needs its own name because it differs from the shared default or is rebound (by a ground, a page or a script). Each aliases a tier-2 role; never a primitive, never a raw value. Components (a.css, system.css, motion.css, desk.css, the scripts, every page's