:root {
  /* Colors */
  --color-bg:            #0C1118;
  --color-bg-elevated:   #111820;
  --color-primary:       #1E7EE8;
  --color-primary-hover: #2689F5;
  --color-secondary:     #7DD6F5;
  --color-surface:       rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.07);
  --color-text:          #FFFFFF;
  --color-text-muted:    #8B9BB4;
  --color-text-subtle:   #4A5568;
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.16);
  --color-glow:          rgba(30, 126, 232, 0.25);
  --color-glow-strong:   rgba(30, 126, 232, 0.45);
  --color-success:       #34D399;
  --color-danger:        #F87171;

  /* Typography */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;
  --text-6xl:  5rem;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Spacing (8pt grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 24px var(--color-glow);
  --shadow-glow-strong: 0 0 48px var(--color-glow-strong);

  /* Transitions */
  --ease-fluid:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --duration-reveal: 700ms;

  /* Layout */
  --max-width:        1200px;
  --section-padding:  120px;
  --nav-height:       72px;
}

/* Responsive overrides */
@media (max-width: 1024px) {
  :root {
    --section-padding: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --section-padding: 64px;
  }
}