/* ====================================================
   FINANCETRACK — Palette Slate & Mint
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --header-h:59px; /* hauteur réelle du header — sync JS via syncHeaderHeight() */
  --nav-h:52px;    /* hauteur réelle de la nav — sync JS via syncHeaderHeight() */
  --bg:#0f1923;
  --bg2:#141f2b;
  --surface:#1a2638;
  --surface2:#1e2d40;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --text:#f0f6ff;
  --text2:#8899aa;
  --text3:#556677;
  --mint:#00c48c;
  --mint-hover:#00d49a;
  --mint-bg:rgba(0,196,140,0.12);
  --mint-border:rgba(0,196,140,0.25);
  --coral:#ff6b6b;
  --coral-bg:rgba(255,107,107,0.12);
  --amber:#f5a623;
  --amber-bg:rgba(245,166,35,0.12);
  --blue:#4da6ff;
  --blue-bg:rgba(77,166,255,0.12);
  --shadow:0 2px 8px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 6px rgba(0,0,0,0.25);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.45),0 4px 16px rgba(0,0,0,0.3);
  --r:12px;--r2:16px;
  --green:var(--mint);--green-bg:var(--mint-bg);
  --red:var(--coral);--red-bg:var(--coral-bg);
  --accent:var(--mint);--muted:var(--text2);--faint:var(--text3);--card:var(--bg2);
  --chart-border:#141f2b;
  --a1:var(--mint);
  --header-bg:rgba(20,31,43,0.9);
}
[data-theme="light"]{
  --bg:#f5f5f7;
  --bg2:#ffffff;
  --surface:#f2f2f7;
  --surface2:#e5e5ea;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.14);
  --text:#1c1c1e;
  --text2:#636366;
  --text3:#aeaeb2;
  --mint:#00a876;
  --mint-hover:#00956a;
  --mint-bg:#eaf9f4;
  --mint-border:rgba(0,168,118,0.22);
  --coral:#e05555;
  --coral-bg:#fff0f0;
  --amber:#d48a10;
  --amber-bg:#fff8e6;
  --blue:#2563eb;
  --blue-bg:#eef3fe;
  --shadow:0 1px 3px rgba(0,0,0,0.04),0 6px 24px rgba(0,0,0,0.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.06),0 24px 56px rgba(0,0,0,0.09);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.05);
  --shadow-xl:0 8px 24px rgba(0,0,0,0.07),0 32px 72px rgba(0,0,0,0.11);
  --chart-border:#ffffff;
  --header-bg:rgba(255,255,255,0.90);
}