/* ============================================
   VARIABLES CSS - ELISAY CODE
   Todas las variables de diseño centralizadas
   ============================================ */

:root {
    /* ========== Colores Principales ========== */
    --bg-color: #0a0e27;
    --second-bg-color: #1a1f3a;
    --third-bg-color: #252b4a;
    --text-color: #ffffff;
    --text-secondary: #b8bcc8;
    --main-color: #00d9ff;
    --accent-color: #7b2cbf;
    
    /* ========== Gradientes ========== */
    --gradient-1: linear-gradient(135deg, #00d9ff 0%, #7b2cbf 100%);
    --gradient-2: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-bg: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
    
    /* ========== Sombras ========== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.4);
    --glow: 0 0 20px rgba(0, 217, 255, 0.5);
    --glow-strong: 0 0 30px rgba(0, 217, 255, 0.7);
    
    /* ========== Espaciado ========== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-xxl: 8rem;
    
    /* ========== Transiciones ========== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s ease;
    
    /* ========== Bordes Redondeados ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 50%;
    
    /* ========== Tipografía ========== */
    --font-family: 'Poppins', sans-serif;
    --font-size-xs: 1.2rem;
    --font-size-sm: 1.4rem;
    --font-size-base: 1.6rem;
    --font-size-lg: 1.8rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.4rem;
    --font-size-3xl: 3.2rem;
    --font-size-4xl: 4.5rem;
    --font-size-5xl: 5.6rem;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* ========== Z-Index ========== */
    --z-back: -1;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
    
    /* ========== Dimensiones ========== */
    --header-height: 8rem;
    --max-width: 1400px;
    --max-width-content: 1200px;
    
    /* ========== Animaciones ========== */
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.6s;
    --animation-duration-slow: 1s;
}

/* ========== Variables para Dark/Light Mode (Opcional) ========== */
[data-theme="light"] {
    --bg-color: #ffffff;
    --second-bg-color: #f8f9fa;
    --third-bg-color: #e9ecef;
    --text-color: #0a0e27;
    --text-secondary: #495057;
}