:root {
  /* Default: Dark Mode Variables */
  --bg-dark: #000000;
  --bg-dark-elevated: #0a0a0a;
  --bg-dark-card: rgba(20, 20, 20, 0.6);
  --surface-dark: rgba(255, 255, 255, 0.03);
  --surface-dark-hover: rgba(255, 255, 255, 0.08);
  --text-dark: #ffffff;
  --text-dark-secondary: rgba(255, 255, 255, 0.6);
  --border-dark: rgba(255, 255, 255, 0.15);

  --bg-light: #ffffff;
  --bg-light-elevated: #f4f4f5;
  --bg-light-card: rgba(255, 255, 255, 0.8);
  --surface-light: rgba(0, 0, 0, 0.03);
  --surface-light-hover: rgba(0, 0, 0, 0.06);
  --text-light: #050505;
  --text-light-secondary: rgba(0, 0, 0, 0.65);
  --border-light: rgba(0, 0, 0, 0.12);

  --brand: #ffffff;
  --brand-light: #e5e5e5;
  --brand-dark: #cccccc;
  --brand-glow: rgba(255, 255, 255, 0.15);
  --brand-glow-strong: rgba(255, 255, 255, 0.3);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 96px;
  --space-20: 128px;

  --radius-sm: 0px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --max-width: 1440px;
  --header-height: 90px;

  /* Zuweisung der Standard-Variablen (Dark) */
  --bg: var(--bg-dark);
  --bg-elevated: var(--bg-dark-elevated);
  --bg-card: var(--bg-dark-card);
  --surface: var(--surface-dark);
  --surface-hover: var(--surface-dark-hover);
  --text: var(--text-dark);
  --text-secondary: var(--text-dark-secondary);
  --border: var(--border-dark);
}

/* System Preference: Light */
@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--bg-light);
    --bg-elevated: var(--bg-light-elevated);
    --bg-card: var(--bg-light-card);
    --surface: var(--surface-light);
    --surface-hover: var(--surface-light-hover);
    --text: var(--text-light);
    --text-secondary: var(--text-light-secondary);
    --border: var(--border-light);
  }
}

/* Force Light Mode via Class on HTML/Root */
html.light-mode {
  --bg: var(--bg-light);
  --bg-elevated: var(--bg-light-elevated);
  --bg-card: var(--bg-light-card);
  --surface: var(--surface-light);
  --surface-hover: var(--surface-light-hover);
  --text: var(--text-light);
  --text-secondary: var(--text-light-secondary);
  --border: var(--border-light);
  --brand: #000000;
  --brand-light: #333333;
  --brand-glow: rgba(0, 0, 0, 0.1);
}

/* Force Dark Mode via Class on HTML/Root */
html.dark-mode {
  --bg: var(--bg-dark);
  --bg-elevated: var(--bg-dark-elevated);
  --bg-card: var(--bg-dark-card);
  --surface: var(--surface-dark);
  --surface-hover: var(--surface-dark-hover);
  --text: var(--text-dark);
  --text-secondary: var(--text-dark-secondary);
  --border: var(--border-dark);
  --brand: #ffffff;
}