:root {
  /* Colors */
  --color-bg:          #0A0A0F;
  --color-surface:     #12121A;
  --color-surface-2:   #1A1A28;
  --color-border:      rgba(123, 47, 255, 0.25);
  --color-primary:     #00FFB2;
  --color-secondary:   #7B2FFF;
  --color-accent:      #FF3DFF;
  --color-text:        #F0F0FF;
  --color-muted:       #8888AA;
  --color-heading:     #FFFFFF;

  /* Gradients */
  --grad-primary:      linear-gradient(135deg, #00FFB2 0%, #7B2FFF 100%);
  --grad-accent:       linear-gradient(135deg, #7B2FFF 0%, #FF3DFF 100%);
  --grad-hero:         radial-gradient(ellipse 80% 60% at 50% 40%, rgba(123,47,255,0.35) 0%, transparent 70%);
  --grad-card:         linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* Typography */
  --font-sans:         'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1rem;
  --text-lg:           1.125rem;
  --text-xl:           1.375rem;
  --text-2xl:          1.75rem;
  --text-3xl:          2.25rem;
  --text-4xl:          3rem;
  --text-5xl:          4rem;
  --text-6xl:          5.5rem;
  --font-normal:       400;
  --font-medium:       500;
  --font-semibold:     600;
  --font-bold:         700;
  --font-black:        900;
  --leading-tight:     1.15;
  --leading-snug:      1.35;
  --leading-normal:    1.6;

  /* Spacing (8px base) */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  2.5rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;
  --sp-16: 8rem;
  --sp-20: 10rem;

  /* Border */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Shadows / Glows */
  --glow-primary:   0 0 24px rgba(0, 255, 178, 0.35);
  --glow-secondary: 0 0 32px rgba(123, 47, 255, 0.4);
  --glow-accent:    0 0 20px rgba(255, 61, 255, 0.3);
  --shadow-card:    0 4px 32px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    600ms;

  /* Layout */
  --max-width:    1280px;
  --nav-height:   72px;
  --section-gap:  var(--sp-20);
  --grid-cols:    12;
  --gutter:       var(--sp-3);
}