/* Design tokens (light). Source: docs/design/DESIGN.md.
   backend/app/static/auth/auth.css carries a copy of these values for the login pages;
   src/styles/tokens.test.ts fails if the two drift apart.
   The dark values below are mirrored in auth.css (test: tokens.test.ts). */
:root {
  color-scheme: light;
  --canvas: #f5f8fc;
  --surface: #ffffff;
  --navy: #0b1f3a;
  --primary: #0f5096;
  --primary-hover: #0b3c70;
  --on-primary: #ffffff;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --on-accent: #0b1f3a;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #5b6b80;
  --danger: #ba1a1a;
  --focus-ring: rgba(15, 80, 150, 0.35);
  --radius-card: 20px;
  --radius-control: 12px;
  --shadow-card:
    0 8px 20px -4px rgba(11, 31, 58, 0.08),
    0 4px 8px -2px rgba(11, 31, 58, 0.03);
  --font-sans: "Vazirmatn Variable", Vazirmatn, Tahoma, sans-serif;
  /* surfaces and text beyond the login pages */
  --surface-muted: #f1f5f9;
  --text-soft: #94a3b8;
  --on-navy: #ffffff;
  --on-navy-muted: #93c5fd;
  --navy-border: rgba(255, 255, 255, 0.08);
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --code-var: #fbbf24;
  /* the one fixed set of statuses: fg / bg / border / dot */
  --st-not-started-fg: #475569;
  --st-not-started-bg: #f1f5f9;
  --st-not-started-border: #e2e8f0;
  --st-not-started-dot: #94a3b8;
  --st-in-progress-fg: #b45309;
  --st-in-progress-bg: #fffbeb;
  --st-in-progress-border: #fde68a;
  --st-in-progress-dot: #f59e0b;
  --st-submitted-fg: #0b3c70;
  --st-submitted-bg: #eff6ff;
  --st-submitted-border: #bfdbfe;
  --st-submitted-dot: #0f5096;
  --st-changes-fg: #b91c1c;
  --st-changes-bg: #fef2f2;
  --st-changes-border: #fecaca;
  --st-changes-dot: #dc2626;
  --st-approved-fg: #047857;
  --st-approved-bg: #ecfdf5;
  --st-approved-border: #a7f3d0;
  --st-approved-dot: #10b981;
  --font-mono:
    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
}

/* Dark theme: values from docs/design/DESIGN-dark-reference.md. Set by theme-init.js and the
   theme switch as <html data-theme="dark">. */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #071426;
  --surface: #112644;
  --surface-muted: #0d1f38;
  --navy: #0b1f3a;
  --primary: #adc6ff;
  --primary-hover: #d8e2ff;
  --on-primary: #002e6a;
  --accent: #f59e0b;
  --accent-hover: #ffb95f;
  --on-accent: #0b1f3a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: #1e3a5f;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --danger: #ffb4ab;
  --focus-ring: rgba(173, 198, 255, 0.5);
  --shadow-card: 0 8px 20px -4px rgba(0, 0, 0, 0.35);
  --code-bg: #071426;
  --st-not-started-fg: #94a3b8;
  --st-not-started-bg: rgba(100, 116, 139, 0.1);
  --st-not-started-border: rgba(100, 116, 139, 0.2);
  --st-in-progress-fg: #f59e0b;
  --st-in-progress-bg: rgba(245, 158, 11, 0.1);
  --st-in-progress-border: rgba(245, 158, 11, 0.2);
  --st-submitted-fg: #60a5fa;
  --st-submitted-bg: rgba(59, 130, 246, 0.1);
  --st-submitted-border: rgba(59, 130, 246, 0.25);
  --st-submitted-dot: #60a5fa;
  --st-changes-fg: #fca5a5;
  --st-changes-bg: rgba(220, 38, 38, 0.12);
  --st-changes-border: rgba(220, 38, 38, 0.25);
  --st-approved-fg: #10b981;
  --st-approved-bg: rgba(16, 185, 129, 0.1);
  --st-approved-border: rgba(16, 185, 129, 0.2);
}