/* ── Design tokens ── shared by dashboard, detail and the new-vuln editor.
   This block used to be copy-pasted into all three pages, and had already
   drifted: new.html carried --line at .08 instead of .07, --radius 12 instead
   of 14, a different light --surface-3, and --accent: #FFFF78 — the neon yellow
   from the retired cream-and-yellow theme, still painting its primary button.

   Colour budget
   -------------
   Surfaces, text and chrome are ONE neutral ramp; emphasis comes from
   lightness, not hue. Exactly two things are allowed a hue, because both have
   to be read pre-attentively across a wall of rows:

     1. severity   — --sev-* below. The whole point of the list.
     2. push state — --ok / --warn, and even those are muted and paired with a
                     shape difference, so they cannot out-shout severity.

   If you are about to add a third, it almost certainly wants to be a shape, a
   weight or a border instead. */
:root {
  --bg: #0b0b0c;          /* page */
  --surface: #141416;     /* sidebar, cards, inputs */
  --surface-2: #1b1b1e;   /* hover */
  --surface-3: #26262b;   /* pressed / selected */
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.13);

  --ink: #ededed;         /* primary text */
  --body: #b3b3b8;        /* secondary text */
  /* 4.9:1 on the card surface. The previous #77777e measured 4.14 and put 31
     labels below WCAG AA — dates, stat captions and page counters, all at
     10–12px where it matters most. */
  --muted: #83838c;       /* tertiary text, captions */

  /* Neutral emphasis steps. These are what the old --red/--orange/--violet/
     --mint aliases actually resolved to: greys, despite the names. Anyone
     writing var(--red) and expecting red got #e5e5e8. */
  --neutral-1: #e5e5e8;
  --neutral-2: #d8d8dc;
  --neutral-3: #cfcfd4;
  --neutral-4: #9a9aa2;

  /* Severity — the one hue that carries meaning. Desaturated so it reads as a
     signal, not decoration. Contrast figures are against each other's fill. */
  --sev-crit-bg: #b3261e; --sev-crit-fg: #fff;    --sev-crit-line: #d0392f;
  --sev-high-bg: #a8551a; --sev-high-fg: #fff;    --sev-high-line: #c76a26;
  --sev-med-bg:  #6e5a12; --sev-med-fg:  #f2e4b6; --sev-med-line:  #8a721b;
  --sev-low-bg:  #2f4f43; --sev-low-fg:  #cfe6db; --sev-low-line:  #3e6455;

  /* Push state. Deliberately dimmer than severity. */
  --ok: #3f9c6d;
  --warn: #9a7b2e;
  /* 4.98:1 against --surface-2, the tightest surface it lands on. #c0392b
     measured 3.16 there and failed AA on the EPSS column. */
  --danger: #ea5a55;      /* EPSS high tier, offline source, destructive verbs */

  --focus: #7aa2ff;       /* focus ring — never used as a fill */

  --radius: 14px; --pill: 999px;
  --spring: cubic-bezier(.2, .8, .3, 1);
  --shadow-hard: none;
  --shadow-soft: none;
}

/* Light variant of the same ramp, so the theme toggle keeps working.
   Only what actually differs is redeclared. */
body.light {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f0f0f2;
  --surface-3: #e4e4e7;
  --line: rgba(0,0,0,.09);
  --line-strong: rgba(0,0,0,.16);
  --ink: #16161a;
  --body: #45454c;
  /* 4.9:1 on the page background; #83838c measured 3.51 here. */
  --muted: #6b6b73;

  --neutral-1: #2a2a2e;
  --neutral-2: #3a3a40;
  --neutral-3: #3a3a40;
  --neutral-4: #6b6b73;

  --sev-crit-bg: #d93025; --sev-crit-line: #b3261e;
  /* #c9701f gave white text only 3.61:1; this is 4.63. Still reads as the
     same orange next to critical's red. */
  --sev-high-bg: #b0601a; --sev-high-line: #935015;
  --sev-med-bg:  #f2d574; --sev-med-fg: #4a3c07; --sev-med-line: #d9b93f;
  --sev-low-bg:  #cfe6db; --sev-low-fg: #244136; --sev-low-line: #a7ccbc;

  --ok: #2e7d52;
  --warn: #7a6024;
  --danger: #b3261e;
  --focus: #2563eb;
}

/* Tell the browser which scheme is live so native scrollbars, form controls and
   the caret follow the theme instead of staying light-on-dark. */
:root { color-scheme: dark; }
body.light { color-scheme: light; }

/* Motion is decoration here — every animation in this UI is a fade or a small
   translate, none of it carries information. Honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}