/* One source for Next.js and Django allauth surfaces. */
:root {
  color-scheme: light;

  /* Layer 1: neutral structure. */
  --n-0: #ffffff;
  --n-25: #fafbfc;
  --n-50: #f8fafc;
  --n-100: #f1f5f9;
  --n-200: #e2e8f0;
  --n-300: #cbd5e1;
  --n-500: #64748b;
  --n-700: #334155;
  --n-900: #0f172a;
  --d-bg: #0b1120;
  --d-card: #131c2e;
  --d-elev: #1b2438;
  --d-border: #243350;
  --d-fg: #e8edf5;
  --d-muted-fg: #94a3b8;
  --bg: var(--n-50);
  --card: var(--n-0);
  --fg: var(--n-900);
  --muted: var(--n-100);
  --muted-fg: var(--n-500);
  --border: var(--n-200);

  /* Layer 2: Theme B, Graphite + Teal. */
  --brand: #0f766e;
  --brand-hi: #0d6660;
  --on-brand: #ffffff;
  --brand-soft: #ecfaf7;
  --accent: #d97706;
  --ring: #0f766e;
  --panel: #0c2a2a;
  --status-ok-mark: #22c55e;
  --status-ok-text: #15803d;
  --status-warn-mark: #f59e0b;
  --status-warn-text: #b45309;
  --status-risk-mark: #ef4444;
  --status-risk-text: #b91c1c;

  /* Layer 3: fixed data-series identity, independent of brand. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --font-sans: "Fira Sans", system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius: 6px;
  --table-row-h: 38px;
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.06);

  /* shadcn semantic bridge. */
  --background: var(--bg);
  --foreground: var(--fg);
  --popover: var(--card);
  --popover-foreground: var(--fg);
  --primary: var(--brand);
  --primary-foreground: var(--on-brand);
  --secondary: var(--muted);
  --secondary-foreground: var(--fg);
  --muted-foreground: var(--muted-fg);
  --accent-foreground: var(--fg);
  --destructive: var(--status-risk-text);
  --input: var(--border);
  --sidebar: var(--card);
  --sidebar-foreground: var(--fg);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--on-brand);
  --sidebar-accent: var(--brand-soft);
  --sidebar-accent-foreground: var(--fg);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --card: var(--d-card);
  --fg: var(--d-fg);
  --muted: var(--d-elev);
  --muted-fg: var(--d-muted-fg);
  --border: var(--d-border);
  --brand: #2dd4bf;
  --brand-hi: #5ee0d0;
  --on-brand: #06201c;
  --brand-soft: #0f2a2a;
  --accent: #fbbf24;
  --ring: #2dd4bf;
  --panel: #08201f;
  /* Status *text* has to be re-picked for dark, not inherited: the light values
     are dark inks. #b91c1c on --d-card #131c2e is 2.6:1, under the 4.5:1 this
     design system requires, and --destructive is built from it — so every
     destructive control and error string in the app was failing in dark mode.
     Marks (chart fills, dots) keep their light values; they only need 3:1. */
  --status-ok-text: #4ade80;
  --status-warn-text: #fbbf24;
  --status-risk-text: #f87171;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}

/* Follow the operating system when the viewer has expressed no preference.
   The :where(:not(...)) guard keeps this rule at low specificity and lets an
   explicit light choice beat OS-dark — so the toggle wins in both directions,
   not just one. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
  color-scheme: dark;
  --bg: var(--d-bg);
  --card: var(--d-card);
  --fg: var(--d-fg);
  --muted: var(--d-elev);
  --muted-fg: var(--d-muted-fg);
  --border: var(--d-border);
  --brand: #2dd4bf;
  --brand-hi: #5ee0d0;
  --on-brand: #06201c;
  --brand-soft: #0f2a2a;
  --accent: #fbbf24;
  --ring: #2dd4bf;
  --panel: #08201f;
  /* Status *text* has to be re-picked for dark, not inherited: the light values
     are dark inks. #b91c1c on --d-card #131c2e is 2.6:1, under the 4.5:1 this
     design system requires, and --destructive is built from it — so every
     destructive control and error string in the app was failing in dark mode.
     Marks (chart fills, dots) keep their light values; they only need 3:1. */
  --status-ok-text: #4ade80;
  --status-warn-text: #fbbf24;
  --status-risk-text: #f87171;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}
}