[NePreby]

Overview

Resolves #10 by adding dark mode tokens to the drafting design system with support for prefers-color-scheme: dark and manual override toggling.

Changes

1. Drafting Blueprint Slate Color Tokens (frontend/src/index.css):

   • Mapped semantic drafting tokens (paper, vellum, canvas, line, line-faint, ink, ink-2, lead, cobalt, ok, err, warn) under :root, @media (prefers-color-scheme: dark), and :root.dark.
   • Adheres strictly to the architectural drafting standard: crisp 1px hairline borders, high-contrast technical blueprint feel, and zero blur effects.
   • Contrast verification:
     • Ink on Canvas: > 12:1
     • Ink-2 on Paper: > 8:1
     • Lead on Paper: > 4.8:1 (WCAG AA compliant >= 4.5:1).

2. Theme Manager (frontend/src/lib/theme.ts):

   • Supports system, dark, and light themes with localStorage persistence under flowpulse_theme.
   • Reacts dynamically to system color scheme media query changes.
   • Initializes on application boot (initTheme in main.tsx).

3. Manual Theme Toggle (frontend/src/components/Shell.tsx):

   • Added ThemeToggle button in the top navigation header next to WalletButton.
   • Cycles through system ↔ dark ↔ light with dynamic icons (settings_brightness, dark_mode, light_mode).

4. Unit Tests & Verification (frontend/src/lib/__tests__/theme.test.ts):

   • Unit tests verifying theme persistence, system media fallback, and WCAG AA contrast calculation.
   • All 74 tests pass across the entire frontend test suite, tsc -b and production Vite build pass cleanly.

Closes #10.

---

Bounty Payout Wallet (TRC20 USDT / TRX):
TMqmJjRgVS21NL2eFtfyHciTxvE4BqGmEv