/* ─────────────────────────────────────────────────────────────────────────
   Enrichment — design tokens.
   Dark-first graphite. One electric accent. Colour is meaningful: red/amber
   appear ONLY on a defect, so anything coloured on screen is a problem.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces — a real depth ladder, not one grey */
  --bg:#0B0C0E;
  --bg-grad:radial-gradient(1200px 600px at 72% -10%, #14181F 0%, #0B0C0E 62%);
  --surface:#131519;
  --surface-2:#181B20;      /* hover / striped */
  --surface-3:#1E2228;      /* inputs, wells */
  --line:#252A31;
  --line-2:#1B1F24;
  --line-strong:#333A43;

  /* ink */
  --ink:#F3F5F8;
  --ink-2:#C6CCD6;
  --ink-3:#8B95A3;
  --ink-4:#5E6875;

  /* the one accent */
  --accent:#5B8DEF;
  --accent-hi:#82A8F7;
  --accent-ink:#0B0C0E;
  --accent-bg:rgba(91,141,239,.13);
  --accent-line:rgba(91,141,239,.34);
  --accent-glow:0 0 0 1px rgba(91,141,239,.28), 0 6px 22px -8px rgba(91,141,239,.45);

  /* semantic — defects only */
  --danger:#F0796F; --danger-bg:rgba(240,121,111,.13); --danger-line:rgba(240,121,111,.3);
  --warn:#E2A455;   --warn-bg:rgba(226,164,85,.13);    --warn-line:rgba(226,164,85,.3);
  --ok:#54C79B;     --ok-bg:rgba(84,199,155,.13);      --ok-line:rgba(84,199,155,.3);
  --info:var(--accent); --info-bg:var(--accent-bg); --info-line:var(--accent-line);

  --hover:rgba(255,255,255,.045);
  --press:rgba(255,255,255,.075);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);

  --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:13px; --r-xl:17px; --r-full:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.34),0 12px 32px -12px rgba(0,0,0,.6);
  --sh-drawer:-24px 0 60px -20px rgba(0,0,0,.7);

  --rail:252px; --rail-min:64px; --h:34px;
  --dur:170ms; --ease:cubic-bezier(.2,.7,.2,1);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  color-scheme:dark;
}

/* Light is a deliberate second design, not an inversion. */
:root[data-theme="light"]{
  --bg:#FAFAFB;
  --bg-grad:radial-gradient(1200px 600px at 72% -10%, #FFFFFF 0%, #F5F6F8 70%);
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#F2F4F7;
  --line:#E4E7EC;
  --line-2:#EEF0F3;
  --line-strong:#CFD5DE;
  --ink:#0D0F13;
  --ink-2:#3A424E;
  --ink-3:#68717F;
  --ink-4:#98A1AE;
  --accent:#2F62D4;
  --accent-hi:#2453BE;
  --accent-ink:#FFFFFF;
  --accent-bg:rgba(47,98,212,.09);
  --accent-line:rgba(47,98,212,.26);
  --accent-glow:0 0 0 1px rgba(47,98,212,.2),0 6px 20px -10px rgba(47,98,212,.4);
  --danger:#C0392B; --danger-bg:rgba(192,57,43,.08); --danger-line:rgba(192,57,43,.24);
  --warn:#9A5B10;   --warn-bg:rgba(154,91,16,.08);   --warn-line:rgba(154,91,16,.24);
  --ok:#12805C;     --ok-bg:rgba(18,128,92,.08);     --ok-line:rgba(18,128,92,.24);
  --hover:rgba(13,15,19,.04);
  --press:rgba(13,15,19,.07);
  --sh-1:0 1px 2px rgba(13,15,19,.06);
  --sh-2:0 1px 3px rgba(13,15,19,.07),0 10px 28px -14px rgba(13,15,19,.22);
  --sh-drawer:-20px 0 50px -22px rgba(13,15,19,.24);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0; background:var(--bg); background-image:var(--bg-grad);
  background-attachment:fixed; color:var(--ink-2);
  font-family:var(--font); font-size:13.5px; line-height:1.5; letter-spacing:-.006em;
  font-feature-settings:"cv11","ss01","tnum" 0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.022em}
h1{font-size:20px;font-weight:620}
h2{font-size:16px;font-weight:600}
h3{font-size:13px;font-weight:600}
.tabular{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.94em}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--accent-bg);color:var(--ink)}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:10px;top:-48px;z-index:100;background:var(--surface);
  color:var(--ink);padding:9px 14px;border-radius:var(--r);box-shadow:var(--sh-2);
  border:1px solid var(--line);font-size:13px;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:10px}