docs: replace SHOWCASE-ROADMAP.md with docs/backlog/ (17 WPs)

Turns the prior roadmap sketch into ordered, gated work packages (enforcement
gates, FP/DDD consistency, CIBG fidelity, Storybook curriculum, a11y) from the
2026-07-02 showcase-hardening audit.

docs/backlog/WP-02-check-tokens.md

@@ -0,0 +1,67 @@
+# WP-02 — Harden `check:tokens` + fix what it then catches
+
+Status: todo
+Phase: 0 — enforcement & gates
+
+## Why
+
+The token guard (`check:tokens` in `package.json`) only greps for hex colors and only
+scans `registratie/ui`, `shared/ui`, `shared/layout`. It misses `rgb()`/`hsl()` values
+and skips `brief/`, `auth/`, `herregistratie/`, `showcase/` entirely. The guard must
+cover the whole app before the CIBG work (WP-10…13) leans on it.
+
+## Read first
+
+- `package.json` (`check:tokens` script)
+- `src/styles.scss` (the token bridge — the vocabulary fixes must come from)
+- `CLAUDE.md` theming section
+
+## Decisions (pre-made, don't relitigate)
+
+- Raw `px` values are **not** grepped (too many false positives); border-width fixes are
+  done manually in this WP and the script documents why px is out of scope.
+- A `/* token-ok */` inline marker suppresses a justified false positive (e.g. `rgb` in a
+  comment or data-URI) — each use needs a reason in the comment.
+
+## Files
+
+- `package.json` → move logic to `scripts/check-tokens.sh` (new), keep the npm script name
+- `src/app/shared/layout/site-footer/site-footer.component.ts` — `rgb(255 255 255 / 0.25)`
+- `src/app/shared/ui/debug-state/debug-state.component.ts` — raw rgba/hex; tokenize and
+  drop its exclusion (it's dev-only chrome but the rule should have no holes)
+- `src/app/brief/ui/letter-block/letter-block.component.ts` — raw `3px` border
+- `src/app/brief/ui/letter-preview/letter-preview.component.ts` — raw `1px` border
+- `src/app/brief/ui/passage-picker/passage-picker.component.ts` — raw `1px` border
+
+## Steps
+
+1. Create `scripts/check-tokens.sh`; `package.json` `check:tokens` calls it.
+2. Extend the regex to `#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(` (skip lines containing
+   `token-ok`).
+3. Extend the scanned set to **all** `src/app/**/*.component.ts`.
+4. Run it; fix every hit using tokens from the `src/styles.scss` bridge (add a bridge
+   token only if no existing one fits — keep the vocabulary small).
+5. Fix the raw border widths in the three brief components (`--rhc-border-width-*`),
+   even though px isn't grepped.
+6. Plant a violation, confirm the script fails, remove it.
+
+## Acceptance criteria
+
+- [ ] Script scans all contexts and matches hex + rgb()/hsl().
+- [ ] Zero exclusions; any `token-ok` marker has a reason.
+- [ ] site-footer, debug-state, and the three brief components are tokenized.
+- [ ] A planted violation provably fails `npm run check:tokens`.
+
+## Verification
+
+GREEN + `npm run test-storybook:ci`.
+
+## Out of scope
+
+Grepping px/rem values; scss files (`styles.scss` is the one place palette values are
+allowed — it IS the bridge).
+
+## Risks
+
+Regex false positives in strings/URLs — that's what the `token-ok` marker is for; keep
+its bar high.