/* Mission control design tokens. Dark is the default theme; light is equally supported.
   Text and control-border tokens stay plain hex so the contrast test can check them. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --panel-3: #eef2f8;
  --ink: #0b1220;
  --muted: #4a5568;
  --faint: #6b7588;
  --accent: #0e7490;
  --accent-ink: #ffffff;
  --accent-soft: rgba(14, 116, 144, 0.1);
  --accent-2: #4f46e5;
  --info: #1d4ed8;
  --crit: #be123c;
  --high: #c2410c;
  --warning: #92400e;
  --good: #047857;
  --waste: #9a3412;
  --risk: #b45309;
  --line: #7b8798;
  --hairline: rgba(15, 23, 42, 0.08);
  --hairline-strong: rgba(15, 23, 42, 0.14);
  --focus: #0e7490;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
  --glow-accent: 0 0 0 1px rgba(14, 116, 144, 0.25), 0 8px 28px rgba(14, 116, 144, 0.14);
  --glow-risk: 0 0 0 1px rgba(180, 83, 9, 0.28), 0 8px 28px rgba(180, 83, 9, 0.12);
  --glow-good: 0 0 0 1px rgba(4, 120, 87, 0.28), 0 8px 28px rgba(4, 120, 87, 0.12);
  --page-glow: radial-gradient(1200px 520px at 85% -10%, rgba(14, 116, 144, 0.08), transparent 60%);
  --brand-grad: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);
  --f-display: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-body: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-logo: "Outfit", "Trebuchet MS", Arial, sans-serif;
  --logo-disc: #ffffff;
  --logo-bar: #0b1220;
  --logo-accent: #0e7490;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-label: 0.75rem;
  --text-table: 0.8125rem;
  --text-body: 0.875rem;
  --text-section: 0.9375rem;
  --text-page: 1.375rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1.375rem;
  --text-kpi: 2rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --sidebar: 15.5rem;
  --content: 100rem;
  --topbar: 3.75rem;
  --row: 2.75rem;
  --radius: 0.5rem;
  --radius-card: 0.875rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14;
  --panel: #0e1524;
  --panel-2: #131c2e;
  --panel-3: #19243a;
  --ink: #e8eef9;
  --muted: #94a3bd;
  --faint: #6b7a94;
  --accent: #22d3ee;
  --accent-ink: #04121a;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-2: #818cf8;
  --info: #7dd3fc;
  --crit: #fb7185;
  --high: #fdba74;
  --warning: #fbbf24;
  --good: #34d399;
  --waste: #fdba74;
  --risk: #f59e0b;
  --line: #5b6b85;
  --hairline: rgba(148, 163, 184, 0.12);
  --hairline-strong: rgba(148, 163, 184, 0.22);
  --focus: #22d3ee;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.5);
  --glow-accent: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 32px rgba(34, 211, 238, 0.16);
  --glow-risk: 0 0 0 1px rgba(245, 158, 11, 0.38), 0 0 32px rgba(245, 158, 11, 0.14);
  --glow-good: 0 0 0 1px rgba(52, 211, 153, 0.38), 0 0 32px rgba(52, 211, 153, 0.14);
  --page-glow: radial-gradient(1100px 560px at 88% -12%, rgba(34, 211, 238, 0.09), transparent 62%), radial-gradient(900px 500px at -10% 110%, rgba(99, 102, 241, 0.08), transparent 60%);
  --brand-grad: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
}

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