/* =====================================================================
   SysMonitor — design tokens (single source of truth for all pages)
   Consumed by:  console.html (/)   index.html+style.css (/grid)   install.html
   Served at /static/tokens.css (StaticFiles → ETag/304 cached).

   Dark is the only theme today. Every color is an alias, so a light theme is
   just a second block:  [data-theme="light"]{ --bg:… }  — no page edits needed.
   The legacy variable names (--bg --panel --panel2 --line --txt --mut --acc
   --acc2 --ok --warn --bad, plus install's --card --fg --accent) are kept so
   existing rules in every page keep working after the palette was unified here.
   ===================================================================== */
:root{
  /* ---- neutral surfaces (deep, slightly cool near-black) ---- */
  --bg:#0b0e14;            /* app background            */
  --surface:#12161f;       /* panels, header, nav       */
  --panel:#12161f;         /* alias (console/install)   */
  --card:#12161f;          /* alias (install)           */
  --surface-2:#1a1f2b;     /* inputs, raised chips      */
  --panel2:#1a1f2b;        /* alias (console)           */
  --surface-3:#222835;     /* hover fill                */
  --line:#242b38;          /* hairline borders          */
  --line-strong:#333b4a;   /* stronger dividers/inputs  */

  /* ---- text ---- */
  --txt:#e7ebf2;
  --fg:#e7ebf2;            /* alias (install)            */
  --mut:#8b94a3;           /* secondary text             */
  --faint:#5b6675;         /* tertiary / placeholder     */

  /* ---- accent (single blue across the whole product) ---- */
  --acc:#3b82f6;
  --acc2:#2563eb;          /* hover / active             */
  --accent:#3b82f6;        /* alias (install)            */
  --acc-soft:rgba(59,130,246,.14);
  --acc-ring:rgba(59,130,246,.45);

  /* ---- semantic: solid + soft-bg + on-soft-text ---- */
  --ok:#22c55e;   --ok-bg:#0f2e1c;   --ok-fg:#5fe39a;
  --warn:#f59e0b; --warn-bg:#332413; --warn-fg:#fcc366;
  --bad:#ef4444;  --bad-bg:#331417;  --bad-fg:#fca5a5;
  --info:#38bdf8; --info-bg:#0e2a38; --info-fg:#7dd3fc;

  /* ---- spacing scale (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---- radius scale ---- */
  --r-1:6px; --r-2:8px; --r-3:10px; --r-4:14px; --r-full:999px;

  /* ---- elevation (soft, low-spread — no heavy blur) ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 4px 16px rgba(0,0,0,.35);
  --sh-3:0 20px 60px rgba(0,0,0,.55);

  /* ---- z-index scale ---- */
  --z-nav:10; --z-sticky:9; --z-popover:30; --z-flash:40; --z-modal:100;

  /* ---- motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.15s;

  color-scheme:dark;
}

/* ---------- page-agnostic base polish (applies everywhere) ---------- */

/* Keyboard focus: a clear accent ring on any focused control (a11y).
   :focus-visible only, so mouse clicks don't get an outline. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:var(--r-1);
}
/* Kill the default focus outline only where we replace it with a ring/border. */
:where(input,select,textarea):focus{ outline:none; }

/* Refined thin scrollbars (Chromium/Edge/Safari; Firefox via scrollbar-*). */
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:var(--r-full);
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:#3f4859; background-clip:padding-box; }

/* Tabular numbers so counts/versions/timestamps don't jitter. */
.mono,code,.stat .n,td,th{ font-variant-numeric:tabular-nums; }

::selection{ background:var(--acc-soft); }

/* Respect reduced-motion for everyone. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}