/* ============ TOKENS ============ */
:root{
  color-scheme:dark;
  --bg:#0a0b0f;
  --toast-bg:#1c2433;
  --bg-side:#141b2d;   /* side menu: slightly lighter, blue-tinted */
  --side-border:#232d47;
  --side-hover:#1d2742;
  --period-sel:rgba(0,0,0,.38);   /* selected period pill: slightly darker tint of its background */
  --sel-grad:linear-gradient(135deg,color-mix(in srgb,var(--accent-dim) 85%,var(--accent)),color-mix(in srgb,var(--accent-dim) 75%,#0a0b0f));   /* selected tab / period pill (dark: deeper blue) */
  --card:#12141c;
  --card-2:#161821;
  --border:#22242e;
  --text:#d7dbe5;
  --text-dim:#a6acbc;
  --text-faint:#777e91;
  --text-strong:#f0f2f7;
  --on-accent:#e6e9f0;   /* text on blue/red filled buttons (was pure white) */
  --accent:#3b82f6;
  --accent-dim:#1d4ed8;
  --accent-glow:rgba(59,130,246,.15);
  --accent-glow-rgb:59,130,246;
  --green:#3b82f6;
  /* Reds use 80% of their original RGB brightness; calendar retains its palette. */
  --red:#c0394a;
  --calendar-red:#f0475d;
  --amber:#f2a93b;
  --amber-glow-rgb:242,169,59;
  --purple:#a76bf0;
  --bar-a:var(--accent);   /* meter gradient start */
  --bar-b:var(--purple);   /* meter gradient end */
  --radius:12px;
  --radius-sm:8px;

  /* extended surface / state tokens (keep dark mode pixel-identical) */
  --input-bg:#191b24;
  --input-bg-strong:#15161f;
  --input-bg-disabled:#101119;
  --input-bg-focus:#171926;
  --input-bg-cooldown-focus:#1c1015;
  --hover-surface:#181a24;
  --hover-surface-2:#1c1e28;
  --hover-surface-3:#151720;
  --surface-muted:#20222c;
  --surface-tag:#262835;
  --surface-panel:#12131a;
  --scrollbar-thumb:#262833;
  --overlay-bg:rgba(4,5,8,.72);
  --day-circle-border:#454857;
  --border-hover:#333748;
  --border-hover-2:#4a4d5c;
  --input-border-hover:#33364433;
  --subtle-surface:rgba(255,255,255,.05);
  --be-good-text:#8fb8ff;
  --be-warn-text:#cc7e7e;
  --cooldown-text:#c65a5a;
  --brand-grad-a:#dfe2ea;
  --brand-grad-b:#c8cbe0;
  --card-shadow:none;
  --jfield-border:rgba(255,255,255,.06);
  --shadow-hover:0 8px 18px -6px rgba(0,0,0,.85), 0 0 0 1px rgba(59,130,246,.2), 0 0 16px -4px rgba(59,130,246,.14);
  --jfield-border-hover:rgba(255,255,255,.12);
  --shadow-modal:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;

  font-family:'Inter',-apple-system,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif;
}