Reconcile standalone demo (Tiny Wire.html) inline tokens with lib/globals.css

[LinzLos]

Description

The standalone demo Tiny Wire.html is fully self-contained — one inline <style> block with its own :root token block and a duplicated copy of the component CSS. It does not @import lib/globals.css or lib/components.css. Its inline tokens have drifted from the current design system and must be reconciled.

Why

Because the demo duplicates tokens instead of consuming them, every design-system change has to be hand-mirrored into the demo. We hit exactly this during the v1.5 green→cobalt push: the demo silently kept rendering old values. Known drift found so far:

• --warning: #6B4B3E (old brown) vs current var(--clay-600) #9A6B33
• --accent: #0EA5E9 (azure) vs current var(--cobalt-600) #2F4BA6
• --info, --radius (10px vs 8px), and several shadow values also diverge

Recommended prerequisite

None — can be done immediately as a manual reconcile. Note: epic #1 (gated propagation pipeline) would automate this permanently; this issue is the tactical fix for the current drift; #1 prevents its recurrence.

Scope

Token/value reconciliation in the demo's inline :root and any inline component rules that reference now-stale values. Demo-only — no change to lib/ (that's the source of truth) and no change to the green→cobalt v1.5 contract already applied.

Touches

• Tiny Wire.html

Source

Ad hoc — discovered during the v1.5 green→cobalt migration (2026-06-14 session). The green/cobalt/success tokens in the demo were already reconciled in that pass; this issue covers the remaining pre-v1.3 drift (warning/accent/info/radius/shadow).

Owner

Lindsay (design-system owner / sole coder).

Acceptance criteria

• Demo inline :root warning/accent/info match current lib/globals.css semantic values
• --radius and shadow tokens match the current scale
• Demo renders identically to docs/components.html for the same components (light + dark)
• No regression to the v1.5 green→cobalt/success split already in the demo