/* Light mode (default). Values mirror the hex fallbacks in lib/theme.ts. */
:root {
  --c-bg: #f6f7f9;
  --c-surface: #ffffff;
  --c-surface-alt: #f0f2f5;
  --c-border: #e4e7ec;
  --c-text: #0b1020;
  --c-text-muted: #5b6472;
  --c-accent: #1f6feb;
  --c-accent-dark: #1a5fd0;
  --c-accent-text: #ffffff;
  --c-success: #1a7f37;
  --c-success-bg: #e7f4ec;
  --c-danger: #cf222e;
  --c-danger-bg: #fdeaec;
  --c-warn: #9a6700;
  --c-warn-bg: #fff6e6;
  --c-hero: #0b1020;
  --c-hero-text: #ffffff;
  --c-hero-muted: #9aa4b2;
}

:root[data-theme="dark"] {
  --c-bg: #0b1020;
  --c-surface: #141a2e;
  --c-surface-alt: #1c2440;
  --c-border: #2a3354;
  --c-text: #e6e9f2;
  --c-text-muted: #98a1b7;
  --c-accent: #5b9bff;
  --c-accent-dark: #3f7ee0;
  --c-accent-text: #0b1020;
  --c-success: #4ade80;
  --c-success-bg: #14321f;
  --c-danger: #ff6b75;
  --c-danger-bg: #3a1418;
  --c-warn: #fbbf24;
  --c-warn-bg: #3a2d11;
  --c-hero: #050816;
  --c-hero-text: #f0f3fa;
  --c-hero-muted: #7a8499;
}

/* RNW renders the outer container with default white before the SPA boots —
 * paint the page surface from CSS so the dark-mode FOUC is shorter. Also
 * acts as a guaranteed-visible fallback signal: even if a particular
 * component's inline styles don't pick up the new vars (or the page hasn't
 * repainted yet), the body bg flips when the toggle is clicked. */
html, body, #root {
  background-color: var(--c-bg);
  color: var(--c-text);
}
html[data-theme="dark"] body {
  background-color: #0b1020 !important;
}