/* ═══════════════════════════════════════════════════════════════
   AchieveX — Theme Variables  (themes.css)
   Light/Dark CSS custom properties — single source of truth
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fonts */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Sora', sans-serif;

  /* Color palette */
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE;
  --blue-400:#60A5FA; --blue-500:#3B82F6; --blue-600:#2563EB;
  --blue-700:#1D4ED8; --blue-900:#1E3A8A;
  --green-500:#22C55E; --green-100:#DCFCE7;
  --amber-500:#F59E0B; --amber-100:#FEF3C7;
  --red-500:#EF4444;   --red-100:#FEE2E2;
  --purple-500:#A855F7; --purple-100:#F3E8FF;
  --cyan-500:#06B6D4;   --cyan-100:#CFFAFE;
  --orange-500:#F97316; --indigo-500:#6366F1;

  /* Light mode surfaces */
  --bg:#F8F9FA; --bg2:#F1F3F4; --bg3:#E8EAED;
  --surface:#FFFFFF; --surface2:#F8F9FA; --surface3:#F1F3F4;
  --surface4:rgba(255,255,255,.92);
  --border:rgba(0,0,0,.06); --border-m:rgba(0,0,0,.10);
  --border-s:rgba(59,130,246,.18);
  --txt:#202124; --txt2:#3C4043; --txt3:#5F6368; --txt4:#9AA0A6;
  --glass:rgba(255,255,255,.88); --glass-border:rgba(255,255,255,.65);

  /* Primary accent */
  --primary:var(--blue-500); --primary-d:var(--blue-600); --primary-l:var(--blue-400);

  /* Shadows (light) */
  --shadow-xs:0 1px 2px rgba(60,64,67,.07),0 1px 3px rgba(60,64,67,.05);
  --shadow-sm:0 1px 3px rgba(60,64,67,.09),0 2px 8px rgba(60,64,67,.06);
  --shadow:0 2px 6px rgba(60,64,67,.10),0 4px 16px rgba(60,64,67,.07);
  --shadow-md:0 4px 12px rgba(60,64,67,.12),0 8px 32px rgba(60,64,67,.08);
  --shadow-lg:0 8px 24px rgba(60,64,67,.14),0 16px 56px rgba(60,64,67,.10);
  --shadow-xl:0 16px 48px rgba(60,64,67,.16),0 32px 80px rgba(60,64,67,.12);
  --shadow-blue:0 4px 16px rgba(59,130,246,.32),0 2px 6px rgba(59,130,246,.18);
  --shadow-blue-lg:0 8px 32px rgba(59,130,246,.38),0 4px 12px rgba(59,130,246,.22);

  /* Radii */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px;
  --r-xl:20px; --r-2xl:24px; --r-3xl:32px; --r-full:9999px;

  /* Layout */
  --nav-h:60px; --side-w:240px; --page-w:1140px;
  --page-px:clamp(16px,4vw,32px);

  /* Easing */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-google:cubic-bezier(.4,0,.2,1);

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Z-index scale */
  --z-sidebar:300; --z-overlay:95; --z-modal:400; --z-toast:500; --z-tooltip:600;
}

/* ─── DARK MODE OVERRIDES ─── */
.dark {
  --bg:#1A1B1E; --bg2:#202124; --bg3:#2D2E31;
  --surface:#28292C; --surface2:#303134; --surface3:#3C4043;
  --surface4:rgba(40,41,44,.92);
  --border:rgba(255,255,255,.06); --border-m:rgba(255,255,255,.10);
  --glass:rgba(30,31,34,.92); --glass-border:rgba(255,255,255,.08);
  --txt:#E8EAED; --txt2:#BDC1C6; --txt3:#9AA0A6; --txt4:#5F6368;
  --shadow-xs:0 1px 3px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3);
  --shadow-sm:0 2px 6px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
  --shadow:0 4px 12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.60),0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.70),0 8px 20px rgba(0,0,0,.45);
  --shadow-xl:0 24px 72px rgba(0,0,0,.75),0 12px 32px rgba(0,0,0,.50);
}