/* Variables CSS para estética ciberpunk - Ruichis Lab */
:root {
  /* Colores primarios ciberpunk */
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-purple: #8a2be2;
  --neon-green: #39ff14;
  --neon-blue: #0080ff;
  --neon-pink: #ff1493;
  
  /* Colores de fondo oscuros */
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2d2d2d;
  --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  --bg-hero: linear-gradient(45deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
  
  /* Colores de texto */
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-accent: #00ffff;
  --text-muted: #666666;
  
  /* Colores de acento */
  --accent-success: #39ff14;
  --accent-warning: #ffff00;
  --accent-danger: #ff073a;
  --accent-info: #00ffff;
  
  /* Tipografía ciberpunk */
  --font-primary: 'Orbitron', 'Courier New', monospace;
  --font-heading: 'Orbitron', 'Courier New', monospace;
  --font-mono: 'Fira Code', 'Courier New', monospace;
  --font-body: 'Roboto Mono', 'Courier New', monospace;
  
  /* Tamaños de fuente escalables */
  --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: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Sombras neón */
  --shadow-neon-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
  --shadow-neon-magenta: 0 0 20px rgba(255, 0, 255, 0.5);
  --shadow-neon-purple: 0 0 20px rgba(138, 43, 226, 0.5);
  --shadow-neon-green: 0 0 20px rgba(57, 255, 20, 0.5);
  --shadow-soft: 0 4px 20px rgba(0, 255, 255, 0.1);
  --shadow-hard: 0 8px 32px rgba(0, 255, 255, 0.3);
  
  /* Bordes */
  --border-radius-sm: 0.125rem;
  --border-radius-md: 0.25rem;
  --border-radius-lg: 0.375rem;
  --border-radius-xl: 0.5rem;
  
  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-glitch: 0.1s ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1050;
  --z-tooltip: 1070;
  
  /* Efectos especiales */
  --glitch-intensity: 2px;
  --scan-line-height: 1px;
  --neon-glow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
