/* ============================================================
     WANNAHELP V2 DESIGN SYSTEM — TOKENS
  ============================================================ */
  :root {
    /* Light mode (default) */
    --bg-primary:#F7F7F7; --bg-secondary:#EFEFEF; --bg-card:#FFFFFF; --bg-elevated:#F0F0F0;
    --text-primary:#1A1A1A; --text-secondary:#5C5C5C; --text-muted:#9E9E9E;
    --accent:#10b981; --accent-hover:#34d399; --accent-dark:#059669; --accent-rgb:16,185,129;
    --line-color:#E5E5E5; --line-strong:#D4D4D4; --line-accent:rgba(16,185,129,0.3);
    --nav-bg-scrolled:rgba(255,255,255,0.96); --card-hover-bg:#F5F5F5;
    --logo-cross:#F7F7F7; --form-input-bg:#F0F0F0; --form-input-focus-bg:rgba(16,185,129,0.04);
    --hm-0:#EBEBEB; --hm-1:rgba(16,185,129,0.25); --hm-2:rgba(16,185,129,0.50);
    --hm-3:rgba(16,185,129,0.75); --hm-4:#10b981;
    --shadow:0 2px 12px rgba(0,0,0,0.07); --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
    --ring-track:#1565C0;
    --font-display:'Inter',sans-serif; --font-ui:'Inter',sans-serif;
    --font-scale:1;
    --fs-xs:calc(11px * var(--font-scale)); --fs-sm:calc(13px * var(--font-scale));
    --fs-base:calc(15px * var(--font-scale)); --fs-md:calc(17px * var(--font-scale));
    --fs-lg:calc(20px * var(--font-scale)); --fs-xl:calc(24px * var(--font-scale));
    --fs-2xl:calc(30px * var(--font-scale)); --fs-3xl:calc(42px * var(--font-scale));
  }

  html[data-theme="dark"] {
    --bg-primary:#0d1117; --bg-secondary:#161b22; --bg-card:#161b22; --bg-elevated:#1f2937;
    --text-primary:#e5e7eb; --text-secondary:#9ca3af; --text-muted:#6b7280;
    --accent:#10b981; --accent-hover:#34d399; --accent-dark:#059669; --accent-rgb:16,185,129;
    --line-color:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14); --line-accent:rgba(16,185,129,0.28);
    --nav-bg-scrolled:rgba(13,17,23,0.97); --card-hover-bg:#1f2937;
    --logo-cross:#0d1117; --form-input-bg:rgba(255,255,255,0.04); --form-input-focus-bg:rgba(16,185,129,0.06);
    --hm-0:rgba(255,255,255,0.06); --hm-1:rgba(16,185,129,0.25); --hm-2:rgba(16,185,129,0.50);
    --hm-3:rgba(16,185,129,0.75); --hm-4:#10b981;
    --shadow:0 2px 12px rgba(0,0,0,0.5); --shadow-lg:0 8px 32px rgba(0,0,0,0.6);
    --ring-track:#2196F3;
  }

  /* Chart palette CSS vars (JS reads these) */
  :root { --cp1:16,185,129; --cp2:28,176,246; --cp3:206,130,255; --cp4:255,150,0; --cp5:255,75,75; --cp6:52,211,153; }
  html[data-theme="dark"] { --cp1:52,211,153; --cp2:96,165,250; --cp3:167,139,250; --cp4:251,191,36; --cp5:248,113,113; --cp6:16,185,129; }