/* Design tokens — single source of truth for color, unchanged from the
   original inline :root block. Retune brand colors here only. */
:root {
  --color-bg: #ffffff;
  --color-text: #1b2140;
  --color-accent: #4f46e5;
  --color-accent-600: #4338ca;
  --color-accent-700: #3730a3;
  --color-accent-100: #eef2ff;
  --color-accent-800: #312e81;
  --color-accent-gradient: linear-gradient(to right, #4f46e5, #3b82f6);
  /* Text/icon color for content sitting ON a --color-accent-100 tinted
     surface (sidebar active pill, stat-card icons, admin badges, etc).
     Distinct from --color-accent-700, which is also used as a solid
     BACKGROUND (header icon-button hover, with white text) — that role
     must stay a fixed dark indigo in both themes, so it can't double as
     this one. --color-accent-100 itself goes dark in dark mode (see
     below); without a token that also flips, dark-on-dark text on a
     dark-on-dark surface was unreadable (found 2026-09-04). */
  --color-accent-ink: #3730a3;
  --color-divider: #1b214020;
  --color-surface: transparent;

  --color-teal: #17806f;
  --color-green: #1f9e6a;
  --color-red: #dd5a4d;
  --color-amber: #ffc95c;
  --color-amber-dark: #c9821a;
  --color-navy: #16204a;
  --color-navy-mid: #23306e;

  /* Card/input surface and muted text — split out from the plain #fff /
     #667 literals that used to be hardcoded all over backoffice.css /
     components.css, specifically so the backoffice dark-theme toggle
     (inc/layout.php's #boThemeToggle) has real tokens to flip. See the
     [data-theme="dark"] block below. Does NOT touch the public marketing
     pages' own look (they never set data-theme), and deliberately does
     NOT touch assets/js/report-print.js's printed/PDF output — that
     stays hardcoded to dark-on-white regardless of on-screen theme,
     since paper has no dark mode. */
  --color-card-bg: #ffffff;
  --color-muted: #5f6479;

  --page-bg: #f7f8fd;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --max-width: 1180px;
  --pad-inline: clamp(16px, 4vw, 40px);
}

/* Backoffice dark theme — explicit toggle (data-theme="dark", persisted
   in localStorage by inc/layout.php's script) takes priority in both
   directions over the OS-level preference, which is only the default
   when the visitor has never toggled anything. Scope: the shared "shell"
   (header, sidebar, cards, tables, forms, dialogs) — the many *inline*
   style="background:#fff"-type attributes on individual page templates
   are a known, separate follow-up, not covered by this pass. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #161a30;
    --color-card-bg: #1c2140;
    --page-bg: #0f1226;
    --color-text: #e7e9f7;
    --color-muted: #a8adc9;
    --color-divider: #ffffff26;
    --color-accent-100: #26305e;
    --color-accent-ink: #b4c0fa;
    --color-surface: transparent;
  }
}
:root[data-theme="dark"] {
  --color-bg: #161a30;
  --color-card-bg: #1c2140;
  --page-bg: #0f1226;
  --color-text: #e7e9f7;
  --color-muted: #a8adc9;
  --color-divider: #ffffff26;
  --color-accent-100: #26305e;
  --color-accent-ink: #b4c0fa;
  --color-surface: transparent;
}