Phase 1: Modern glassmorphic design system with light/dark mode

- Added glassmorphic components with backdrop blur and transparency
  * .glass-panel and .glass-card classes for frosted glass effect
  * Smooth transitions and hover animations
  * Proper light mode support via prefers-color-scheme and manual toggle

- Implemented light/dark mode system
  * ThemeContext provider for global theme state
  * Persists user preference to localStorage
  * Theme toggle button in TopBar (☀️/🌙)
  * Automatic detection of system preference

- Enhanced UI components with modern animations
  * Updated button styles with primary, ghost, and icon variants
  * Smooth transitions (cubic-bezier curves)
  * Slide/fade animations on component mount
  * Hover effects with subtle shadows

- Improved visual design
  * Updated color scheme (brighter accent: #0ea5e9)
  * Better visual hierarchy in typography
  * Refined spacing and padding
  * Glass effect on panels and cards

- Updated components:
  * TopBar: Added theme toggle
  * TabNav: Smooth transitions and glassmorphic styling
  * ZoneCard: Glassmorphic cards with hover effects
  * ZoneGrid: Frosted panel design

- Build: 65 modules, 184.27 KB (57.47 KB gzipped)
- All hot reloading working smoothly

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dashboard/src/App.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { ThemeProvider } from './contexts/ThemeContext.jsx'
 import TopBar from './components/layout/TopBar.jsx'
 import TabNav from './components/layout/TabNav.jsx'
 import Overview from './pages/Overview.jsx'
@@ -18,13 +19,15 @@ export default function App() {
   const Page = PAGES[tab] || Overview
 
   return (
-    <div style={styles.app}>
-      <TopBar />
-      <TabNav activeTab={tab} onTabChange={setTab} />
-      <main style={styles.main}>
-        <Page />
-      </main>
-    </div>
+    <ThemeProvider>
+      <div style={styles.app}>
+        <TopBar />
+        <TabNav activeTab={tab} onTabChange={setTab} />
+        <main style={styles.main}>
+          <Page />
+        </main>
+      </div>
+    </ThemeProvider>
   )
 }