:root {
  /* Backgrounds */
  --bg-primary:    #07070e;
  --bg-secondary:  #0d0d1a;
  --bg-card:       #131320;
  --bg-card-hover: #1a1a2e;

  /* Borders */
  --border:        #1e1e38;
  --border-light:  #2a2a4a;

  /* Text */
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;

  /* Brand accents */
  --cyan:          #00c8ff;
  --cyan-dim:      rgba(0, 200, 255, 0.15);
  --cyan-glow:     rgba(0, 200, 255, 0.4);
  --purple:        #8b35ff;
  --purple-dim:    rgba(139, 53, 255, 0.15);
  --purple-glow:   rgba(139, 53, 255, 0.4);
  --pink:          #e91e8c;
  --pink-dim:      rgba(233, 30, 140, 0.15);
  --pink-glow:     rgba(233, 30, 140, 0.4);

  /* Semantic */
  --green:         #22c55e;
  --red:           #ef4444;
  --yellow:        #eab308;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--cyan), var(--purple), var(--pink));
  --gradient-hero:  linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);

  /* Typography */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

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

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow-cyan:   0 0 24px rgba(0, 200, 255, 0.25);
  --shadow-glow-purple: 0 0 24px rgba(139, 53, 255, 0.25);
  --shadow-glow-pink:   0 0 24px rgba(233, 30, 140, 0.25);

  /* Layout */
  --max-width: 1200px;
  --nav-height: 68px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
}