/*
  Theme: Dark
  Palette: deep navy / gray / blue.
*/

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #0f1a2d;
  --surface-2: #0c1426;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.18);

  --blue: #60a5fa;
  --blue-600: #3b82f6;
  --blue-50: rgba(96,165,250,0.14);

  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;

  --shadow: 0 18px 42px rgba(0,0,0,0.45);
  --shadow-sm: 0 12px 30px rgba(0,0,0,0.38);

  --focus: 0 0 0 3px rgba(96,165,250,0.20);
  --topbar-bg: rgba(11,18,32,0.84);
  --input-bg: rgba(255,255,255,0.06);

  --bg-grad:
    radial-gradient(900px circle at 12% -10%, rgba(96,165,250,0.14), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 40%, #0c1426 100%);
}

/* Dark theme specifics (a few controls need explicit background on some browsers) */
:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .nav button,
:root[data-theme="dark"] .navDrop summary,
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] input[type="file"]::file-selector-button {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

:root[data-theme="dark"] .badge.donor {
  background: rgba(245,158,11,0.16);
  border-color: rgba(245,158,11,0.65);
}