Introduce a shared design-token layer and apply it to the web
frontend for a more consistent, readable, and accessible feel.
Pure CSS plus one HTML block; no app.js behaviour changes, and the
existing multi-theme (style x light/dark) system is preserved.
- Add spacing, type, radius and motion tokens to :root.
- Fix undefined --surface consumed by .controls-tray, which dropped
the panel background entirely; it now resolves per theme.
- Set body line-height and font smoothing; collapse near-duplicate
font sizes onto canonical scale steps.
- Rebuild the auth gate with classes and replace hardcoded colours
(#ff6b6b, #9aa4b5) with theme variables so it renders correctly in
every theme.
- Add an opacity fade on tab switches, gated by prefers-reduced-motion.
- Extend focus-visible rings to the spectrum canvas, tabindex controls
and links.
- Add a self-theming --accent-text token to lift accent-coloured text
(links, active tab) to WCAG AA without altering brand fills.
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NFpGtGTWUEYXLwZeZs2RAV
Signed-off-by: Stan Grams <sjg@haxx.space>
sjgandClaude Opus 4.8