Semantic color tokens to enable CSS-variable theming

[keaganstokoe]

Problem

~90 component files use hardcoded Tailwind color classes (text-gray-300, bg-red-950/95, border-yellow-700/80, etc.). Adding a light theme or any other styling means touching every file.

What this does

Adds a semantic token layer between components and colors:

Component class      Tailwind alias       CSS variable              Value
text-body            body                 --text                    #c9d1d9
bg-status-error-bg   status.error-bg      --status-error-bg         rgba(127,29,29,0.95)

Then refactors all component files to use the semantic names instead of raw Tailwind shades.

New CSS variables in theme.css (20 tokens): --text-bright, --overlay, --status-error*, --status-warning*, --status-success*, --status-info*

New Tailwind aliases in tailwind-config.js: body, bright, fg-muted, fg-dim, field, overlay, status.*

Also extracts the inline Tailwind configs from login.html and setup.html into a shared tailwind-config.js file.

What this enables

After this PR, theming the entire UI is one CSS block:

[data-theme="light"] {
  --bg: #ffffff;
  --text: #1f2937;
  --status-error: #dc2626;
  /* ...etc */
}

No component files need to change.

Scope

• 4 infrastructure files (theme.css, tailwind-config.js, login.html, setup.html)
• 92 component files
• All component changes are mechanical class name swaps
• 95 files changed, ~870 insertions, ~830 deletions

Verification

• Test suite: 439 passed
• Login page visually verified before/after