/* Themes are implemented via CSS variables. Default is professional light (white/gray/blue). */
:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --card: #ffffff;
  --blue: #2563eb;
  --blue-600: #1d4ed8;
  --blue-50: #eff6ff;
  --shadow: 0 6px 24px rgba(17,24,39,0.06);
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,0.12);
  --card: rgba(255,255,255,0.06);
  --blue: #60a5fa;
  --blue-600: #3b82f6;
  --blue-50: rgba(96,165,250,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .topbar {
  background: rgba(11,18,32,0.82);
}
:root[data-theme="dark"] .nav a, 
:root[data-theme="dark"] .nav button,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .badge {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}