:root {
  /* Backgrounds */
  --bg-deep:       #080c0c;
  --bg-primary:    #0a1010;
  --bg-elevated:   #0e1818;
  --bg-hover:      #122020;
  --bg-glass:      rgba(14, 24, 24, 0.7);

  /* Primary — Teal */
  --teal-100:      #e0faf7;
  --teal-200:      #a0f0e4;
  --teal-300:      #50e0cc;
  --teal-400:      #00d4b8;
  --teal-500:      #00b4a0;
  --teal-600:      #008a7a;
  --teal-glow:     rgba(0, 212, 184, 0.15);
  --teal-border:   rgba(0, 212, 184, 0.25);

  /* Secondary — Steel Blue */
  --blue-300:      #7ab8e8;
  --blue-400:      #5a9fd4;
  --blue-500:      #4a7fb5;
  --blue-glow:     rgba(90, 159, 212, 0.15);

  /* Tertiary — Purple */
  --purple-300:    #b090d0;
  --purple-400:    #9a7acc;
  --purple-500:    #7a5aaa;
  --purple-glow:   rgba(154, 122, 204, 0.15);

  /* Semantic */
  --text-primary:  #e0e8e8;
  --text-secondary:#9aacac;
  --text-muted:    #5a7070;
  --border:        #1a2828;
  --border-accent: var(--teal-border);
  --success:       var(--teal-400);
  --warning:       #d4a020;
  --warning-bg:    rgba(212, 160, 32, 0.1);
  --error:         #c45050;

  /* Glassmorphism */
  --glass-blur:    12px;
  --glass-border:  rgba(255, 255, 255, 0.05);

  /* Typography */
  --font-heading:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

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

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