@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root,[data-theme="dark"]{
  --color-bg:#0f0720;--color-surface:#1a0d35;--color-surface-2:#221245;
  --color-surface-offset:#2a1658;--color-surface-dynamic:#32196a;
  --color-divider:#3d2080;--color-border:rgba(168,85,247,0.2);
  --color-text:#f0e8ff;--color-text-muted:#b8a8d8;--color-text-faint:#7a6a9a;
  --color-text-inverse:#0f0720;
  --color-primary:#e91e8c;--color-primary-hover:#c4176e;--color-primary-active:#9e0f52;
  --color-primary-highlight:rgba(233,30,140,0.15);
  --color-accent:#f472b6;--color-secondary:#a855f7;
  --color-xp:#fbbf24;--color-success:#22c55e;--color-success-bg:rgba(34,197,94,0.12);
  --color-error:#ef4444;--color-junior:#60a5fa;--color-semi:#c084fc;--color-senior:#fbbf24;
  --font-display:'Space Grotesk',sans-serif;--font-body:'Nunito',sans-serif;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
  --shadow-glow-pink:0 0 24px rgba(233,30,140,.4);
  --shadow-glow-xp:0 0 16px rgba(251,191,36,.35);
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --transition-slow:350ms cubic-bezier(.16,1,.3,1);
  --sidebar-width:260px;--header-height:64px;
}