:root{
  /* ---- colour tokens (HSL triplets, no hsl() wrapper) ---- */
  --background:40 25% 95%;      /* warm cream #F7F3EC */
  --foreground:222 47% 11%;     /* navy #0f172a */
  --card:40 30% 98%;            /* slightly warmer white than pure */
  --secondary:38 20% 97%;
  --muted:38 18% 94%;
  --muted-foreground:222 14% 42%;
  --primary:198 84% 44%;        /* sky/cyan, slightly desaturated for sophistication */
  --primary-foreground:0 0% 100%;
  --accent:217 85% 57%;         /* blue, slightly desaturated */
  --border:220 15% 78%;
  --ring:217 85% 57%;

  /* ---- new depth tokens ---- */
  --shadow-color:222 47% 11%;   /* navy for shadows */
  --glow-primary:198 84% 44%;
  --surface-glass:40 25% 95%;   /* for glass tints */

  /* ---- section-band tokens ---- */
  --band-alt:38 22% 93%;        /* slightly cooler than background for alternating bands */
  --band-alt-border:220 18% 86%;

  /* ---- compare winner-column token ---- */
  --c-us-bg:198 84% 44%;        /* primary hue for winner col */
  --c-us-glow:198 84% 44%;

  /* ---- plan elevation token ---- */
  --plan-popular-glow:198 84% 44%;

  /* ---- radius ---- */
  --radius:0.75rem;
  --radius-sm:0.5rem;
  --radius-lg:1rem;
  --radius-xl:1.25rem;

  /* ---- spacing scale (base-8) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* ---- modular type scale (1.25×) ---- */
  --text-xs:0.64rem;    /* ~10.2px */
  --text-sm:0.8rem;     /* ~12.8px */
  --text-base:1rem;     /* 16px */
  --text-md:1.25rem;    /* 20px */
  --text-lg:1.563rem;   /* 25px */
  --text-xl:1.953rem;   /* 31px */
  --text-2xl:2.441rem;  /* 39px */
  --text-3xl:3.052rem;  /* 48.8px */

  /* ---- motion ---- */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --transition-fast:150ms;
  --transition-base:220ms;
  --transition-slow:350ms;

  /* ---- font ---- */
  --font-sans:"IBM Plex Sans","IBM Plex Sans Hebrew",system-ui,sans-serif;
}
[data-theme="dark"]{
  --background:222 47% 9%;      /* deep navy, not pure black */
  --foreground:40 25% 93%;
  --card:222 42% 13%;
  --secondary:222 38% 16%;
  --muted:222 30% 20%;
  --muted-foreground:220 16% 64%;
  --primary:198 84% 54%;
  --primary-foreground:222 47% 9%;
  --accent:217 85% 64%;
  --border:222 22% 28%;
  --ring:217 85% 64%;
  --shadow-color:222 47% 4%;
  --glow-primary:198 84% 54%;
  --surface-glass:222 42% 13%;

  /* dark band / compare / plan overrides */
  --band-alt:222 38% 12%;
  --band-alt-border:222 22% 22%;
  --c-us-bg:198 84% 54%;
  --c-us-glow:198 84% 54%;
  --plan-popular-glow:198 84% 54%;
}