/* styles/tokens.css — design tokens: colours, type, spacing, the two themes. Order in VulnerabilityCore.html is the cascade order. */

/* ============================================================ tokens */
.app {
  --font: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Brand palette: indigo accent #49299A with lighter shades for gradients. */
  --accent: #49299a;
  --accent-2: #6a4bc0;
  --accent-3: #9b85d8;
  --accent-ink: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  /* Height of the app header band. The topbar IS this tall, and the sidebar's
     wordmark block is sized from it too, so the divider under vulnerability.core
     lands exactly on the topbar's bottom edge and the two read as one level.
     They were independent numbers before and had drifted 6px apart — keep this
     the single source for both. */
  --topbar-h: 56px;
  --c-iot: #b98bff;
  --sev-critical: #ff4d63;
  --sev-high: #ff974a;
  --sev-medium: #e7c14a;
  --sev-low: #3fcf8e;
  --ok: #16a34a;
  --st-new: #5b8def;
  --st-tri: #b98bff;
  --st-prog: #e7c14a;
  --st-done: #3fcf8e;
  --st-acc: #22c55e;
  --st-auto: #7c8598;
  font-family: var(--font);
  color: var(--text);
  /* Themes every native checkbox, radio and range from the tokens already here,
     instead of leaving them in OS chrome next to indigo-focused fields. */
  accent-color: var(--accent);
  -webkit-font-smoothing: antialiased;
}
.app[data-theme="dark"] {
  /* CyMobility dark palette: a single indigo hue stepped up in lightness so each
     layer reads as elevated — canvas → sidebar → card → raised. The old palette
     put the canvas (#0A0A1F) and every surface (#00003b) at nearly the same flat
     navy with no borders, so cards never separated; this ramp fixes that. */
  --bg: #0a0a18; /* app canvas — deepest */
  --bg-panel: #11112a; /* sidebar — one step up from the canvas */
  --surface: #161631; /* cards — clearly elevated above the canvas */
  --surface-2: #20204a;
  --surface-3: #2a2a5c;
  /* Cyan is the data-viz accent for charts/graphs (bars, trend line). */
  --viz: #00cccc;
  --line: #2e2e57;
  --line-2: #3a3a6e;
  --text: #ffffff;
  --text-dim: #e8e8fc;
  --text-faint: #9ea2d4;
  /* Severity ramp: red, orange, indigo, cyan (per design sample). */
  --sev-critical: #b91c1c;
  --sev-high: #f97316;
  --sev-medium: #6a4bc0;
  --sev-low: #00cccc;
  /* Success/done/clean states stay green (separate from Low severity). */
  --ok: #16a34a;
  --st-done: #16a34a;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --accent-soft: color-mix(in oklab, var(--accent) 24%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 48%, transparent);
  /* component-specific palette */
  --sidebar-border: #2e2e57;
  --sidebar-hover: #20204a;
  --sidebar-active-text: #ffffff;
  /* Chart line/area: cyan data-viz accent, stands out on the navy card. */
  --trend-line: #00cccc;
  --btn-primary: #3a1d73;
  --btn-primary-ink: #ffffff;
  --btn-secondary: #49299a;
  --btn-secondary-ink: #ffffff;
  /* Native checkboxes, select popups, date pickers and scrollbars follow the
     app theme instead of the OS one. Replaces the per-widget patches. */
  color-scheme: dark;
}
.app[data-theme="light"] {
  --bg: #f5f5fb;
  --bg-panel: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0fa;
  --surface-3: #e8e8fc;
  --line: #e6e6f2;
  --line-2: #d8d8ec;
  --text: #00003b;
  --text-dim: #6b6b95;
  /* #8a8ab0 measured 3.3:1 on --surface and 2.9:1 on --surface-2 — below AA at
     every size this token is used at, and it is not decoration-only: it carries
     the users' e-mail sub-line, the tenant id, the table column names and the
     Jira privacy warning. Dark (#9ea2d4 on #161631 = 7.2:1) was already fine. */
  --text-faint: #6f7099;
  /* Severity ramp: red, orange, indigo, deep-teal (per design sample). */
  --sev-critical: #b91c1c;
  --sev-high: #ea580c;
  --sev-medium: #49299a;
  --sev-low: #0a8a8a;
  --ok: #16a34a;
  --st-new: #3b6fd4;
  --st-tri: #9a63f0;
  --st-prog: #b8870f;
  --st-done: #16a34a;
  --st-acc: #22c55e;
  --st-auto: #6b7280;
  --c-iot: #8a5cf0;
  --shadow: 0 6px 24px rgba(20, 32, 48, 0.1);
  --accent-soft: color-mix(in oklab, var(--accent) 13%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 36%, transparent);
  /* component-specific palette */
  --sidebar-border: #49299a;
  --sidebar-hover: #e8e8fc;
  --sidebar-active-text: #49299a;
  /* Chart line/area: deep teal/cyan data-viz accent for the white card. */
  --viz: #0a8a8a;
  --trend-line: #0a8a8a;
  --btn-primary: #3a1d73;
  --btn-primary-ink: #ffffff;
  --btn-secondary: #00003b;
  --btn-secondary-ink: #ffffff;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.ic {
  flex: none;
}
::selection {
  background: var(--accent-soft);
}