/*
 * Design tokens — DPI Console UI spec §2.
 * The ONLY file allowed to contain raw colour values (enforced by `npm run check:tokens`).
 * Themes: <html class="theme-dark"> (default) or <html class="theme-light">.
 */

:root,
.theme-dark {
  color-scheme: dark;

  /* 2.1 Neutrals & surfaces */
  --bg: #0B0E13;
  --surface: #0F1319;
  --inset: #0F1319;
  --card: #131820;
  --hover: #161C25;
  --selrow: #172033;
  --asoft: #18233A;
  --chip: #1B2230;
  --div: #1B222C;
  --track: #1E2530;
  --selbg: #1E2A40;
  --line: #222A35;
  --line2: #2A3340;
  --aline: #2B3F63;
  --selline: #35507F;
  --avatar: #253047;
  --shadow: none;

  /* 2.2 Text, accent, status */
  --text: #E6EAF0;
  --text2: #A3ADBD;
  --text3: #8893A5; /* spec #7C8799 → lifted for 4.5:1 on selected rows & chips (§6) */
  --link: #7FB6FF;
  --linkh: #A9CEFF;
  --accent: #4C9AFF;
  --onaccent: #0B0E13;
  --toggle: #3C7BD9;
  --toggleoff: #2A3340;
  --knob: #E6EAF0;
  --pos: #3CCB7F;
  --warn: #F5A524;
  --neg: #F0616D;
  --caution: #E6C229;
  --info: #7FB6FF;

  /* Soft status pairs (bg / text / line) */
  --pos-bg: #13281E;
  --pos-fg: #8FE3B5;
  --pos-line: #1F4B35;
  --neg-bg: #3A1A1F;
  --neg-fg: #FFB3BA;
  /* vulnerability severity (CVSS) — bars and badges, always shown with a text label */
  --sev-critical: #E5484D;
  --sev-high: #F76B15;
  --sev-medium: #E2B203;
  --sev-low: #4C9AFF;
  --neg-line: #5A2A31;
  --warn-bg: #3A2A10;
  --warn-fg: #FFD08A;
  --warn-line: #5A4520;
  --purple-bg: #261E3D;
  --purple-fg: #CDBBFF;
  --purple-line: #3D3163;
  --info-bg: var(--asoft);
  --info-fg: #A9CEFF;
  --info-line: var(--aline);

  /* 2.3 Data series (application categories) */
  --c1: #4C9AFF; /* Video streaming */
  --c2: #F5A524; /* Social media */
  --c3: #2EC4B6; /* Web & search */
  --c4: #A78BFA; /* Gaming */
  --c5: #F472B6; /* VoIP & messaging */
  --c6: #6B7686; /* Other / unclassified */
  --heat: 76, 154, 255;
  --ink-mix: 100%; /* category-coloured text (initials) — full strength on dark */

  /* Overlays */
  --scrim: rgba(3, 6, 10, 0.6);
  --ring: var(--accent);

  /* Terminal and raw tool output (dark in both themes, like a real terminal) */
  --term-bg: #0A0D12;
  --term-fg: #D7DEE8;
  --term-cursor: #4C9AFF;
  --term-sel: rgba(76, 154, 255, 0.35);

  /* Traceroute map */
  --map-space: #06090E;
  --map-star: rgba(230, 234, 240, 0.5);
  --map-glow: 76, 154, 255;
  --map-ocean: #10284A;
  --map-ocean-edge: #071427;
  --map-land: #1D3656;
  --map-border: #34557D;
  --map-grat: rgba(127, 182, 255, 0.08);
  --map-fast: #3CEB86;
  --map-mid: #F2D23C;
  --map-slow: #F0616D;
  --map-hop: #FFD08A;
  --map-label-bg: rgba(6, 9, 14, 0.82);
}

.theme-light {
  color-scheme: light;

  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --inset: #F7F9FB;
  --card: #FFFFFF;
  --hover: #EEF2F7;
  --selrow: #EAF2FF;
  --asoft: #E6F0FF;
  --chip: #EEF1F5;
  --div: #EDF0F4;
  --track: #E4E8EE;
  --selbg: #E1ECFF;
  --line: #DCE1E8;
  --line2: #CBD2DC;
  --aline: #B7CFF5;
  --selline: #8DB3EE;
  --avatar: #DDE5F2;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);

  --text: #141A23;
  --text2: #4A5566;
  --text3: #5B6575; /* spec #667085 → darkened for 4.5:1 (§6) */
  --link: #1A64C0; /* spec #1F6FD1 → 4.5:1 on selected rows */
  --linkh: #1757A6;
  --accent: #1F6FD1;
  --onaccent: #FFFFFF;
  --toggle: #1F6FD1;
  --toggleoff: #B8C0CC;
  --knob: #FFFFFF;
  --pos: #157A44; /* spec #1A8A4E → 4.5:1 */
  --warn: #A35600; /* spec #B25E00 → 4.5:1 */
  --neg: #CC2F3B;
  --caution: #7D6300; /* spec #8A6D00 → 4.5:1 */
  --info: #1F6FD1;

  --pos-bg: #E3F5EB;
  --pos-fg: #146B3C;
  --pos-line: #A8DDBF;
  --neg-bg: #FDE7E9;
  --neg-fg: #A8212C;
  --sev-critical: #C62A2F;
  --sev-high: #D9480F;
  --sev-medium: #B78103;
  --sev-low: #2F6FD1;
  --neg-line: #F3B9BF;
  --warn-bg: #FFF1DB;
  --warn-fg: #8A4B00;
  --warn-line: #F0CF94;
  --purple-bg: #EFE9FF;
  --purple-fg: #5B3FC4;
  --purple-line: #D2C4FA;
  --info-bg: var(--asoft);
  --info-fg: #1757A6;
  --info-line: var(--aline);

  --c1: #2F7FF0;
  --c2: #E8900C;
  --c3: #169C90;
  --c4: #7C5CE0;
  --c5: #D6458F;
  --c6: #98A2B3;
  --heat: 31, 111, 209;
  --ink-mix: 62%; /* category colours are too light for small text on white: mix towards --text */

  --scrim: rgba(16, 24, 40, 0.35);

  --term-bg: #10151D;
  --term-fg: #E3E8EF;
  --term-cursor: #4C9AFF;
  --term-sel: rgba(76, 154, 255, 0.35);

  --map-space: #E8EEF6;
  --map-star: rgba(0, 0, 0, 0);
  --map-glow: 31, 111, 209;
  --map-ocean: #D3E4F6;
  --map-ocean-edge: #AFC8E6;
  --map-land: #FAFBFC;
  --map-border: #B3C0D1;
  --map-grat: rgba(31, 111, 209, 0.08);
  --map-fast: #148A4A;
  --map-mid: #B58A00;
  --map-slow: #CC2F3B;
  --map-hop: #E8900C;
  --map-label-bg: rgba(255, 255, 255, 0.92);
}

/* 2.4 Type, spacing, shape */
:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-title: 26px;
  --fs-section: 16px;
  --fs-body: 13.5px;
  --fs-caption: 12px;
  --fs-axis: 11px;
  --fs-kpi: 26px;

  --r-card: 12px;
  --r-ctl: 8px;
  --r-tag: 6px;
  --r-pill: 999px;

  --pad-page-y: 24px;
  --pad-page-x: 28px;
  --gap: 20px;
  --gap-kpi: 14px;
  --pad-card-y: 20px;
  --pad-card-x: 22px;

  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;
  --target: 40px;
}