:root {
  color-scheme: light dark;

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --color-brand-400: #a78bfa;
  --color-brand-500: #8b5cf6;
  --color-brand-600: #7c3aed;
  --color-brand-700: #6d28d9;

  --color-good: #10b981;
  --color-good-bg: rgba(16, 185, 129, 0.15);
  --color-warn: #f59e0b;
  --color-warn-bg: rgba(245, 158, 11, 0.15);
  --color-critical: #f43f5e;
  --color-critical-bg: rgba(244, 63, 94, 0.15);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  --focus-ring: 2px solid var(--color-brand-500);
  --focus-offset: 2px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.theme-light {
  --surface-page: #f1f5f9;
  --surface-panel: #ffffff;
  --surface-sidebar: #ffffff;
  --surface-muted: #f8fafc;
  --border-subtle: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --topbar-bg: rgba(255, 255, 255, 0.92);
}

.theme-dark {
  --surface-page: #0d0d0d;
  --surface-panel: #161616;
  --surface-sidebar: #161616;
  --surface-muted: #222221;
  --border-subtle: #383835;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --topbar-bg: rgba(22, 22, 22, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}