/* Gullak Desktop — design tokens (finalised 2026-09-18: "Lavender", light + dark)
   Semantic colours are fixed: green = good, yellow = warning / just-changed, red = danger.
   The accent only touches: active nav, focus rings, primary button, logo, links. Envelope bars are green (overspent = red). Numbers stay ink. */
:root {
  --bg: #F4F1F8;        /* page ground — lilac-tinted, never pure white */
  --tile: #FCFBFE;      /* cards */
  --side: #EFEBF6;      /* sidebar */
  --ink: #2B2830;
  --muted: #8A8593;
  --dim: #5A5566;       /* sidebar nav + account names — readable, still quieter than ink */
  --band: #E3DEEC;      /* sidebar section-header strip */
  --line: #ECE7F2;
  --soft: #F1EDF7;      /* inputs, chips, hover */
  --acc: #6B5CC7;       /* brand accent */
  --acc-bg: #E6E1F7;
  --acc-ink: #4E41A8;

  --pos: #2E9E6B;  --pos-bg: #CFEFE1;  --pos-ink: #1E7A55;
  --warn: #E3B341; --warn-bg: #FFF0BF; --warn-ink: #8A6A00;
  --neg: #D8506A;  --neg-bg: #FBD9E1;  --neg-ink: #B8405C;

  /* pastel chips for groups / stat tiles */
  --sky: #D6EAF8;   --sky-ink: #2A6FA8;
  --peach: #FFDCCB; --peach-ink: #B5502A;
  --mint: var(--pos-bg); --mint-ink: var(--pos-ink);
  --rose: var(--neg-bg); --rose-ink: var(--neg-ink);
  --butter: var(--warn-bg); --butter-ink: var(--warn-ink);
  --lav: var(--acc-bg); --lav-ink: var(--acc-ink);

  --on-strong: #FFFFFF; /* text on a strong (accent / pos / neg) button */
  --shadow: 0 6px 24px rgba(60,50,40,.06);
  --shadow-pop: 0 24px 60px rgba(43,40,48,.22), 0 0 0 1px rgba(43,40,48,.05);
  --radius: 20px; --radius-sm: 12px;
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #18161E; --tile: #211F29; --side: #1D1B25;
  --ink: #ECEAF2; --muted: #9B97A8; --dim: #C3BFCE; --band: #2A2735; --line: #2C2936; --soft: #2A2733;
  --acc: #A99CF0; --acc-bg: #2E2A44; --acc-ink: #C4BAFA;
  --pos: #6FD3A0;  --pos-bg: #1C3A2C;  --pos-ink: #8FE3B8;
  --warn: #F2D27A; --warn-bg: #3C3218; --warn-ink: #F2D27A;
  --neg: #F08A9E;  --neg-bg: #3E2029;  --neg-ink: #F5A3B3;
  --sky: #22344E; --sky-ink: #ABC7F2;
  --peach: #3E2820; --peach-ink: #F2AE98;
  --on-strong: #16151A;
  --shadow: 0 1px 0 rgba(255,255,255,.03);
  --shadow-pop: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}