/* ============================================================
   StartFinance — Design tokens
   Values pulled directly from the Spike admin reference (computed
   styles read from the live page, not eyeballed off a screenshot):
   accent #0085DB stays constant across themes; dark cards sit a
   shade DARKER than the page canvas rather than lighter — that
   recessed-card / glowing-canvas contrast is what reads as
   "harmonious" instead of flat. Stat colors are deep, muted jewel
   tones for small decorative badges only — never the big KPI cards,
   which all share the single accent so nothing clashes.
   ============================================================ */
:root{
  --font-display:'Instrument Sans', 'Segoe UI', sans-serif;
  --font-body:'Instrument Sans', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:13px;
  --radius-xl:18px;

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);

  /* Muted jewel tones for small decorative badges (entity glyphs, blobs) */
  --stat-1:#223662;
  --stat-2:#1c455d;
  --stat-3:#4a3d1e;
  --stat-4:#3a2e52;
  --stat-5:#4b313d;

  /* Soft chart-only accents (from the reference's bar/donut series) */
  --chart-salmon:#fb977d;
  --chart-amber:#f8c076;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px;
}

/* ---------- Light (default) ---------- */
:root{
  --bg:#f0f5f9;
  --bg-grid:rgba(0,133,219,.035);
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#edf1f5;
  --raised:#ffffff;
  --border:#e5eaef;
  --border-strong:#d5dce3;
  --text:#111c2d;
  --text-dim:#5b6679;
  --text-faint:#97a2b4;
  --accent:#0085db;
  --accent-soft:rgba(0,133,219,.1);
  --accent-contrast:#ffffff;
  --pos:#1caa73;
  --pos-bg:rgba(28,170,115,.12);
  --neg:#e6465e;
  --neg-bg:rgba(230,70,94,.12);
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg:0 12px 28px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);
  --shadow-2:0 20px 44px rgba(16,24,40,.14);
  --glow-accent:0 6px 16px rgba(0,133,219,.28);
  --scrim:rgba(15,18,32,.45);
  color-scheme: light;
}

/* ---------- Dark ---------- */
[data-mode="dark"]{
  --bg:#15263a;
  --bg-grid:rgba(70,202,235,.045);
  --surface:#111c2d;
  --surface-2:#16233a;
  --surface-3:#1c2a42;
  --raised:#111c2d;
  --border:#333f55;
  --border-strong:#414f6b;
  --text:#eaeff4;
  --text-dim:#c6d1e9;
  --text-faint:#707a82;
  --accent:#0085db;
  --accent-soft:rgba(0,133,219,.22);
  --accent-contrast:#ffffff;
  --pos:#4bd08b;
  --pos-bg:rgba(75,208,139,.16);
  --neg:#ef5b70;
  --neg-bg:rgba(239,91,112,.16);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 2px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 18px 36px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --shadow-2:0 24px 52px rgba(0,0,0,.55);
  --glow-accent:0 6px 18px rgba(0,133,219,.4);
  --scrim:rgba(2,4,10,.65);
  color-scheme: dark;
}