:root{
  /* Colors */
  --c-grad-a:#236BFF;
  --c-grad-b:#A400FF;
  --c-accent:#12D8FA;
  --c-bg:#090A16;
  --c-bg-elev:#101120;
  --c-text-hi:#ffffff;
  --c-text-med:#ffffff;
  --c-text-low:#ffffff;
  --c-border-glass:rgba(255,255,255,.08);
  --c-success:#10b981;
  
  /* Responsive Breakpoints */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large: 1440px;
  
  /* Fluid Typography - Mobile-first with clamp() */
  --fs-h1: clamp(2rem, 5vw + 1rem, 4.5rem);
  --fs-h2: clamp(1.75rem, 4vw + 1rem, 3rem);
  --fs-h3: clamp(1.5rem, 3vw + 1rem, 2rem);
  --fs-h4: clamp(1.25rem, 2.5vw + 1rem, 1.5rem);
  --fs-body: clamp(1rem, 2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 1.5vw, 1rem);
  
  /* Legacy typography (for backward compatibility) */
  --fs-p: 1.125rem;
  
  /* Responsive Spacing */
  --spacing-mobile: 1rem;
  --spacing-tablet: 1.5rem;
  --spacing-desktop: 2rem;
  --spacing-large: 3rem;
  
  /* Spacing & Radius */
  --radius-card:12px;
  --radius-btn:20px;
  --radius-sm:6px;
  
  /* Shadows */
  --elev-card:0 4px 16px rgba(0,0,0,.4);
  --elev-card-hover:0 8px 24px rgba(0,0,0,.45);
  
  /* Motion */
  --motion-fade:200ms;
  --motion-slide:350ms;
  --ease-out:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Touch Targets - Minimum 44x44px for mobile */
  --touch-target-min: 44px;
}