:root {
  /* Typography. */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius. */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-full: 9999px;

  /* Transitions. */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Light mode (default). */
  --bg-app: #e8e8ee;
  --bg-panel: rgba(255, 255, 255, 0.55);
  --bg-panel-hover: rgba(255, 255, 255, 0.75);
  --bg-input: rgba(255, 255, 255, 0.4);
  --bg-input-focus: rgba(255, 255, 255, 0.6);

  --text-primary: #1a1a2e;
  --text-secondary: #555573;
  --text-muted: #8888a0;

  --accent: #e07a5f;
  --accent-hover: #c9694f;
  --accent-glow: rgba(224, 122, 95, 0.3);
  --accent-text: #ffffff;

  --border: rgba(255, 255, 255, 0.5);
  --border-subtle: rgba(0, 0, 0, 0.06);

  --shadow-outset: 6px 6px 14px rgba(0, 0, 0, 0.1), -6px -6px 14px rgba(255, 255, 255, 0.7);
  --shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, 0.08), inset -3px -3px 6px rgba(255, 255, 255, 0.6);
  --shadow-sm: 2px 2px 6px rgba(0, 0, 0, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.4);

  --danger: #e74c3c;
  --success: #27ae60;
}

/* Dark mode via media query → warm neutral (Monokai Pro Spectrum-inspired). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #191919;
    --bg-panel: rgba(34, 34, 34, 0.75);
    --bg-panel-hover: rgba(44, 44, 44, 0.8);
    --bg-input: rgba(38, 38, 38, 0.6);
    --bg-input-focus: rgba(48, 48, 48, 0.7);

    --text-primary: #fcfcfa;
    --text-secondary: #c1c0c0;
    --text-muted: #727072;

    --accent: #e8926e;
    --accent-hover: #e07a5f;
    --accent-glow: rgba(232, 146, 110, 0.3);

    --border: rgba(255, 255, 255, 0.07);
    --border-subtle: rgba(255, 255, 255, 0.04);

    --shadow-outset: 6px 6px 14px rgba(0, 0, 0, 0.4), -6px -6px 14px rgba(255, 255, 255, 0.02);
    --shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.02);
    --shadow-sm: 2px 2px 6px rgba(0, 0, 0, 0.25), -2px -2px 6px rgba(255, 255, 255, 0.015);

    --glass-bg: rgba(34, 34, 34, 0.4);
    --glass-border: rgba(255, 255, 255, 0.07);
  }
}

/* Explicit dark mode override → warm neutral (Monokai Pro Spectrum-inspired). */
[data-theme="dark"] {
  --bg-app: #191919;
  --bg-panel: rgba(34, 34, 34, 0.75);
  --bg-panel-hover: rgba(44, 44, 44, 0.8);
  --bg-input: rgba(38, 38, 38, 0.6);
  --bg-input-focus: rgba(48, 48, 48, 0.7);

  --text-primary: #fcfcfa;
  --text-secondary: #c1c0c0;
  --text-muted: #727072;

  --accent: #e8926e;
  --accent-hover: #e07a5f;
  --accent-glow: rgba(232, 146, 110, 0.3);

  --border: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.04);

  --shadow-outset: 6px 6px 14px rgba(0, 0, 0, 0.4), -6px -6px 14px rgba(255, 255, 255, 0.02);
  --shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.02);
  --shadow-sm: 2px 2px 6px rgba(0, 0, 0, 0.25), -2px -2px 6px rgba(255, 255, 255, 0.015);

  --glass-bg: rgba(34, 34, 34, 0.4);
  --glass-border: rgba(255, 255, 255, 0.07);
}