[Frontend] Theme System Architecture Refactor & High-Contrast Mode

[blurbeast]

Overview & Background

To provide an exceptional visual experience and meet strict WCAG AAA accessibility standards, the frontend theme engine needs a clean architecture refactor using semantic CSS variables, zero flash of unstyled theme (FOUT), and an official High-Contrast Mode for visually impaired users.

---

Technical Specification & Architecture

1. Semantic CSS Token System:
   • Refactor frontend/src/app/globals.css with unified semantic design tokens:
     • --color-bg-canvas, --color-bg-surface, --color-border-subtle
     • --color-text-primary, --color-text-secondary, --color-text-muted
     • --color-brand-primary, --color-brand-accent
2. High-Contrast Theme:
   • Add data-theme="high-contrast" with bold black/white borders, yellow focus rings, and contrast ratios $> 7:1$.
3. Theme Selector UI:
   • Update ModeToggle.tsx to support: System, Light, Dark, and High Contrast.

---

Target Files

• frontend/src/app/globals.css
• frontend/src/components/ModeToggle.tsx
• frontend/src/context/theme-provider.tsx

---

Acceptance Criteria

• Seamless theme switching with zero page flash on reload.
• High-contrast mode achieves $> 7:1$ contrast ratio across all UI elements.
• Clean semantic CSS variable structure.

[egwujiohaifesinachiperpetual-max]

Please assign
ETA is 4 hours