dark-light-modes

# Dark/Light Modes

Robust theme system with system preference detection.

## Agent Workflow (MANDATORY)

Before implementation:
1. **fuse-ai-pilot:explore-codebase** - Check existing theme setup
2. **fuse-ai-pilot:research-expert** - next-themes or theme provider docs

After: Run **fuse-ai-pilot:sniper** for validation.

## CSS Variables Approach

```css
:root {
  /* Light mode (default) */
  --background: oklch(100% 0 0);
  --foreground: oklch(10% 0 0);
  --surface: oklch(98% 0.01 260);
  --muted: oklch(95% 0.01 260);
  --border: oklch(90% 0.01 260);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);
}

.dark {
  --background: oklch(10% 0.01 260);
  --foreground: oklch(98% 0 0);
  --surface: oklch(15% 0.01 260);
  --muted: oklch(20% 0.01 260);
  --border: oklch(25% 0.01 260);

  /* Glass - darker */
  --glass-bg: rgba(0, 0, 0, 0.4);
  --glass-border: rgba(255, 255, 255, 0.1);
}
```

## System Preference Detection

```css
/* Automatic system preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: oklch(10% 0.01 260);
    --foreground: oklch(98% 0 0);
    /* ... dark values */
  }
}
```

## React Implementation

```tsx
// ThemeProvider.tsx
"use client";
import { createContext, useContext, useEffect, useState } from "react";

type Theme = "light" | "dark" | "system";

const ThemeContext = createContext<{
  theme: Theme;
  setTheme: (theme: Theme) => void;
}>({ theme: "system", setTheme: () => {} });

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("system");

  useEffect(() => {
    const root = document.documentElement;

    if (theme === "system") {
      const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      root.classList.toggle("dark", systemDark);
    } else {
      root.classList.toggle("dark", theme === "dark");
    }
  }, [theme]);

  return (
    <ThemeContext.Provider value