refactor(ui): Modern Design System & CSS Variable Theme Token Architecture

[Sanan507]

Overview

Systematically refactor frontend/src/styles.css to replace all scattered hardcoded hex color values with a unified CSS Custom Properties (design tokens) architecture in :root, supporting single-attribute [data-theme='light'] theme swapping.

Implementation Details & File Reference

• Tokens Definition: Define semantic CSS variables in frontend/src/styles.css (--color-bg-primary, --color-bg-secondary, --color-surface, --color-border, --color-text-primary, --color-accent, --color-accent-glow).
• Light Theme Tokens: Add [data-theme='light'] override selector mapping tokens to high-contrast light theme values.
• Refactor Raw Hexes: Replace all hardcoded hex literals across styles.css with token variables.
• Theme Toggle: Update theme switcher in frontend/src/App.tsx to set document.documentElement.setAttribute('data-theme', theme).

Definition of Done

• Toggling dark/light mode switches all UI component colors seamlessly via a single data-theme attribute.
• Zero visual regressions in dark mode.
• All raw color literals in CSS are replaced by design token variables.

Skill Level

Medium — comprehensive CSS search-and-replace and design token architecture refactoring.