/* GENERATED FILE — do not edit.
 * Source of truth:
 *   docs/design/artefacts/handoff-2026-04/project/shared/tokens.css
 * Regenerate with: node web/site/build.mjs
 */
/* CVE Hunter — Design Tokens
   Dark-first, evidence-focused security tooling.
   Inspirations: Linear (precision), Cloudflare (technical confidence),
   Vercel (editorial), with warm-dark rather than cold-blue.
*/

:root {
  /* ---------- Neutrals (warm dark) ---------- */
  --bg:            #0B0A09;  /* true page background */
  --bg-1:          #110F0D;  /* raised surface */
  --bg-2:          #18150F;  /* inset / code wells */
  --bg-3:          #1F1B14;  /* hover / active */
  --line:          #2A241A;  /* hairlines, dividers */
  --line-strong:   #3A3224;
  --line-soft:     #1C1912;

  --ink:           #F5F1E8;  /* primary text */
  --ink-1:         #D7D1C2;  /* body */
  --ink-2:         #A39E8E;  /* secondary */
  --ink-3:         #6E6A5E;  /* meta, muted */
  --ink-4:         #4A4740;  /* disabled, separator labels */

  /* ---------- Brand / accent ---------- */
  --signal:        #E5484D;  /* critical / danger / accent */
  --signal-2:      #F17478;  /* hover */
  --signal-soft:   #3A1618;  /* tint bg */
  --signal-ink:    #FFD6D7;  /* on-tint text */

  --rust:          #D4492E;  /* secondary warm */
  --rust-soft:     #33150B;

  /* ---------- Semantic (evidence / status) ---------- */
  --ok:            #3BD07A;  /* confirmed / reachable */
  --ok-soft:       #0E2A1B;
  --ok-ink:        #A9F0C5;

  --warn:          #F2A33B;  /* candidate / potentially reachable */
  --warn-soft:     #2E1D07;
  --warn-ink:      #FFD999;

  --info:          #6AB6F9;  /* neutral evidence, CPG */
  --info-soft:     #0D1F2E;
  --info-ink:      #BADAFF;

  --violet:        #B084F3;  /* ensemble / judge */
  --violet-soft:   #1C1230;
  --violet-ink:    #DCC6FF;

  --mute:          #6E6A5E;  /* unreachable / neutral rank */
  --mute-soft:     #18150F;

  /* ---------- Evidence rank palette (1..5) ---------- */
  --rank-1:        #3BD07A;  /* deterministic reachability  */
  --rank-2:        #6AB6F9;  /* sanitiser crash             */
  --rank-3:        #B084F3;  /* ensemble + judge            */
  --rank-4:        #F2A33B;  /* structural / invariant      */
  --rank-5:        #E5484D;  /* validator                   */

  /* ---------- Severity ---------- */
  --sev-critical:  #E5484D;
  --sev-high:      #F2A33B;
  --sev-medium:    #EED27A;
  --sev-low:       #A39E8E;

  /* ---------- Type ---------- */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif:"Instrument Serif", "EB Garamond", Georgia, serif;

  /* ---------- Radii ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-1: 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 4px 12px -2px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --sh-3: 0 24px 48px -12px rgba(0,0,0,0.7), 0 0 0 1px var(--line);
  --sh-glow-signal: 0 0 0 1px var(--signal), 0 0 24px -4px rgba(229,72,77,0.4);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01","cv11","cv06";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--signal); color: #fff; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--signal-2); }

.mono { font-family: var(--mono); font-feature-settings: "ss01","cv06"; }
.serif { font-family: var(--serif); }

/* ---------- Utility type scale ---------- */
.t-display { font-family: var(--sans); font-weight: 500; font-size: clamp(44px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.025em; }
.t-h1      { font-family: var(--sans); font-weight: 500; font-size: clamp(32px, 4vw, 48px);   line-height: 1.08; letter-spacing: -0.022em; }
.t-h2      { font-family: var(--sans); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.018em; }
.t-h3      { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.t-body    { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink-1); }
.t-small   { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.t-meta    { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.t-code    { font-family: var(--mono); font-size: 13px; color: var(--ink-1); }

.t-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.t-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--signal);
}

/* ---------- Primitives ---------- */
.hr { height: 1px; background: var(--line); border: 0; }
.hr-soft { height: 1px; background: var(--line-soft); border: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.03em;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--ink-2);
  background: var(--bg-1);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok       { color: var(--ok);     border-color: color-mix(in oklab, var(--ok) 35%, var(--line)); background: var(--ok-soft); }
.chip--warn     { color: var(--warn);   border-color: color-mix(in oklab, var(--warn) 35%, var(--line)); background: var(--warn-soft); }
.chip--signal   { color: var(--signal); border-color: color-mix(in oklab, var(--signal) 40%, var(--line)); background: var(--signal-soft); }
.chip--info     { color: var(--info);   border-color: color-mix(in oklab, var(--info) 35%, var(--line)); background: var(--info-soft); }
.chip--violet   { color: var(--violet); border-color: color-mix(in oklab, var(--violet) 35%, var(--line)); background: var(--violet-soft); }
.chip--mute     { color: var(--ink-2);  border-color: var(--line); background: var(--bg-1); }

/* Rank badge — square tile */
.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  color: #0B0A09;
  background: var(--ink-2);
  letter-spacing: -0.02em;
}
.rank--1 { background: var(--rank-1); }
.rank--2 { background: var(--rank-2); }
.rank--3 { background: var(--rank-3); }
.rank--4 { background: var(--rank-4); }
.rank--5 { background: var(--rank-5); color: #fff; }

/* Severity pill */
.sev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sev::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.sev--critical { color: var(--sev-critical); background: var(--signal-soft); border: 1px solid color-mix(in oklab, var(--sev-critical) 35%, transparent); }
.sev--high     { color: var(--sev-high);     background: var(--warn-soft);   border: 1px solid color-mix(in oklab, var(--sev-high) 35%, transparent); }
.sev--medium   { color: var(--sev-medium);   background: var(--warn-soft);   border: 1px solid color-mix(in oklab, var(--sev-medium) 35%, transparent); }
.sev--low      { color: var(--sev-low);      background: var(--bg-1);        border: 1px solid var(--line); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.btn:hover { border-color: var(--line-strong); background: var(--bg-2); }
.btn--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn--primary:hover { background: #fff; color: var(--bg); }
.btn--signal {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}
.btn--signal:hover { background: var(--signal-2); border-color: var(--signal-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { color: var(--ink); background: var(--bg-1); }

.btn .kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-3);
  background: var(--bg);
}

/* Card surfaces */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
}
.card--inset {
  background: var(--bg-2);
}

/* Grid / layout */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid > * { background: var(--bg); padding: 24px; }

/* Scanline / focus frame (signature motif) */
.frame {
  position: relative;
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--signal);
}
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Crosshair / section label */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label .idx { color: var(--signal); }
.section-label .bar { flex: 0 0 40px; height: 1px; background: var(--signal); }

/* Keyboard hint */
.kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-2);
  background: var(--bg-1);
  line-height: 1;
}

/* Tag grid with crosshairs at intersections */
.cross-grid {
  --cs: 10px;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Ambient blinking cursor */
.caret::after {
  content: "▋";
  color: var(--signal);
  animation: blink 1.1s steps(2, start) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Noise/grain overlay optional */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  z-index: 9999;
}