Consolidate UI colors behind CSS custom properties; fix design drift

Phase 1 of the design-contract conformance cleanup. Add a canonical
:root token block (single source of truth, mirroring
design/tokens.tokens.json) to public/index.html's stylesheet and migrate
the whole <style> block to var(--token); give public/auth.html its own
subset :root and migrate it too.

Fix all color + weight drift across every surface (stylesheet, inline
styles, JS handlers, the SHARE_PAGE_CSS export):
- legacy indigos #6366f1/#4f46e5/#4338ca + rgba(99,102,241) ->
  #818cf8/#a5b4fc/rgba(129,140,248)
- blue #3b82f6 interactive buttons (incl. the whole auth screen) -> indigo
- legacy darks #0a0e17/#0b1120/#020617/#121828/#1f2942 -> the surface ladder
- #f5f9ff -> #f1f5f9, #312e81 -> #1e293b, weights 650->600 / 680->700

The meta theme-color stays a literal #0a0e1a. Verified: 144 tests pass,
both pages serve 200, all var() references resolve. Phase 2 (var-ifying
the long-tail inline styles, snapping off-scale font/radius) is in
ROADMAP.md.

ROADMAP.md

@@ -16,40 +16,36 @@ Longer-term backlog for Recaps. Near-term in-flight work and known issues live i
 ## Design-contract conformance cleanup (from the 2026-06-16 `/design` extract)
 
 The `design/` contract (`design/DESIGN.md` + `design/tokens.tokens.json`) was extracted
-from the as-built UI and reconciled with Grant on 2026-06-16. The code is **structurally
-aligned** (right surface ladder, accent system, premium-purple, components) but a set of
-legacy values survived the reconciliation and now read as off-contract drift. None are
-release-blocking; all are mechanical token migrations. `design-checker` found seven
-categories (counts approximate, from grep) across the three styling surfaces — the main
-`public/index.html` `<style>` block, its `SHARE_PAGE_CSS` string, and `public/auth.html`.
-**Edit all three in lockstep** (the SHARE_PAGE_CSS string carries its own copies that a
-main-stylesheet grep won't catch). Do NOT do this in the same pass as the contract itself.
+from the as-built UI and reconciled with Grant on 2026-06-16. The code was structurally
+aligned but a set of legacy values had survived as off-contract drift.
 
-- **Legacy accent indigo → `#818cf8`** (~12 hard + ~16 tint). `#6366f1`/`#4f46e5`/`#4338ca`
-  fills/borders/hovers and `rgba(99,102,241,…)` tints → `#818cf8`/`#a5b4fc` + `rgba(129,140,248,…)`.
-  Biggest cluster is the activation screen (`index.html:1213-1216`, `:1565,1576,1579`) which
-  uses all three demoted values in one component; also inline buttons `:6496,7776,8183`,
-  `.license-block` `:1593,1601`.
-- **Blue `#3b82f6` as a primary interactive color → indigo** (auth ×4 + index ×8). `auth.html`
-  is the worst offender — its primary button + input focus are blue (`auth.html:99,105-117`);
-  also wallet/sign-up/grant/password buttons (`index.html:5228,5763,8151,8163,7609,12384`).
-  Blue stays only for info/status + speaker chips.
-- **Legacy dark backgrounds → ladder** (~10). `#0a0e17`→`#0a0e1a` (`:1156,1243,8662`);
-  `#0b1120`→`#0a0e1a` (`:1191` + SHARE_PAGE_CSS `:11111`); `#020617`→`#0f172a` (`:1562`);
-  and the auth sub-palette `#121828`→`#111827`, `#1f2942`→`#1e293b` (`auth.html:47-48,83`,
-  `index.html:400-401`).
-- **Stray heading near-white `#f5f9ff` → `#f1f5f9`** (×9; 5 in `auth.html:59,63,87,94,96`,
-  4 in index `:418,660,6335,6343`).
-- **Off-scale font sizes → nearest step** (~23). `15→16`, `24→22`, `9→10`, `12.5/11.5→12`,
-  `10.5→10` (e.g. `index.html:84,899,907`, `auth.html:86,110`).
-- **Off-scale weights** (×3): `650→600` (`:1008`, SHARE_PAGE_CSS `:11133`), `680→700`
-  (SHARE_PAGE_CSS `:11113`).
-- **Off-scale radii → snap** (~18). `3→4`, `5→6`, `7→6|8`, `9→8|10`, `11→10|12` (scrollbars,
+**Phase 1 — DONE 2026-06-16 (not yet deployed to the box).** Introduced a canonical `:root`
+token block (the single source of truth, mirroring `tokens.tokens.json`) at the top of the
+`public/index.html` `<style>` block and migrated the whole stylesheet to `var(--token)`;
+`public/auth.html` got its own subset `:root` and was migrated too. Fixed **all** color +
+weight drift across every surface (stylesheet, ~447 inline styles, JS handlers, the
+`SHARE_PAGE_CSS` export): legacy indigos `#6366f1`/`#4f46e5`/`#4338ca` + `rgba(99,102,241,…)`
+→ `#818cf8`/`#a5b4fc`/`rgba(129,140,248,…)`; blue `#3b82f6` interactive buttons (incl. the
+whole auth screen) → indigo; legacy darks `#0a0e17`/`#0b1120`/`#020617`/`#121828`/`#1f2942`
+→ the ladder; `#f5f9ff`→`#f1f5f9`; `#312e81`→`#1e293b`; weights `650→600`, `680→700`.
+Verified: 144 tests pass, both pages serve 200, all 426+27 `var()` references resolve, no
+undefined vars. (`SHARE_PAGE_CSS` and `auth.html` are standalone documents that each carry
+their own copy — kept in sync; the meta `theme-color` stays a literal `#0a0e1a`.)
+
+**Phase 2 — REMAINING (deliberately deferred; these are *visible* changes, unlike Phase 1's
+no-op var migration).**
+- **Var-ify the long-tail inline `style=` attributes.** Phase 1 fixed the *drift* inline
+  values but left canonically-correct inline hexes as literals (the stylesheet is now the
+  single source of truth; inline styles still hardcode). Convert them to `var(--token)` now
+  that the tokens exist — but dodge the spots that can't take `var()`: the `<meta theme-color>`,
+  SVG `fill`/`stroke` set via JS (e.g. `index.html` sub-icon), and any hex used in JS *logic*
+  rather than as a CSS value. Per-occurrence judgement, not a blind sweep.
+- **Snap off-scale font sizes** to the scale: `15→16`, `24→22`, `9→10`, `12.5/11.5→12`,
+  `10.5→10` (~23 occurrences). Each is a small visible size change — eyeball per component.
+- **Snap off-scale radii**: `3→4`, `5→6`, `7→6|8`, `9→8|10`, `11→10|12` (~18; scrollbars,
   history/queue action buttons, mobile submit/menu, buy inputs).
-- **(stretch) Consolidate inline styles behind CSS custom properties.** ~447 inline `style=`
-  attrs + duplicated values are why this drift accumulates; a `:root` token block (or
-  `design/brand/palette.css` generated from the tokens) would make the contract enforceable
-  instead of advisory. Big diff — schedule deliberately.
+- **(stretch) Generate `design/brand/palette.css` from the tokens** (Style Dictionary) and
+  `@import`/inline it, so the `:root` block isn't hand-maintained in three places.
 
 ## Known debt (P2, from the 2026-06-14 full-eval — `EVALUATION.md`)