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,6 +19,7 @@ export default function App() {
   const Page = PAGES[tab] || Overview
 
   return (
+    <ThemeProvider>
       <div style={styles.app}>
         <TopBar />
         <TabNav activeTab={tab} onTabChange={setTab} />
@@ -25,6 +27,7 @@ export default function App() {
           <Page />
         </main>
       </div>
+    </ThemeProvider>
   )
 }
 

dashboard/src/components/audio/ZoneCard.jsx

@@ -81,49 +81,57 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
 const styles = {
   card: {
     padding: 14,
-    background: 'var(--surface)',
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
     borderRadius: 'var(--radius)',
-    border: '1px solid var(--border)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
     display: 'flex', flexDirection: 'column', gap: 10,
-    transition: 'border-color 0.2s, opacity 0.2s',
+    transition: 'all 0.3s cubic-bezier(0.23, 1, 0.320, 1)',
+    cursor: 'pointer',
   },
   header: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 },
   titleArea: { display: 'flex', flexDirection: 'column', gap: 6, flex: 1 },
-  name: { fontWeight: 600, fontSize: 14 },
+  name: { fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em' },
   sourceTag: { 
-    fontSize: 11, padding: '3px 8px', borderRadius: 4, fontWeight: 600,
+    fontSize: 11, padding: '4px 8px', borderRadius: 6, fontWeight: 600,
     display: 'inline-block', width: 'fit-content',
+    transition: 'all 0.2s',
   },
   badges: { display: 'flex', gap: 4 },
-  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' },
+  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' },
   
   groupInfo: {
     fontSize: 11, color: 'var(--muted)',
-    background: '#38bdf811', padding: 8, borderRadius: 4,
+    background: 'rgba(14, 165, 233, 0.08)', padding: 8, borderRadius: 6,
     borderLeft: '2px solid var(--accent)',
+    animation: 'slideInUp 0.3s ease-out',
   },
-  groupLabel: { fontWeight: 600, marginBottom: 4 },
+  groupLabel: { fontWeight: 600, marginBottom: 4, display: 'block' },
   groupZones: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 },
   groupZone: { 
-    fontSize: 10, padding: '2px 6px', background: 'var(--accent)',
+    fontSize: 10, padding: '3px 8px', background: 'var(--accent)',
-    color: 'var(--bg)', borderRadius: 3, fontWeight: 600,
+    color: 'white', borderRadius: 4, fontWeight: 600,
+    animation: 'slideInUp 0.2s ease-out',
   },
 
   sourceControl: { display: 'flex', gap: 8, alignItems: 'center' },
   sourceSelect: {
-    flex: 1, padding: '8px 10px', background: 'var(--bg)', color: 'var(--text)',
+    flex: 1, padding: '8px 10px', background: 'rgba(255, 255, 255, 0.05)', 
-    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+    color: 'var(--text)',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)',
     fontSize: 12, fontWeight: 600, cursor: 'pointer',
+    transition: 'all 0.2s',
   },
   groupBtn: {
-    minWidth: 44, minHeight: 44, padding: 0,
+    minWidth: 40, minHeight: 40, padding: 0,
-    background: 'var(--border)', color: 'var(--text)',
+    background: 'rgba(255, 255, 255, 0.08)', color: 'var(--text)',
-    border: 'none', borderRadius: 'var(--radius)', cursor: 'pointer',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)', 
-    fontSize: 18, transition: 'background 0.2s',
+    cursor: 'pointer',
-    '&:hover': { background: 'var(--accent)' },
+    fontSize: 16, transition: 'all 0.2s',
   },
 
   volumeRow: { display: 'flex', alignItems: 'center', gap: 10 },
-  muteBtn: { fontSize: 18, minWidth: 44, minHeight: 44, background: 'none', border: 'none', cursor: 'pointer' },
+  muteBtn: { fontSize: 18, minWidth: 40, minHeight: 40, background: 'none', border: 'none', cursor: 'pointer', transition: 'transform 0.2s' },
-  volVal: { fontFamily: 'var(--font-mono)', fontSize: 13, minWidth: 26, textAlign: 'right', color: 'var(--muted)' },
+  volVal: { fontFamily: 'var(--font-mono)', fontSize: 12, minWidth: 28, textAlign: 'right', color: 'var(--muted)' },
 }

dashboard/src/components/audio/ZoneGrid.jsx

@@ -100,25 +100,29 @@ const styles = {
     gridTemplateColumns: '240px 1fr',
     gap: 16,
     height: '100%',
+    padding: 16,
   },
   groupingPanel: {
-    background: 'var(--surface)',
+    background: 'var(--glass-bg)',
-    borderRadius: 'var(--radius)',
+    backdropFilter: 'blur(var(--glass-blur))',
-    border: '1px solid var(--border)',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
-    padding: 12,
+    borderRadius: 'var(--radius-lg)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    padding: 14,
     display: 'flex',
     flexDirection: 'column',
     gap: 10,
-    maxHeight: '100vh',
+    maxHeight: 'calc(100vh - 200px)',
     overflowY: 'auto',
+    animation: 'slideInDown 0.3s ease-out',
   },
   panelTitle: {
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: 700,
     color: 'var(--muted)',
     margin: '0 0 8px 0',
     textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: 0.6,
   },
   emptyText: {
     fontSize: 11,
@@ -132,13 +136,14 @@ const styles = {
     gap: 6,
   },
   groupListItem: {
-    background: '#38bdf811',
+    background: 'rgba(14, 165, 233, 0.08)',
-    border: '1px solid var(--accent)',
+    border: '1px solid rgba(14, 165, 233, 0.2)',
-    borderRadius: 4,
+    borderRadius: 6,
     padding: '8px 10px',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    transition: 'all 0.2s',
   },
   groupName: {
     fontSize: 11,
@@ -155,11 +160,13 @@ const styles = {
     padding: '0 4px',
     minWidth: 24,
     minHeight: 24,
+    transition: 'transform 0.2s',
   },
   grid: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
     gap: 12,
     overflowY: 'auto',
+    animation: 'slideInUp 0.3s ease-out',
   }
 }

dashboard/src/components/layout/TabNav.jsx

@@ -16,6 +16,7 @@ export default function TabNav({ activeTab, onTabChange }) {
             ...(activeTab === tab.id ? styles.active : {}),
           }}
           onClick={() => onTabChange(tab.id)}
+          className={activeTab === tab.id ? 'slide-in-down' : ''}
         >
           <span style={styles.icon}>{tab.icon}</span>
           <span style={styles.label}>{tab.label}</span>
@@ -31,6 +32,7 @@ const styles = {
     background: 'var(--surface)',
     borderBottom: '1px solid var(--border)',
     flexShrink: 0,
+    backdropFilter: 'blur(8px)',
   },
   tab: {
     flex: 1,
@@ -43,14 +45,14 @@ const styles = {
     fontSize: 11,
     color: 'var(--muted)',
     borderRadius: 0,
-    borderBottom: '2px solid transparent',
+    borderBottom: '3px solid transparent',
-    transition: 'color 0.15s, border-color 0.15s',
+    transition: 'color 0.2s cubic-bezier(0.23, 1, 0.320, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.320, 1)',
     minHeight: 48,
   },
   active: {
     color: 'var(--accent)',
-    borderBottom: '2px solid var(--accent)',
+    borderBottom: '3px solid var(--accent)',
   },
-  icon: { fontSize: 16 },
+  icon: { fontSize: 18, transition: 'transform 0.2s' },
   label: { fontSize: 10, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' },
 }

dashboard/src/components/layout/TopBar.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useNMEA } from '../../hooks/useNMEA.js'
+import { useTheme } from '../../contexts/ThemeContext.jsx'
 
 const isMock = import.meta.env.VITE_USE_MOCK === 'true'
 const isDev  = import.meta.env.DEV
@@ -10,6 +11,7 @@ function formatTime() {
 
 export default function TopBar() {
   const { sog, heading, connected } = useNMEA()
+  const { isDark, toggleTheme } = useTheme()
   const [time, setTime] = useState(formatTime())
 
   // Clock tick
@@ -23,7 +25,7 @@ export default function TopBar() {
       <div style={styles.left}>
         <span style={styles.logo}>⚓ Bordanlage</span>
         {isMock && <span style={styles.devBadge}>DEV · MOCK DATA</span>}
-        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#38bdf822', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
+        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#0ea5e922', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
       </div>
 
       <div style={styles.center}>
@@ -45,6 +47,14 @@ export default function TopBar() {
       </div>
 
       <div style={styles.right}>
+        <button 
+          className="icon ghost"
+          onClick={toggleTheme}
+          title={isDark ? 'Light Mode' : 'Dark Mode'}
+          style={{ fontSize: 18 }}
+        >
+          {isDark ? '☀️' : '🌙'}
+        </button>
         <span style={styles.time}>{time}</span>
       </div>
     </header>

dashboard/src/contexts/ThemeContext.jsx

@@ -0,0 +1,35 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeContext = createContext()
+
+export function ThemeProvider({ children }) {
+  const [isDark, setIsDark] = useState(() => {
+    const saved = localStorage.getItem('theme')
+    if (saved) return saved === 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (isDark) {
+      root.classList.remove('light-mode')
+    } else {
+      root.classList.add('light-mode')
+    }
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  }, [isDark])
+
+  const toggleTheme = () => setIsDark(prev => !prev)
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) throw new Error('useTheme must be used within ThemeProvider')
+  return context
+}

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;