/* ===== SISTEMA DE DISEÑO WEBXpert - Variables CSS Mejoradas ===== */
/* Julio Alberto Pintos - WebXpert Design System v2.0 */

:root {
  /* ===== PALETA DE COLORES PRINCIPAL ===== */
  --color-primary: #4e23fc; /* Violeta principal - más profesional */
  --color-primary-dark: #3a1aff; /* Violeta oscuro para hover */
  --color-primary-light: #6c3cff; /* Violeta claro para acentos */
  --color-secondary: #ff5722; /* Naranja secundario - contraste elegante */
  --color-secondary-dark: #e64a19; /* Naranja oscuro */
  --color-accent: #00d4ff; /* Azul acento - moderno y tecnológico */
  
  /* ===== JERARQUÍA DE GRISES ===== */
  --color-bg: #ffffff; /* Fondo principal - limpio y profesional */
  --color-bg-secondary: #f8f9fa; /* Fondo secundario - sutil */
  --color-bg-dark: #1a1a2e; /* Fondo oscuro para header/footer */
  --color-bg-card: #ffffff; /* Fondo de cards - pureza visual */
  --color-bg-overlay: rgba(26, 26, 46, 0.95); /* Overlay elegante */
  
  /* ===== TIPOGRAFÍA Y TEXTOS ===== */
  --color-text: #2c3e50; /* Texto principal - legible y profesional */
  --color-text-dark: #1a1a2e; /* Texto oscuro para contraste */
  --color-text-secondary: #6c757d; /* Texto secundario - jerarquía */
  --color-text-light: #ffffff; /* Texto claro sobre fondos oscuros */
  --color-text-muted: #95a5a6; /* Texto atenuado - información secundaria */
  
  /* ===== ESTADOS Y FEEDBACK ===== */
  --color-success: #27ae60; /* Verde éxito */
  --color-warning: #f39c12; /* Amarillo advertencia */
  --color-error: #e74c3c; /* Rojo error */
  --color-info: #3498db; /* Azul información */
  
  /* ===== BORDES Y SEPARADORES ===== */
  --color-border: #e9ecef; /* Borde sutil */
  --color-border-light: #f1f3f4; /* Borde muy sutil */
  --color-border-dark: #dee2e6; /* Borde más visible */
  --color-border-primary: rgba(78, 35, 252, 0.2); /* Borde con color primario */
  
  /* ===== SOMBRAS Y PROFUNDIDAD ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra media */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Sombra grande */
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* Sombra extra grande */
  --shadow-primary: 0 4px 12px rgba(78, 35, 252, 0.15); /* Sombra con color primario */
  
  /* ===== TIPOGRAFÍA ===== */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* ===== ESCALA TIPOGRÁFICA ===== */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  
  /* ===== ESPACIADO SISTEMÁTICO ===== */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  
  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px; /* Círculo perfecto */
  
  /* ===== TRANSICIONES ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== Z-INDEX ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===== ACCESIBILIDAD ===== */
  --focus-ring: 0 0 0 3px rgba(78, 35, 252, 0.3);
  --focus-ring-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --focus-ring-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
  
  /* ===== CONTAINERS ===== */
  --container-max-width: 1200px;
  --container-padding: 1rem;
  
  /* ===== BREAKPOINTS ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ===== MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f23;
    --color-bg-secondary: #1a1a2e;
    --color-bg-dark: #0a0a1a;
    --color-bg-card: #1a1a2e;
    --color-text: #e2e8f0;
    --color-text-dark: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-border: #334155;
    --color-border-light: #475569;
    --color-border-dark: #1e293b;
  }
}

/* ===== UTILIDADES DE ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
    --transition-bounce: 0s;
  }
}