tokens: undefined CSS tokens + hex fallbacks — square avatar bug

[ajianaz]

Summary

Several CSS custom properties are consumed but never defined, and several others carry hardcoded hex fallbacks that silently violate the token contract. One of the phantoms is a live visual bug.

Evidence

Undefined tokens actually used:

• --radius-full → web/src/routes/admin/accounts/+page.svelte:390 .account-avatar { border-radius: var(--radius-full); } — token does not exist in app.css → account avatars render as SQUARES (no fallback). The canonical token is --radius-pill.
• --color-bg-subtle → fallbacks rgba(0,0,0,…) active in schedules/+page.svelte:1265,1285 and lib/components/DataTable.svelte:205.
• --color-accent-subtle → fallback oklch(60% 0.15 260 / 0.15) active in accounts/+page.svelte:398.

Dorman hex fallbacks (fire on rename):

• var(--border, #ccc) — ConfirmDialog.svelte:62
• var(--color-border, #e2e8f0), var(--color-warning, #f59e0b), var(--color-primary, #6366f1) — schedules/+page.svelte:1211,1216,1463
• var(--color-primary, #6366f1) — ScheduleDetail.svelte:286, PostDetail.svelte:270

Impact

• Square avatars (visible bug).
• Fallback hexes reference a different palette (indigo #6366f1 vs system hue-260 oklch) — if tokens are renamed/refactored, foreign colors win silently.

Fix

• Replace var(--radius-full) with var(--radius-pill) (or define an alias — decision recorded in the new token spec).
• Define --color-bg-subtle and --color-accent-subtle in @theme.
• Strip all fallback values from var() usage against documented tokens.

Acceptance criteria

• Avatars render circular.
• grep -rn "var(--[a-z-]*, *#" web/src returns 0 hits.
• No var() referencing undefined tokens (spot-check via token spec).

Source: Titen UX audit 2026-09-20 (finding M1).

[ajianaz]

Implemented in PR #278 (merged 2026-09-20, commit 57c101f) — UX audit remediation batch.