/* ══════════════════════════════════════════════════════════════════════════════
   PULSE THEMES — pulse-themes.css
   The canonical 10-palette theme system, ported from the Appearance design kit
   (pulse-themes.css / APPEARANCE-SPEC.md). Loaded right after ember.css.

   Two layers:
     1. RAW TOKENS — 21 per theme ([data-theme="…"] blocks below). Never add a
        22nd without updating all ten palettes.
     2. ALIASES — the legacy Ember token contract (--bg/--panel2/--text/--info/…)
        plus the kit's derived tokens, declared ONCE on `:root, [data-theme]` in
        terms of var()/color-mix so they re-derive wherever a data-theme
        attribute is set. That is what lets the Settings theme cards and the
        live preview render in their own palettes: put data-theme on any
        element and the entire contract follows.

   Amber discipline (do not reintroduce the bug):
     --amb     → text and strokes ONLY
     --ambFill → filled backgrounds ONLY, always paired with --ambFg text
   ══════════════════════════════════════════════════════════════════════════════ */

/* Default (no/unknown data-theme) = Pulse, so a stale stored id degrades safely */
:root {
  color-scheme: dark;
  --page: #0c0f14; --panel: #151a22; --sunk: #0c0f14; --track: #2a3340;
  --t1: #e8edf4; --t2: #c3ccd9; --t3: #8a95a5; --t4: #5a6474;
  --red: #f0554b; --amb: #e2a53c; --grn: #45c56d; --blu: #6ea8e8; --ind: #7c8cf0;
  --ambFill: #e2a53c; --ambFg: #0c0f14;
  --accent: #f0554b; --badgeFg: #0c0f14;
  --bd: rgba(255,255,255,.06); --bd2: rgba(255,255,255,.09); --bd3: rgba(255,255,255,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Pulse — DARK · Near-black · red (the old "Network" palette, now the default) */
[data-theme="pulse"] {
  color-scheme: dark;
  --page: #0c0f14; --panel: #151a22; --sunk: #0c0f14; --track: #2a3340;
  --t1: #e8edf4; --t2: #c3ccd9; --t3: #8a95a5; --t4: #5a6474;
  --red: #f0554b; --amb: #e2a53c; --grn: #45c56d; --blu: #6ea8e8; --ind: #7c8cf0;
  --ambFill: #e2a53c; --ambFg: #0c0f14;
  --accent: #f0554b; --badgeFg: #0c0f14;
  --bd: rgba(255,255,255,.06); --bd2: rgba(255,255,255,.09); --bd3: rgba(255,255,255,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Paper — LIGHT · Clean white · blue */
[data-theme="paper"] {
  color-scheme: light;
  --page: #f1f4f8; --panel: #ffffff; --sunk: #eef1f5; --track: #dfe3ea;
  --t1: #10151d; --t2: #39424f; --t3: #5c6674; --t4: #6f7987;
  --red: #cf3f34; --amb: #c9a300; --grn: #17864a; --blu: #2565b8; --ind: #4a52c9;
  --ambFill: #f4cf35; --ambFg: #10151d;
  --accent: #cf3f34; --badgeFg: #ffffff;
  --bd: rgba(15,23,42,.07); --bd2: rgba(15,23,42,.10); --bd3: rgba(15,23,42,.15);
  --shadow: 0 1px 2px rgba(15,23,42,.05);
}

/* Graphite — DARK · Warm grey · amber */
[data-theme="graphite"] {
  color-scheme: dark;
  --page: #17181a; --panel: #1f2124; --sunk: #131415; --track: #34363a;
  --t1: #eceae6; --t2: #c6c3bd; --t3: #9d9992; --t4: #8b867e;
  --red: #e8604a; --amb: #e0a33a; --grn: #93b83f; --blu: #8aa8c4; --ind: #a58fd0;
  --ambFill: #e0a33a; --ambFg: #17181a;
  --accent: #e0a33a; --badgeFg: #17181a;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.10); --bd3: rgba(255,255,255,.15);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Midnight — DARK · Deep indigo · violet */
[data-theme="midnight"] {
  color-scheme: dark;
  --page: #0d0f1f; --panel: #161a30; --sunk: #0a0c19; --track: #2a2f4a;
  --t1: #e6e8f7; --t2: #b9bedd; --t3: #9297bd; --t4: #7c82ad;
  --red: #ff5c7a; --amb: #f0b429; --grn: #3ddc97; --blu: #6c8cff; --ind: #a78bfa;
  --ambFill: #f0b429; --ambFg: #0d0f1f;
  --accent: #a78bfa; --badgeFg: #0d0f1f;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.11); --bd3: rgba(255,255,255,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Nordic — DARK · Slate blue · cyan */
[data-theme="nordic"] {
  color-scheme: dark;
  --page: #1b2430; --panel: #22303f; --sunk: #16202b; --track: #35485a;
  --t1: #e4ecf2; --t2: #b9c8d6; --t3: #9aabb9; --t4: #869aaa;
  --red: #ef6b62; --amb: #e3ad4e; --grn: #4cc9a0; --blu: #56b6d9; --ind: #8a9ff0;
  --ambFill: #e3ad4e; --ambFg: #16202b;
  --accent: #56b6d9; --badgeFg: #16202b;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.11); --bd3: rgba(255,255,255,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Parchment — LIGHT · Warm cream · oxblood */
[data-theme="parchment"] {
  color-scheme: light;
  --page: #f4efe2; --panel: #fdfaf2; --sunk: #ebe4d3; --track: #ddd4c0;
  --t1: #241d14; --t2: #4a3f31; --t3: #6d604e; --t4: #7d6f5c;
  --red: #a3302a; --amb: #bf9600; --grn: #4a6b2a; --blu: #2c5578; --ind: #5b4a8f;
  --ambFill: #efc73f; --ambFg: #241d14;
  --accent: #a3302a; --badgeFg: #fdfaf2;
  --bd: rgba(36,29,20,.10); --bd2: rgba(36,29,20,.14); --bd3: rgba(36,29,20,.18);
  --shadow: 0 1px 2px rgba(36,29,20,.07);
}

/* Terminal — DARK · True black · phosphor (shadow: none by design) */
[data-theme="terminal"] {
  color-scheme: dark;
  --page: #000000; --panel: #0a0d0a; --sunk: #000000; --track: #1a1f1a;
  --t1: #e6f0e6; --t2: #b8c9b8; --t3: #8a9c8a; --t4: #6e7f6e;
  --red: #ff5f56; --amb: #ffbd2e; --grn: #27c93f; --blu: #58a6ff; --ind: #bc8cff;
  --ambFill: #ffbd2e; --ambFg: #000000;
  --accent: #27c93f; --badgeFg: #000000;
  --bd: rgba(39,201,63,.14); --bd2: rgba(39,201,63,.22); --bd3: rgba(39,201,63,.3);
  --shadow: none;
}

/* Ash — LIGHT · Mid grey · navy */
[data-theme="ash"] {
  color-scheme: light;
  --page: #d9dde3; --panel: #f0f2f5; --sunk: #cbd1d9; --track: #b8bfc8;
  --t1: #14181d; --t2: #363d47; --t3: #575f6b; --t4: #68707c;
  --red: #c2352b; --amb: #c39e00; --grn: #146b3e; --blu: #1d4e8f; --ind: #3f47b5;
  --ambFill: #f0cb32; --ambFg: #14181d;
  --accent: #1d4e8f; --badgeFg: #f0f2f5;
  --bd: rgba(20,24,29,.09); --bd2: rgba(20,24,29,.13); --bd3: rgba(20,24,29,.17);
  --shadow: 0 1px 2px rgba(20,24,29,.06);
}

/* Copper — DARK · Espresso · copper */
[data-theme="copper"] {
  color-scheme: dark;
  --page: #17110d; --panel: #211913; --sunk: #120d09; --track: #3a2e24;
  --t1: #f2e7dc; --t2: #cdbcab; --t3: #ab9a89; --t4: #968473;
  --red: #e2614a; --amb: #d98c3f; --grn: #8aab5e; --blu: #7fa3b8; --ind: #b995d8;
  --ambFill: #d98c3f; --ambFg: #17110d;
  --accent: #c87137; --badgeFg: #17110d;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.11); --bd3: rgba(255,255,255,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Clinical — LIGHT · Swiss white · black rules (shadow: none by design) */
[data-theme="clinical"] {
  color-scheme: light;
  --page: #ffffff; --panel: #ffffff; --sunk: #f2f2f2; --track: #d9d9d9;
  --t1: #000000; --t2: #2b2b2b; --t3: #555555; --t4: #6b6b6b;
  --red: #d81b1b; --amb: #bd9a00; --grn: #106b34; --blu: #0b4fd8; --ind: #4b2ed8;
  --ambFill: #f5cf1a; --ambFg: #000000;
  --accent: #000000; --badgeFg: #ffffff;
  --bd: rgba(0,0,0,.13); --bd2: rgba(0,0,0,.2); --bd3: rgba(0,0,0,.28);
  --shadow: none;
}

/* ── DERIVED + LEGACY ALIASES ─────────────────────────────────────────────────
   Declared on every theme scope (not just :root) so custom-property inheritance
   re-resolves them against the scope's raw tokens — a data-theme attribute on a
   card or preview wrapper gets the full contract, not the page theme's values.
   Module stylesheets load after this file, so their own :root overrides
   (e.g. reporting's --tab-act-bg shims) still win where they exist. */
:root, [data-theme] {
  /* fonts are part of the system and do not vary by theme (vendored in fonts.css) */
  --sans: 'Barlow', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --radius2: 10px;

  /* kit-contract derived tokens */
  --redGlow:    color-mix(in srgb, var(--red)    55%, transparent);
  --redEdge:    color-mix(in srgb, var(--red)    45%, var(--panel));
  --accentEdge: color-mix(in srgb, var(--accent) 45%, var(--panel));
  --bluEdge:    color-mix(in srgb, var(--blu)    45%, var(--panel));
  --gridline:   var(--bd);
  --slaAfter:   var(--t4);

  /* legacy Ember token contract — every pre-existing page reads these */
  --bg:      var(--page);
  --panel2:  color-mix(in srgb, var(--t1) 6%, var(--panel));
  --text:    var(--t1);
  --muted:   var(--t3);
  --faint:   var(--t4);
  --border:  var(--bd2);

  --good: var(--grn);
  --warn: var(--amb);
  --bad:  var(--red);
  --info: var(--blu);
  --crit: var(--red);

  --good-bg: color-mix(in srgb, var(--grn) 14%, transparent);
  --warn-bg: color-mix(in srgb, var(--amb) 14%, transparent);
  --info-bg: color-mix(in srgb, var(--blu) 14%, transparent);
  --crit-bg: color-mix(in srgb, var(--red) 14%, transparent);

  /* network module's fifth severity rung (yellow) — derived, not hand-picked */
  --caution:    color-mix(in srgb, var(--ambFill) 78%, var(--grn));
  --caution-bg: color-mix(in srgb, var(--caution) 10%, transparent);

  --btn:          var(--panel2);
  --btn-bd:       var(--bd3);
  --btn-hover-bd: color-mix(in srgb, var(--blu) 45%, transparent);
  --focus:        color-mix(in srgb, var(--blu) 32%, transparent);

  --input-bg: var(--sunk);
  --input-bd: var(--bd3);
  --card-bg:  var(--panel);
  --card-bd:  var(--bd2);
  --row-hover: color-mix(in srgb, var(--t1) 4%, transparent);

  --tab-act-bg: color-mix(in srgb, var(--blu) 16%, var(--panel));
  --tab-act-bd: color-mix(in srgb, var(--blu) 45%, transparent);

  /* sidebar follows the palette (light themes get a light sidebar) */
  --sidebar-bg:        var(--sunk);
  --sidebar-border:    var(--bd2);
  --sidebar-hover:     color-mix(in srgb, var(--blu) 8%, transparent);
  --sidebar-active-bg: color-mix(in srgb, var(--blu) 14%, transparent);
  --sidebar-text:      color-mix(in srgb, var(--t1) 62%, transparent);
  --sidebar-text-act:  var(--t1);
  --sidebar-accent:    var(--accent);
}