/* ==========================================================================
   Design tokens
   Skeleton and scale borrowed from the Osmedeus dashboard (compact type scale,
   mono for technical values, uppercase tracked labels, thin borders, light +
   dark themes). Palette retuned from Osmedeus' warm paper tone to a cooler
   enterprise slate/cobalt.
   Every colour used by components must come from here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Type */
  --font-sans: "Inter var", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 21px;
  --text-3xl: 28px;
  --tracking-label: .07em;

  /* Shape */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-frame: 10px;
  --radius-pill: 999px;

  /* Layout */
  --gutter: 20px;
  --sidebar-w: 188px;
  --sidebar-w-collapsed: 56px;
  --header-h: 48px;

  /* Motion */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: .16s;

  /* Surfaces */
  --page: #e4e8ee;
  --surface: #f4f6f9;
  --raised: #ffffff;
  --sunken: #edf0f4;
  --hover: #f0f4f9;
  --selected: #e8effc;

  /* Lines */
  --border: #cfd6e0;
  --border-subtle: #e3e7ee;
  --border-strong: #1a2233;

  /* Text */
  --text: #101726;
  --text-body: #27303f;
  --text-muted: #586377;
  --text-faint: #8791a3;

  /* Accent (cobalt) */
  --accent: #2355c7;
  --accent-hover: #1b46a9;
  --accent-contrast: #ffffff;
  --accent-soft: #e1e9fb;
  --accent-soft-fg: #1b449f;
  --link: #2a5bd0;
  --ring: rgba(35, 85, 199, .32);

  /* Chrome (sidebar) */
  --chrome: #fbf8ee;
  --chrome-raised: #f5efdc;
  --chrome-border: #e8dfc2;
  --chrome-text: #4a4330;
  --chrome-muted: #8c8260;
  --chrome-hover: #f4ecd2;
  --chrome-active-bg: #f0e0a6;
  --chrome-active-fg: #3b3010;
  --chrome-title: #2a2412;
  --chrome-accent: #b78a10;

  /* Status */
  --positive: #0b7a57;
  --positive-soft: #d8f0e6;
  --positive-solid: #109068;
  --negative: #b3212e;
  --negative-soft: #fbe0e2;
  --negative-solid: #c62f3b;
  --warning: #8a5a00;
  --warning-soft: #f9ebcf;
  --warning-solid: #dc9a00;
  --info: #1c5ea8;
  --info-soft: #dae8f8;
  --info-solid: #2f7dce;
  --purple: #6843b3;
  --purple-soft: #ebe4f8;
  --neutral-soft: #e5e9ef;
  --neutral-fg: #4a5567;

  /* Severity */
  --sev-critical: #c4203a;
  --sev-critical-fg: #ffffff;
  --sev-critical-soft: #fbdfe4;
  --sev-high: #e15f0d;
  --sev-high-fg: #ffffff;
  --sev-high-soft: #fde6d6;
  --sev-medium: #e7a60c;
  --sev-medium-fg: #2a1c00;
  --sev-medium-soft: #fbedc8;
  --sev-low: #3f9a4c;
  --sev-low-fg: #ffffff;
  --sev-low-soft: #dcf0df;
  --sev-info: #3b82c4;
  --sev-info-fg: #ffffff;
  --sev-info-soft: #dbe9f6;
  --sev-none: #dfe4eb;
  --sev-none-fg: #98a2b3;

  /* Graph */
  --node-vuln: #d23a4b;
  --node-ok: #3c9a55;
  --node-current: #6c63f5;
  --node-neutral: #7c8799;
  --edge: #9aa5b6;

  /* Map */
  --map-sea: #dfe9f3;
  --map-land: #f7f9fb;
  --map-line: #b9c6d6;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 23, 38, .05);
  --shadow-sm: 0 1px 3px rgba(16, 23, 38, .08);
  --shadow-md: 0 4px 14px -4px rgba(16, 23, 38, .16);
  --shadow-lg: 0 12px 32px -10px rgba(16, 23, 38, .24);
  --shadow-xl: 0 24px 56px -16px rgba(16, 23, 38, .36);
  --overlay: rgba(9, 14, 24, .48);

  /* v2 — shadow-mode banner (DS-B): its own hue so it never reads as an error or a role notice */
  --shadow-mode-bg: #efe7fb;
  --shadow-mode-fg: #4b2a8f;
  --shadow-mode-line: #cdb8f1;

  /* v2 — issue age emphasis (DS-E) */
  --age-30: var(--warning);
  --age-90: var(--negative);

  /* v2 — loading skeleton (DS-C) */
  --skeleton: #e3e8ef;
  --skeleton-hi: #f3f5f8;

  /* v2 — focus ring (DS-G): one token, used by every focusable element */
  --focus: var(--accent);
  --focus-width: 2px;

  /* v2 — Prototype controls panel. Fixed colours on purpose, identical in every theme, so the panel can never be
     mistaken for product UI. */
  --proto-bg: #17110a;
  --proto-raised: #241a0c;
  --proto-line: #4b3b14;
  --proto-fg: #fff6dc;
  --proto-muted: #cdb98a;
  --proto-accent: #ffc21a;
  --proto-accent-fg: #1b1300;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --shadow-mode-bg: #241b3b;
  --shadow-mode-fg: #cbb7ff;
  --shadow-mode-line: #3d2e63;
  --skeleton: #1a2130;
  --skeleton-hi: #252e40;

  --page: #070a10;
  --surface: #0e131c;
  --raised: #141a26;
  --sunken: #111722;
  --hover: #19212f;
  --selected: #182645;

  --border: #263042;
  --border-subtle: #1c2432;
  --border-strong: #4c586e;

  --text: #e9edf4;
  --text-body: #cfd6e2;
  --text-muted: #97a2b5;
  --text-faint: #6a768b;

  --accent: #5c8df0;
  --accent-hover: #7ba3f4;
  --accent-contrast: #08101f;
  --accent-soft: #1a2a4b;
  --accent-soft-fg: #a3bff8;
  --link: #86aaf5;
  --ring: rgba(92, 141, 240, .4);

  --chrome: #0b121c;
  --chrome-raised: #121b29;
  --chrome-border: #1c2738;
  --chrome-text: #bcc8da;
  --chrome-muted: #6f7f98;
  --chrome-hover: #152031;
  --chrome-active-bg: #1b2d4d;
  --chrome-active-fg: #ffffff;
  --chrome-title: #ffffff;
  --chrome-accent: #7ba3f4;

  --positive: #56c99d;
  --positive-soft: #12301f;
  --positive-solid: #2aa67c;
  --negative: #f07a84;
  --negative-soft: #3a1a1e;
  --negative-solid: #d9434f;
  --warning: #e6b450;
  --warning-soft: #3a2c10;
  --warning-solid: #d99b18;
  --info: #7db5ea;
  --info-soft: #14283d;
  --info-solid: #3b8ad8;
  --purple: #b39cf0;
  --purple-soft: #2a2145;
  --neutral-soft: #212a39;
  --neutral-fg: #aab4c5;

  --sev-critical: #e5445a;
  --sev-critical-soft: #3b171d;
  --sev-high: #f07a2b;
  --sev-high-soft: #3b2212;
  --sev-medium: #eab530;
  --sev-medium-soft: #382c0f;
  --sev-low: #51ad5f;
  --sev-low-soft: #16301b;
  --sev-info: #4f97dc;
  --sev-info-soft: #14283d;
  --sev-none: #222b3a;
  --sev-none-fg: #5f6b80;

  --node-vuln: #e0485a;
  --node-ok: #46a862;
  --node-current: #8c84ff;
  --node-neutral: #6b778d;
  --edge: #46536a;

  --map-sea: #0f1826;
  --map-land: #1b2536;
  --map-line: #2e3b52;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .36);
  --shadow-md: 0 4px 14px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 32px -10px rgba(0, 0, 0, .6);
  --shadow-xl: 0 24px 56px -16px rgba(0, 0, 0, .7);
  --overlay: rgba(2, 4, 8, .62);
}

/* ==========================================================================
   Colour profiles (data-profile on <html>): gold · dark · modern · ocean
   ========================================================================== */

/* Gold — warm cream surfaces, bronze accent, cream/gold rail */
:root[data-profile="gold"] {
  --page: #ebe5d2; --surface: #f8f4e8; --raised: #fffdf7; --sunken: #f2ecd9; --hover: #f7f0da; --selected: #f9efc8;
  --border: #ddd3b6; --border-subtle: #ebe4cb; --border-strong: #2a2412;
  --text: #251f10; --text-body: #3b3421; --text-muted: #6f6546; --text-faint: #9b906c;
  --accent: #8f6209; --accent-hover: #765004; --accent-contrast: #fffdf5; --accent-soft: #f6e8b6; --accent-soft-fg: #6a4805;
  --link: #805800; --ring: rgba(183, 138, 16, .32);
  --neutral-soft: #ece5cf; --neutral-fg: #5b5238;
  --chrome: #fbf8ee; --chrome-raised: #f5efdc; --chrome-border: #e8dfc2; --chrome-text: #4a4330; --chrome-muted: #8c8260;
  --chrome-hover: #f4ecd2; --chrome-active-bg: #f0e0a6; --chrome-active-fg: #3b3010; --chrome-title: #2a2412; --chrome-accent: #b78a10;
  --map-sea: #e6e9de; --map-land: #fbf8ee; --map-line: #cfc6a5;
}

/* Modern — indigo header, white rail, gradient accent (after the original design) */
:root[data-profile="modern"] {
  --page: #e9ecf4; --surface: #f5f6fb; --raised: #ffffff; --sunken: #eef0f7; --hover: #f1f2fb; --selected: #ebeefc;
  --border: #d9deea; --border-subtle: #e8ebf3; --border-strong: #17104a;
  --text: #12112e; --text-body: #2b2d45; --text-muted: #5e6382; --text-faint: #8d92ad;
  --accent: #2c4ea8; --accent-hover: #233f8c; --accent-contrast: #ffffff; --accent-soft: #e4e9fb; --accent-soft-fg: #263f94;
  --link: #5b52d6; --ring: rgba(91, 82, 214, .3);
  --chrome: #ffffff; --chrome-raised: #f6f7fc; --chrome-border: #e6e9f2; --chrome-text: #2b2d45; --chrome-muted: #7b80a0;
  --chrome-hover: #f1f2fb; --chrome-active-bg: linear-gradient(135deg, #7d6cf2 0%, #ff7a45 62%, #ff3d86 100%); --chrome-active-fg: #ffffff;
  --chrome-title: #17104a; --chrome-accent: #ffffff;
}
:root[data-profile="modern"] .header {
  background: #17104a; border-bottom-color: #17104a;
  --text: #ffffff; --text-body: #e6e4ff; --text-muted: #bcb8e6; --text-faint: #948fc9;
  --raised: #251b66; --sunken: #251b66; --border: #3b2f87; --hover: #30257c; --accent-soft: #36298f; --accent-soft-fg: #dcd8ff; --neutral-fg: #dcd8ff;
}
:root[data-profile="modern"] .nav__item[aria-current="page"] { box-shadow: 0 4px 12px -4px rgba(255, 90, 90, .55); }
:root[data-profile="modern"] .nav__item[aria-current="page"]::before { display: none; }

/* Ocean — deep teal rail, mint-tinted surfaces */
:root[data-profile="ocean"] {
  --page: #dfeaea; --surface: #f1f7f7; --raised: #ffffff; --sunken: #e7f0f0; --hover: #eaf4f3; --selected: #daf0ee;
  --border: #c3d5d5; --border-subtle: #dce9e9; --border-strong: #0e2326;
  --text: #0e2326; --text-body: #243b3e; --text-muted: #55706f; --text-faint: #85999a;
  --accent: #0b7a75; --accent-hover: #086661; --accent-contrast: #ffffff; --accent-soft: #d3eeeb; --accent-soft-fg: #0a5753;
  --link: #0a7a74; --ring: rgba(11, 122, 117, .3);
  --chrome: #12474a; --chrome-raised: #185558; --chrome-border: #226366; --chrome-text: #d2ebe9; --chrome-muted: #8dbdb9;
  --chrome-hover: #1b5b5e; --chrome-active-bg: #23807b; --chrome-active-fg: #ffffff; --chrome-title: #ffffff; --chrome-accent: #8ff0e4;
  --map-sea: #d5e7e8; --map-land: #f5fafa; --map-line: #b3cdcd;
}
.swatches { display: inline-flex; flex: none; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.swatches i { width: 16px; height: 28px; display: block; }