/* ============================================================
   BUDGETS MONITOR — DESIGN TOKENS
   Palette: Ink #0B0F1A · Paper #F4F6FB · Indigo #3A4CE0
            Mint #17B978 · Coral #FF5C72 · Amber #FFB020
   Display: 'Sora'  Body: 'Inter'  Data/Mono: 'JetBrains Mono'
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* -- brand palette -- */
  --ink:#0B0F1A;
  --paper:#F4F6FB;
  --indigo:#3A4CE0;
  --indigo-dark:#2A38B8;
  --mint:#17B978;
  --coral:#FF5C72;
  --amber:#FFB020;

  /* -- light theme (default) -- */
  --bg:#F4F6FB;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #E7EBFB 0%, transparent 60%),
             radial-gradient(1000px 500px at -10% 110%, #E6FBF3 0%, transparent 55%),
             var(--paper);
  --surface: rgba(255,255,255,.68);
  --surface-solid:#FFFFFF;
  --surface-2: rgba(255,255,255,.9);
  --border: rgba(15,20,40,.08);
  --border-strong: rgba(15,20,40,.14);
  --text: #10131A;
  --text-muted:#5B6472;
  --text-faint:#8A93A6;
  --shadow: 0 10px 30px -12px rgba(20,25,60,.18);
  --shadow-sm: 0 4px 14px -6px rgba(20,25,60,.14);
  --glass-blur: blur(18px);
  --sidebar-bg: rgba(255,255,255,.75);

  --primary:var(--indigo);
  --primary-2:#6E7BF2;
  --positive:var(--mint);
  --negative:var(--coral);
  --warning:var(--amber);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --neu-light: 8px 8px 18px rgba(163,177,198,.35), -8px -8px 18px rgba(255,255,255,.85);
  --neu-inset: inset 4px 4px 10px rgba(163,177,198,.35), inset -4px -4px 10px rgba(255,255,255,.85);
}

[data-theme="dark"]{
  --bg:#090C14;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #17204A 0%, transparent 60%),
             radial-gradient(1000px 500px at -10% 110%, #0E2A24 0%, transparent 55%),
             #090C14;
  --surface: rgba(22,26,42,.62);
  --surface-solid:#12162447;
  --surface-2: rgba(22,26,42,.85);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text:#EDEFFA;
  --text-muted:#A3AAC2;
  --text-faint:#6A7290;
  --shadow: 0 10px 34px -12px rgba(0,0,0,.55);
  --shadow-sm: 0 4px 16px -6px rgba(0,0,0,.5);
  --sidebar-bg: rgba(14,17,30,.78);
  --primary-2:#8891FF;

  --neu-light: 8px 8px 18px rgba(0,0,0,.45), -8px -8px 18px rgba(255,255,255,.03);
  --neu-inset: inset 4px 4px 10px rgba(0,0,0,.45), inset -4px -4px 10px rgba(255,255,255,.03);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-grad);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
.font-mono, .num{font-family:var(--font-mono);}
::selection{background:var(--indigo);color:#fff;}
a{color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px;}