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.

AGENTS.md

@@ -139,6 +139,8 @@ unsure whether a change is contract-affecting, assume it is and check.
 
 **Done & live:** self-serve Pro/Max purchase (Bitcoin inline-Lightning + Zaprite card, prepaid, relay owns tier/expiry), core-decoupling, per-tenant subscriptions, expiry-reminder emails (`POST /api/admin/reminders/run {test_email}`), **opt-in Daily Digest** (0.2.158, `b4fa5d7`): off-by-default daily email of a user's last ~24h of library recaps, each synthesized via `/relay/analyze` (operator-absorbed); `daily-digest.js` scan at `SEND_HOUR=8`, per-user watermark dedup, public tokenized unsubscribe, admin trigger `POST /api/admin/digest/run`; and **YouTube `/live/` + `/shorts/` URL support** (0.2.159, `cb961cd`): `extractVideoId` now accepts those forms (was rejecting them as "Invalid YouTube URL"). Plans in `docs/*-plan.md`.
 
+**Design system (2026-06-16, committed `1741fb1` + a follow-up commit, NOT yet deployed):** the `design/` contract was extracted from the as-built UI (`design/DESIGN.md` + `design/tokens.tokens.json`; see the **Design** line near the top). Then **Phase 1 of the conformance cleanup landed**: a canonical `:root` token block is now the single source of truth in `public/index.html`'s `<style>`, the whole stylesheet + `public/auth.html` are migrated to `var(--token)`, and all color/weight drift was fixed across every surface (auth's blue accent → indigo, legacy darks → the ladder, etc.). Verified locally (144 tests pass, both pages serve 200, all `var()` resolve) but **not installed/deployed** — reaches recaps.cc when the box serves the new `public/` files. Phase 2 (var-ifying the long-tail inline styles, snapping off-scale font/radius) is queued in `ROADMAP.md`.
+
 **Only loose end:** the Daily Digest's relay-synthesis + SMTP path can't be exercised off-box, so it's installed but **not yet smoke-tested** — that's operator action #5 below. Everything else (schema/upgrade, scheduler boot, unsubscribe flow) is verified.
 
 **Pending operator actions:**

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

public/auth.html

@@ -30,12 +30,31 @@
 
   <link rel="icon" type="image/png" href="/assets/icon.png">
   <style>
+    /* Design tokens (subset used by this page) — mirror of design/tokens.tokens.json.
+       This is a standalone document, so it carries its own copy; keep it in sync with
+       the canonical :root in index.html. Accent is indigo, not the old blue. */
+    :root {
+      --bg: #0a0e1a;
+      --surface: #111827;
+      --border: #1e293b;
+      --accent: #818cf8;
+      --accent-hover: #a5b4fc;
+      --text: #e2e8f0;
+      --text-strong: #f1f5f9;
+      --text-body: #cbd5e1;
+      --text-muted: #94a3b8;
+      --text-label: #64748b;
+      --text-faint: #475569;
+      --error-soft: #fca5a5;
+      --success-text: #4ade80;
+    }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #0a0e1a;
+      background: var(--bg);
-      color: #e2e8f0;
+      color: var(--text);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -44,8 +63,8 @@
     .card {
       width: 100%;
       max-width: 420px;
-      background: #121828;
+      background: var(--surface);
-      border: 1px solid #1f2942;
+      border: 1px solid var(--border);
       border-radius: 12px;
       padding: 32px 28px;
     }
@@ -56,65 +75,65 @@
       margin-bottom: 28px;
     }
     .logo img { width: 32px; height: 32px; border-radius: 6px; }
-    .logo span { font-size: 18px; font-weight: 600; color: #f5f9ff; }
+    .logo span { font-size: 18px; font-weight: 600; color: var(--text-strong); }
     h1 {
       font-size: 22px;
       font-weight: 600;
-      color: #f5f9ff;
+      color: var(--text-strong);
       margin-bottom: 8px;
     }
     p.lede {
       font-size: 14px;
       line-height: 1.55;
-      color: #94a3b8;
+      color: var(--text-muted);
       margin-bottom: 24px;
     }
     label {
       display: block;
       font-size: 13px;
       font-weight: 500;
-      color: #cbd5e1;
+      color: var(--text-body);
       margin-bottom: 8px;
     }
     input[type=email],
     input[type=password] {
       width: 100%;
-      background: #0a0e1a;
+      background: var(--bg);
-      border: 1px solid #1f2942;
+      border: 1px solid var(--border);
       border-radius: 8px;
       padding: 12px 14px;
-      font-size: 15px;
+      font-size: 16px;
-      color: #f5f9ff;
+      color: var(--text-strong);
       font-family: inherit;
       outline: none;
       transition: border-color 0.15s ease;
       /* Browsers auto-fill password fields with their own bright
          background; -webkit-text-fill-color + a long inset shadow
          override that so the field stays on-brand. */
-      -webkit-text-fill-color: #f5f9ff;
+      -webkit-text-fill-color: var(--text-strong);
-      -webkit-box-shadow: 0 0 0 1000px #0a0e1a inset;
+      -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
-      caret-color: #f5f9ff;
+      caret-color: var(--text-strong);
     }
     input[type=email]:focus,
-    input[type=password]:focus { border-color: #3b82f6; }
+    input[type=password]:focus { border-color: var(--accent); }
     input[type=email]::placeholder,
-    input[type=password]::placeholder { color: #475569; }
+    input[type=password]::placeholder { color: var(--text-faint); }
     button {
       width: 100%;
       margin-top: 16px;
-      background: #3b82f6;
+      background: var(--accent);
       color: white;
       border: none;
       border-radius: 8px;
       padding: 12px 14px;
-      font-size: 15px;
+      font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.15s ease;
       font-family: inherit;
     }
-    button:hover:not(:disabled) { background: #2563eb; }
+    button:hover:not(:disabled) { background: var(--accent-hover); }
-    button:disabled { background: #1e3a8a; cursor: not-allowed; opacity: 0.6; }
+    button:disabled { background: var(--border); cursor: not-allowed; opacity: 0.6; }
     .feedback {
       margin-top: 20px;
       padding: 14px 16px;
@@ -124,26 +143,26 @@
       display: none;
     }
     .feedback.success {
-      background: rgba(16, 185, 129, 0.1);
+      background: rgba(34, 197, 94, 0.1);
-      border: 1px solid rgba(16, 185, 129, 0.3);
+      border: 1px solid rgba(34, 197, 94, 0.3);
-      color: #6ee7b7;
+      color: var(--success-text);
       display: block;
     }
     .feedback.error {
       background: rgba(239, 68, 68, 0.1);
       border: 1px solid rgba(239, 68, 68, 0.3);
-      color: #fca5a5;
+      color: var(--error-soft);
       display: block;
     }
     .footer {
       margin-top: 28px;
       font-size: 12px;
-      color: #64748b;
+      color: var(--text-label);
       text-align: center;
       line-height: 1.5;
     }
-    .footer a { color: #94a3b8; text-decoration: none; }
+    .footer a { color: var(--text-muted); text-decoration: none; }
-    .footer a:hover { color: #cbd5e1; }
+    .footer a:hover { color: var(--text-body); }
     /* Password group hidden by default — most users want the magic
        link and the optional-password field cluttered the form. The
        "Use password instead" link below the submit button reveals
@@ -153,14 +172,14 @@
       text-align: center;
       margin-top: 14px;
       font-size: 12px;
-      color: #64748b;
+      color: var(--text-label);
     }
     .toggle-pwd-row a {
-      color: #94a3b8;
+      color: var(--text-muted);
       text-decoration: underline;
       cursor: pointer;
     }
-    .toggle-pwd-row a:hover { color: #cbd5e1; }
+    .toggle-pwd-row a:hover { color: var(--text-body); }
   </style>
 </head>
 <body>