:root {
  /* Backgrounds */
  --color-bg-base:      #080B14;
  --color-bg-surface:   #0D1220;
  --color-bg-elevated:  #131929;
  --color-bg-border:    #1E2A40;

  /* Accent */
  --color-accent-1:     #2563EB;
  --color-accent-2:     #7C3AED;
  --color-accent-3:     #06B6D4;

  /* Gradients */
  --gradient-brand:     linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --gradient-brand-alt: linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
  --gradient-text:      linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);

  /* Text */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #475569;
  --color-text-accent:    #60A5FA;

  /* Semantic */
  --color-success:       #10B981;
  --color-success-soft:  rgba(16, 185, 129, 0.12);
  --color-success-ring:  rgba(16, 185, 129, 0.35);
  --color-error:         #EF4444;

  /* Aurora overlay (3rd vibe) */
  --color-aurora-1: #06B6D4;
  --color-aurora-2: #7C3AED;
  --color-aurora-3: #EC4899;
  --gradient-aurora:
    radial-gradient(60% 60% at 20% 30%, rgba(6,182,212,0.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 20%, rgba(124,58,237,0.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 80%, rgba(236,72,153,0.14) 0%, transparent 60%);

  /* Spacing (base-8) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* Shadows */
  --shadow-card:        0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow-blue:   0 0 40px rgba(37,99,235,0.3);
  --shadow-glow-violet: 0 0 40px rgba(124,58,237,0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index */
  --z-base:  1;
  --z-above: 10;
  --z-nav:   100;
}