/**
 * CSS-Variablen – Dark Mode (Standard), Light Mode über .theme-light
 * Pro Benutzer überschreibbar via users/{username}/settings.json → dynamische Variablen
 */

:root {
  /* Hintergrund & Flächen */
  --bg-page: #0f0f12;
  --bg-header: rgba(15, 15, 18, 0.92);
  --bg-footer: rgba(15, 15, 18, 0.88);
  --bg-card: #1a1a1f;
  --bg-input: #25252a;
  --bg-hover: #2a2a30;

  /* Text */
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  /* Akzente */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-ki: #8b5cf6;

  /* Rahmen & Schatten (Border/Line wie bmatrix einstellbar) */
  --border: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.12);
  --line-color: rgba(255, 255, 255, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --radius: 12px;
  --radius-sm: 8px;

  /* Abstände */
  --header-height: 32px;
  --footer-height: 24px;
  --search-row-height: 48px;
  --spacing: 1rem;
  --spacing-lg: 1.5rem;
}

/* Light Mode (Einstellungen) */
body.theme-light {
  --bg-page: #f4f4f5;
  --bg-header: rgba(244, 244, 245, 0.95);
  --bg-footer: rgba(244, 244, 245, 0.95);
  --bg-card: #ffffff;
  --bg-input: #e4e4e7;
  --bg-hover: #d4d4d8;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --border: rgba(0, 0, 0, 0.08);
  --border-color: rgba(0, 0, 0, 0.12);
  --line-color: rgba(0, 0, 0, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}