/* ============ Design tokens — shared by every admin-portal page ============
   Load first; page stylesheets (dashboard.css, report.css) only use these names.

   Direction: a calm, precise security console. Neutral ink-and-slate surfaces; Hitachi red is
   reserved for risk (blocked, threats, failures) and is never the colour of an action, so a red
   number always means "look here". Text colours meet WCAG AA (4.5:1) on every surface they sit on;
   chart colours were validated for colour-blind separation (dataviz validate_palette.js). */
:root {
  /* Surfaces & text */
  --bg: #F4F6F9;          /* canvas */
  --card: #FFFFFF;        /* paper */
  --card-2: #F7F8FA;      /* recessed rows, headers */
  --border: #DCE1E8;      /* rules */
  --text: #1B2533;        /* ink — 14.3:1 on canvas */
  --muted: #5B6878;       /* secondary text — 5.3:1 on canvas */
  --muted-2: #616C7B;     /* tertiary text — 4.9:1 on canvas */

  /* Actions are ink, not red */
  --primary-bg: #1B2533;
  --primary-fg: #FFFFFF;
  --primary-hover: #2C3A4E;
  --focus: #2F5DA8;
  --ring: rgba(47, 93, 168, .22);

  /* Risk (Hitachi red) and status — meaning only, never decoration */
  --brand: #CC0000;       /* risk text & marks — 5.4:1 on canvas */
  --brand-press: #A30000;
  --green: #047857;       /* safe / success text */
  --amber: #B45309;       /* pending / warning text */
  --blue: #2F5DA8;        /* neutral info */
  --purple: #6D4AB8;
  --cyan: #0E7490;
  --orange: #C2410C;
  --chart-safe: #059669;  --chart-blocked: #E60012;  /* validated chart pair, light */

  /* Sidebar (dark in both themes) */
  --sidebar: #121A26;
  --sidebar-2: #0E1520;
  --sidebar-line: #223047;
  --sidebar-text: #B3C0D3;
  --sidebar-text-dim: #8392A8;
  --sidebar-active: #1C2738;

  /* Shape & depth: one quiet radius for surfaces, a tighter one for controls; shadow only for overlays */
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: none;
  --shadow-lg: 0 10px 32px rgba(16, 24, 40, .14);

  /* Type: one family, a modular scale (13 / 15 / 20 / 28 / 40) */
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 40px;
}
html[data-theme="dark"] {
  --bg: #0E1520;
  --card: #151E2B;
  --card-2: #111A26;
  --border: #263244;
  --text: #E6ECF4;
  --muted: #A3B0C2;
  --muted-2: #8C9AAE;

  --primary-bg: #E6ECF4;
  --primary-fg: #0E1520;
  --primary-hover: #FFFFFF;
  --focus: #8DB0EA;
  --ring: rgba(141, 176, 234, .25);

  --brand: #F04452;
  --brand-press: #FF6B76;
  --green: #34D399;
  --amber: #FBBF24;
  --blue: #8DB0EA;
  --purple: #B9A4F0;
  --cyan: #67E8F9;
  --orange: #FB923C;
  --chart-safe: #059669;  --chart-blocked: #F04452;  /* validated chart pair, dark */

  --sidebar: #0A1018;
  --sidebar-2: #080D14;
  --sidebar-line: #1A2536;
  --sidebar-active: #172131;
  --shadow-lg: 0 10px 36px rgba(0, 0, 0, .5);
}

body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Intent / status pills: a pale tint of the identity colour with dark text of the same hue
   (white text on bright fills failed AA — as low as 1.98:1). */
.pill { color: color-mix(in srgb, var(--pill, #64748B) 70%, var(--text)) !important;
        background: color-mix(in srgb, var(--pill, #64748B) 13%, var(--card)) !important;
        border: 1px solid color-mix(in srgb, var(--pill, #64748B) 32%, transparent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }