/* ════════════════════════════════════════════════════════════════
   08-themes.css — Dark Mode overrides
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --surface: #0F1626;
  --surface-2: #141C2E;
  --surface-raised: #1A2338;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #E7EBF3;
  --text-muted: #9AA4B8;
  --gray-50: #0F1626;
  --gray-100: #141C2E;
  --gray-200: #1F2940;
  --gray-300: #2A3650;
  --gray-400: #4A5578;
  --gray-500: #8A94AD;
  --gray-700: #BCC3D4;
  --gray-900: #E7EBF3;
  --dark: #E7EBF3;
  --primary-50: rgba(74, 144, 217, 0.08);
  --primary-100: rgba(74, 144, 217, 0.16);
  --primary-200: rgba(74, 144, 217, 0.25);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 4px rgba(74, 144, 217, 0.25);
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(74, 144, 217, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 100%, rgba(242, 138, 66, 0.05), transparent 55%);
}

[data-theme="dark"] .topbar { background: rgba(15, 22, 38, 0.75); }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }