/* CSS Custom Properties - Design System */
:root {
  /* Colors */
  --color-bg: #000000;
  --color-primary: #98f5e1;
  --color-accent-1: #1bc1a1;
  --color-accent-2: #4df0c2;
  --color-accent-3: #38ffe7;
  --color-error: #ff0055;
  
  /* Typography */
  --font-primary: 'Courier Prime', monospace;
  --font-display: 'Orbitron', monospace;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
  
  /* Breakpoints */
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Shadows */
  --shadow-glow: 0 0 30px var(--color-accent-3);
  --shadow-error: 0 0 30px var(--color-error);
  
  /* Z-index layers */
  --z-video-background: -15;     /* Video background (deepest layer) */
  --z-video-overlay: -12;        /* Video overlay */
  --z-background: -10;           /* Logo center (unchanged) */
  --z-overlay: -2;               /* Three.js background (unused) */
  --z-scanlines: -1;             /* Glitch overlay and background texts */
  --z-content: 1;                /* Main content */
  --z-modal-overlay: 999;        /* Modal overlays */
  --z-modal: 1000;               /* Modal content */
}