tokenslisted

# /tokens Turns the frozen `DESIGN-LOCK.md` constitution and the `brief/animation.md` motion spec into CSS variables in `site/css/tokens.css`. ## When to use - Immediately after `/design-lock` (DESIGN-LOCK.md has LOCKED status on all sections). - After `/animation` (motion tokens are added). - When DESIGN-LOCK is changed via override (regenerate tokens). ## Requirements — HARD BLOCKING **Refuse to work** if any DESIGN-LOCK field is `TBD` or any section is not `LOCKED`: ``` ❌ Cannot generate tokens. DESIGN-LOCK.md → §3 Color: STATUS = TBD. Run /design-lock to complete. ``` Also refuse if `brief/animation.md` is missing (needed for motion tokens). ## Process **Step 1. Read DESIGN-LOCK.md** Ensure all 9 sections are `STATUS: LOCKED` and no value is `TBD`. **Step 2. Read brief/animation.md** Load motion decisions (intensity multiplier, stagger, computed durations). **Step 3. Read site/css/tokens.css** Existing template — do not rewrite everything, update values. **Step 4. Map DESIGN-LOCK → tokens.css** Explicit mapping: | DESIGN-LOCK | tokens.css | |---|---| | §1 Spacing → base unit | `--space-base` | | §1 Spacing → rhythm N× | `--space-1`, `--space-2`, ..., `--space-13` | | §1 Section padding top/bottom | `--section-pad-top`, `--section-pad-bottom` | | §1 Content max-width | `--content-max-w` | | §1 Page margin left/right | `--page-padding-x` | | §2 Type → font families | `--font-heading`, `--font-body`, `--font-mono` | | §2 Type → sizes | `--fs-body`, `--fs-h1`, `