/* ===================================
   VARIABLES CSS - DESIGN SYSTEM
   =================================== */

:root {
    /* Colores Principales basados en #0a1320 */
    --primary: #0a1320;
    --primary-dark: #08111c;
    --primary-medium: #0c1525;
    --primary-light: #0e1729;
    --primary-lighter: #12202d;
    
    /* Colores de Acento - Mejorados para accesibilidad */
    --accent: #00e5ff;
    --accent-hover: #00b8d4;
    --accent-dark: #0097a7;
    --accent-glow: rgba(0, 229, 255, 0.3);
    --accent-soft: rgba(0, 229, 255, 0.15);
    
    /* Estados adicionales */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    
    /* Colores de Texto - Mejorados para accesibilidad WCAG AA */
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* Colores de Fondo - Solo variaciones del azul principal */
    --bg-primary: #0a1320;
    --bg-secondary: #0c1525;
    --bg-tertiary: #0e1729;
    --bg-hover: #12202d;
    --bg-light: #141e2b;
    
    /* Gradientes basados en #0a1320 */
    --gradient-primary: linear-gradient(135deg, #0a1320 0%, #12202d 100%);
    --gradient-secondary: linear-gradient(135deg, #0c1525 0%, #141e2b 100%);
    --gradient-accent: linear-gradient(135deg, #00d9ff 0%, #0099cc 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(0, 217, 255, 0.15) 0%, transparent 70%);
    
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 8px 32px rgba(0, 217, 255, 0.4);
    
    /* Bordes - Sutiles sobre el fondo azul */
    --border: rgba(180, 199, 231, 0.1);
    --border-light: rgba(180, 199, 231, 0.15);
    --border-medium: rgba(180, 199, 231, 0.2);
    --border-accent: rgba(0, 217, 255, 0.3);
    
    /* Espaciado Fluido con Clamp */
    --space-xs: clamp(0.25rem, 0.5vw, 0.375rem);
    --space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2.25rem);
    --space-xl: clamp(2rem, 4vw, 3rem);
    --space-2xl: clamp(3rem, 6vw, 4.5rem);
    --space-3xl: clamp(4rem, 8vw, 6rem);
    
    /* Tipografía Fluida con Clamp */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: clamp(0.625rem, 1.2vw, 0.75rem);
    --font-size-sm: clamp(0.75rem, 1.4vw, 0.875rem);
    --font-size-base: clamp(0.875rem, 1.6vw, 1rem);
    --font-size-lg: clamp(1rem, 1.8vw, 1.125rem);
    --font-size-xl: clamp(1.125rem, 2vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 2.5vw, 1.5rem);
    --font-size-3xl: clamp(1.5rem, 3vw, 1.875rem);
    --font-size-4xl: clamp(1.875rem, 4vw, 2.25rem);
    --font-size-5xl: clamp(2.25rem, 5vw, 3rem);
    
    /* Container Fluido */
    --container-xs: clamp(320px, 90vw, 480px);
    --container-sm: clamp(480px, 90vw, 640px);
    --container-md: clamp(640px, 90vw, 768px);
    --container-lg: clamp(768px, 90vw, 1024px);
    --container-xl: clamp(1024px, 90vw, 1280px);
    --container-2xl: clamp(1280px, 90vw, 1536px);
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Border Radius Fluido */
    --radius-sm: clamp(3px, 0.5vw, 4px);
    --radius: clamp(6px, 1vw, 8px);
    --radius-md: clamp(8px, 1.2vw, 12px);
    --radius-lg: clamp(12px, 1.5vw, 16px);
    --radius-xl: clamp(16px, 2vw, 20px);
    --radius-2xl: clamp(20px, 2.5vw, 24px);
    --radius-full: 9999px;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

/* ===================================
   THEME OVERRIDES
   =================================== */

/* Solo tema oscuro - sin modo claro */
[data-theme="dark"], 
body {
    --text-primary: #ffffff;
    --text-secondary: #b4c7e7;
    --text-muted: #7a8ba8;
    --bg-primary: #0a1320;
    --bg-secondary: #0c1525;
    --bg-tertiary: #0e1729;
    --bg-hover: #12202d;
    --bg-light: #141e2b;
}