/* ---------- Variables & Dark‑mode ---------- */

:root{
  /* Brand */
  --clr-primary: #2560ec;
  --clr-primary-1:#2560ec; --clr-primary-2:#0b172a; --clr-primary-3:#3b5bdb;
  --clr-accent:#f36600;    --clr-accent-2:#ffa037;
  --clr-danger:#d7263d;

  /* UI */
  --clr-bg-light:#eef2fa;
  --bg:#f7faff;   --surface:#fff;  --border:#e6e8ec;
  --text:#191919; --text-dim:#555; --text-light:#fff;

  /* Scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem;
  --s-4:1rem;   --s-5:1.5rem;--s-6:2rem;

  --radius:20px;
  --shadow:0 10px 25px rgba(37,96,236,.06);
  --shadow-hover:0 18px 44px rgba(37,96,236,.13);
  
  --pricing-shadow:        var(--shadow);
  --pricing-shadow-hover:  var(--shadow-hover);

  --ff:'Inter','Plex-Ar',sans-serif;
  --trans:all .25s cubic-bezier(.4,0,.2,1);

  --sidebar-width:220px;
  --sidebar-collapsed:64px;
  
  --plk-topbar-h: 64px;
  
  --gradient-1: var(--surface);
  --gradient-2: var(--bg);
  
  --pl-blue: #2560ec;
  --pl-dark: #0b172a;
  --pl-light: #eef2fa;
  --pl-shadow: 0 8px 28px rgba(37,96,236,0.12);
  --pl-radius: 2.1rem;
  --pl-gap: 2.2rem;
  --pl-orange: #ffa037;

}

/* Dark‑mode overrides */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#181c23; --clr-bg-light:#161b22;
    --surface:#232936; --border:#32364b;
    --text:#f2f4fa; --text-dim:#a5b0d6;
    --clr-danger:var(--clr-primary-1);
    --shadow:0 6px 24px rgba(37,96,236,.23);
    --shadow-hover:0 14px 32px rgba(255,102,0,.18);
  }
}