/* QSE command-center design tokens — kept in sync with qpa/web/theme.css (the source of truth).
 *
 * The console is a separate origin from QPA, so it carries its own copy of the shared two-tier
 * token system rather than cross-origin linking QPA's. Keep this 1:1 with qpa/web/theme.css so the
 * command center and QPA read identically in both light and dark.
 *
 * Two tiers:
 *   TIER 1  primitives   raw values; the ONLY place hex literals should live.
 *   TIER 2  aliases      semantic names the UI consumes (var(--bg) etc.); mapped per theme.
 *
 * LIGHT is the default (bare :root). DARK overrides only the chrome aliases — the semantic
 * risk hues are theme-invariant (mid-tones that read on either background).
 */

/* ---- TIER 1 — primitive tokens ------------------------------------------- */
:root {
  /* neutral ramp (light -> dark) */
  --n-0:#ffffff;  --n-50:#f6f8fb;  --n-100:#eef3f9; --n-200:#d9e1ec;
  --n-700:#1f2a3a; --n-750:#13203a; --n-800:#0f1a2e; --n-850:#101a2e; --n-900:#0b1220;
  /* light-chrome ink */
  --ink-700:#1f2a3a; --ink-500:#5b6b82;
  /* dark-chrome ink */
  --ink-100:#cbd5e1; --ink-300:#7e8aa0;
  /* accent ramp */
  --sky-400:#38bdf8; --sky-600:#0b7fc7;
  /* semantic hues (theme-invariant) */
  --hue-red:#E74C3C; --hue-orange:#E67E22; --hue-green:#2ECC71;
  --hue-purple:#8E44AD; --hue-grey:#95A5A6;
  /* non-color tokens (seeded; adopt incrementally across pages) */
  --radius:8px; --radius-lg:12px;
  --font-sans:-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---- TIER 2 — semantic aliases. LIGHT = default -------------------------- */
:root {
  --bg:var(--n-50);  --bg2:var(--n-0);  --line:var(--n-200);
  --text:var(--ink-700); --muted:var(--ink-500); --accent:var(--sky-600);
  --chip:var(--n-100); --scrim:#0006;
  /* semantic risk aliases (constant in both themes) */
  --red:var(--hue-red); --orange:var(--hue-orange); --green:var(--hue-green);
  --purple:var(--hue-purple); --grey:var(--hue-grey);
  /* status-badge tints (bg + on-tint fg) — LIGHT: pale tint + darkened hue for contrast */
  --ok-bg:#e3f6ea;     --ok-fg:#1a7a43;
  --warn-bg:#fbeed8;   --warn-fg:#955800;
  --bad-bg:#fbe1dd;    --bad-fg:#b3261e;
  --info-bg:#dceffb;   --info-fg:#0b6aa6;
  --violet-bg:#efe3f8; --violet-fg:#6b2f9c;
}

/* ---- DARK — override chrome aliases + badge tints ------------------------ */
:root[data-theme="dark"] {
  --bg:var(--n-900); --bg2:var(--n-800); --line:#1f2d45;
  --text:var(--ink-100); --muted:var(--ink-300); --accent:var(--sky-400);
  --chip:var(--n-750); --scrim:#0008;
  /* DARK badges: deep tint + bright hue (the original look) */
  --ok-bg:#10331f;     --ok-fg:var(--hue-green);
  --warn-bg:#3a2a10;   --warn-fg:var(--hue-orange);
  --bad-bg:#3a1414;    --bad-fg:var(--hue-red);
  --info-bg:#10293a;   --info-fg:var(--sky-400);
  --violet-bg:#2a1f3a; --violet-fg:#b794f4;
}