/* ============================================================
   Verity — hi-fi dark token system
   Slate-ink base · Sora / Space Grotesk / IBM Plex Mono
   Brass interactive accent · severity scale FIXED: crit/high/mod/low
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- slate-ink surface ramp (Verity ink, warm-neutral) ---- */
  --void:      #070b11;
  --deep:      #0c141e;   /* Verity ink2 — rail / topbar / panels */
  --surface:   #111b27;
  --panel:     #16222f;   /* Verity ink — row hover */
  --elevated:  #1d2c3b;
  --hover:     #26384c;
  --raised:    #30465e;

  /* ---- hairlines (warm brass-tinted) ---- */
  --line:      rgba(218,180,108,0.09);
  --line-mid:  rgba(218,180,108,0.17);
  --line-bright:rgba(218,180,108,0.32);

  /* ---- text (warm archival off-white) ---- */
  --t-hi:      #f3efe5;
  --t-mid:     #b3a997;
  --t-lo:      #847b69;
  --t-faint:   #5c5547;

  /* ---- interactive accent — BRASS (NOT a severity) ---- */
  --accent:    #d9b36a;
  --accent-dim:#8a6526;
  --accent-glow:rgba(217,179,106,0.16);
  --on-accent: #1b1407;   /* ink text on brass fills */

  /* ---- severity (locked four-level system) ---- */
  --crit:   #EF4444;
  --high:   #F97316;
  --mod:    #EAB308;
  --low:    #3B82F6;
  /* tinted fills for surfaces/bars (12% over navy) */
  --crit-fill:rgba(239,68,68,0.14);
  --high-fill:rgba(249,115,22,0.14);
  --mod-fill: rgba(234,179,8,0.14);
  --low-fill: rgba(59,130,246,0.14);
  --crit-line:rgba(239,68,68,0.42);
  --high-line:rgba(249,115,22,0.42);
  --mod-line: rgba(234,179,8,0.42);
  --low-line: rgba(59,130,246,0.42);

  /* status non-severity */
  --good:   #35bf8c;

  /* ---- type ---- */
  --display:'Sora',system-ui,sans-serif;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ---- radius / shadow ---- */
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 20px rgba(0,0,0,.45);
  --sh-3:0 18px 50px rgba(0,0,0,.55);
  --sh-pop:0 12px 38px rgba(0,0,0,.6),0 0 0 1px var(--line-mid);

  /* layout */
  --rail-w:66px;
  --top-h:52px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--void);
  color:var(--t-hi);
  font-family:var(--sans);
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1,"zero" 1;}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--line-mid);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--line-bright);background-clip:padding-box;}

/* shared label style */
.eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);
}

@keyframes sph-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes sph-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes sph-ring{0%{box-shadow:0 0 0 0 var(--accent-glow);}70%{box-shadow:0 0 0 7px rgba(217,179,106,0);}100%{box-shadow:0 0 0 0 rgba(217,179,106,0);}}

/* display family for titles + figures */
.crumb,.vb-title,.gaugebig{font-family:var(--display);}