/* TrustedAIGov www — light/dark theme layer (Pass 2B estate theming).
 *
 * Loaded AFTER site.css on every page. Defines the role tokens standalone (so
 * pages that don't link site.css still resolve them), then remaps them for dark.
 * Explicit user choice (html[data-theme], persisted by assets/js/theme.js) wins;
 * otherwise the OS preference applies. The navy hero/footer sections are dark in
 * BOTH themes by design — dark mode simply lets the light sections join them.
 */

:root {
  --page:#F5F3EE; --surface:#ffffff; --surface-2:#faf9f5; --border:#e6e2d9;
  --ink:#101725; --text-2:#5b6676; --text-3:#7a8494; --meta:#98a2b0;
  --accent:#4338CA; --accent-deep:#322aa6; --accent-tint:#edecfb; --accent-soft:#d6d3f6;
  color-scheme: light;
}

/* ---- dark values (one definition, applied two ways) --------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0E1120; --surface:#151A2C; --surface-2:#10152A;
    --border:rgba(232,231,240,.14);
    --ink:#E8E7F0; --text-2:#9AA0B5; --text-3:#8A90A8; --meta:#6B7188;
    --accent:#9B93FF; --accent-deep:#B4ADFF;
    --accent-tint:rgba(155,147,255,.14); --accent-soft:rgba(155,147,255,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page:#0E1120; --surface:#151A2C; --surface-2:#10152A;
  --border:rgba(232,231,240,.14);
  --ink:#E8E7F0; --text-2:#9AA0B5; --text-3:#8A90A8; --meta:#6B7188;
  --accent:#9B93FF; --accent-deep:#B4ADFF;
  --accent-tint:rgba(155,147,255,.14); --accent-soft:rgba(155,147,255,.35);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --page:#F5F3EE; --surface:#ffffff; --surface-2:#faf9f5; --border:#e6e2d9;
  --ink:#101725; --text-2:#5b6676; --text-3:#7a8494; --meta:#98a2b0;
  --accent:#4338CA; --accent-deep:#322aa6; --accent-tint:#edecfb; --accent-soft:#d6d3f6;
  color-scheme: light;
}

/* ---- base plumbing that must follow the tokens -------------------------- */
body { background: var(--page); color: var(--ink); }

/* ---- the theme toggle (injected by assets/js/theme.js) ------------------ */
.taig-theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 999;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: 600 12.5px/1 'IBM Plex Sans', system-ui, sans-serif;
  box-shadow: 0 4px 18px rgba(16, 23, 37, .14);
}
.taig-theme-toggle:hover { color: var(--ink); border-color: var(--accent-soft); }
.taig-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .taig-theme-toggle { transition: color .15s, border-color .15s; }
}