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/index.css

@@ -1,13 +1,16 @@
 /* ─── CSS Custom Properties ───────────────────────────────────────────────── */
 :root {
+  /* Dark Mode Colors */
   --bg:        #07111f;
   --surface:   #0a1928;
   --surface2:  #0d2035;
   --border:    #1e2a3a;
   --text:      #e2eaf2;
   --muted:     #4a6080;
-  --accent:    #38bdf8;
-  --success:   #34d399;
+  
+  /* Brand Colors */
+  --accent:    #0ea5e9;
+  --success:   #10b981;
   --warning:   #f59e0b;
   --danger:    #ef4444;
   --spotify:   #1DB954;
@@ -18,6 +21,34 @@
 
   --radius:    8px;
   --radius-lg: 16px;
+  
+  /* Glassmorphism */
+  --glass-bg:  rgba(10, 25, 40, 0.7);
+  --glass-blur: 12px;
+}
+
+/* Light Mode */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:        #f8fafc;
+    --surface:   #f1f5f9;
+    --surface2:  #e2e8f0;
+    --border:    #cbd5e1;
+    --text:      #0f172a;
+    --muted:     #64748b;
+    --glass-bg:  rgba(241, 245, 249, 0.8);
+  }
+}
+
+/* Custom Light Mode Toggle */
+html.light-mode {
+  --bg:        #f8fafc;
+  --surface:   #f1f5f9;
+  --surface2:  #e2e8f0;
+  --border:    #cbd5e1;
+  --text:      #0f172a;
+  --muted:     #64748b;
+  --glass-bg:  rgba(241, 245, 249, 0.8);
 }
 
 /* ─── Reset ───────────────────────────────────────────────────────────────── */
@@ -39,11 +70,76 @@ html, body, #root {
 ::-webkit-scrollbar-track { background: var(--surface); }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
+/* ─── Animations ───────────────────────────────────────────────────────────── */
+@keyframes slideInUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+/* ─── Glassmorphic Components ───────────────────────────────────────────────── */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: var(--radius-lg);
+}
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.glass-card:hover {
+  background: rgba(10, 25, 40, 0.85);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.15);
+}
+
+/* Light mode card hover */
+html.light-mode .glass-card:hover {
+  background: rgba(241, 245, 249, 0.95);
+  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.1);
+}
+
 /* ─── Utilities ───────────────────────────────────────────────────────────── */
 .mono { font-family: var(--font-mono); }
 .muted { color: var(--muted); }
 .accent { color: var(--accent); }
 
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.slide-in-up { animation: slideInUp 0.3s cubic-bezier(0.23, 1, 0.320, 1); }
+.slide-in-down { animation: slideInDown 0.3s cubic-bezier(0.23, 1, 0.320, 1); }
+.pulse { animation: pulse 2s ease-in-out infinite; }
+
+/* ─── Button Variants ───────────────────────────────────────────────────────── */
+
+/* ─── Button Variants ───────────────────────────────────────────────────────── */
 button {
   cursor: pointer;
   background: none;
@@ -56,9 +152,52 @@ button {
   align-items: center;
   justify-content: center;
   border-radius: var(--radius);
-  transition: background 0.15s, opacity 0.15s;
+  transition: all 0.2s cubic-bezier(0.23, 1, 0.320, 1);
+  font-weight: 500;
+}
+
+button:hover {
+  transform: scale(1.05);
+}
+
+button:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+
+/* Primary Button */
+button.primary {
+  background: var(--accent);
+  color: white;
+  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
+}
+
+button.primary:hover {
+  background: #06b6d4;
+  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
+}
+
+/* Ghost Button */
+button.ghost {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+button.ghost:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+/* Icon Button */
+button.icon {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+button.icon:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
-button:active { opacity: 0.7; }
 
 input[type=range] {
   -webkit-appearance: none;