/* Design tokens — the only place colors are defined. See docs/DESIGN.md. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0A0A0A;
  --surface-0: #0C0C0C;
  --surface: #0E0E0E;
  --surface-sunken: #0F0F0F;
  --surface-2: #111111;
  --surface-3: #151515;
  --surface-active: #1F1F1F;
  --header-bg: rgba(10, 10, 10, .72);
  --overlay-bg: rgba(10, 10, 10, .82);

  /* Lines */
  --line: rgba(255, 255, 255, .07);
  --line-faint: rgba(255, 255, 255, .05);
  --line-2: rgba(255, 255, 255, .09);
  --line-3: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .16);
  --hover-bg: rgba(255, 255, 255, .05);
  --grid-line: rgba(255, 255, 255, .035);

  /* Text */
  --text-strong: #FFFFFF;
  --text: #EDEDED;
  --text-soft: #DADADA;
  --text-logo: #CCCCCC;
  --text-2: #C8C8C8;
  --text-3: #BDBDBD;
  --text-lede: #A8A8A8;
  --text-muted: #A0A0A0;
  --text-dim: #8A8A8A;
  /* Mockup uses #7A7A7A / #6E6E6E; raised to keep ≥ 4.5:1 on --surface-2. */
  --text-faint: #808080;
  --logo-bracket: #6E6E6E;
  --dot-idle: #333333;

  /* Brand */
  --green: #BED688;
  --green-hover: #D4E89A;
  --green-tint: rgba(190, 214, 136, .06);
  --green-wash: rgba(190, 214, 136, .03);
  --green-row: rgba(190, 214, 136, .04);
  --green-line: rgba(190, 214, 136, .2);
  --green-line-soft: rgba(190, 214, 136, .14);
  --green-border: rgba(190, 214, 136, .5);
  --on-green: #0A0A0A;
  --violet: #6A24A8;
  --violet-text: #9B6BDB;
  --violet-dot: #8B4FD1;
  --violet-line: rgba(155, 107, 219, .4);

  /* Severity (text, 12% background) */
  --sev-critical: #F2766B;
  --sev-critical-bg: rgba(242, 118, 107, .12);
  --sev-critical-line: rgba(242, 118, 107, .33);
  --sev-critical-wash: rgba(242, 118, 107, .05);
  --sev-high: #F2A65A;
  --sev-high-bg: rgba(242, 166, 90, .12);
  --sev-high-line: rgba(242, 166, 90, .33);
  --sev-medium: #E8D36B;
  --sev-medium-bg: rgba(232, 211, 107, .12);
  --sev-medium-line: rgba(232, 211, 107, .33);
  --sev-low: #8FB8E8;
  --sev-low-bg: rgba(143, 184, 232, .12);
  --sev-low-line: rgba(143, 184, 232, .33);
  --green-line-flag: rgba(190, 214, 136, .33);

  /* Glows, gradients, covers */
  --glow-green: rgba(190, 214, 136, .13);
  --glow-green-soft: rgba(190, 214, 136, .18);
  --glow-violet: rgba(106, 36, 168, .28);
  --glow-violet-strong: rgba(106, 36, 168, .35);
  --shadow-violet: rgba(106, 36, 168, .55);
  --scan: rgba(190, 214, 136, .10);
  --hatch: rgba(255, 255, 255, .035);
  --hatch-strong: rgba(255, 255, 255, .04);
  --tone-violet: #1a1026;
  --tone-violet-deep: #140b1f;
  --tone-violet-cta: #1a0f28;
  --tone-green: #0f140a;
  --tone-amber: #1f140c;
  --tone-blue: #0c1520;
  --tone-neutral: #141414;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Shape & layout */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-8: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --container: 1240px;
  --gutter: 28px;
  --header-h: 64px;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}