/*
 * RuMex Store - Sistema de Colores Avanzado
 * 
 * CARACTERÍSTICAS:
 * ✅ CSS Custom Properties con fallbacks
 * ✅ Tokens semánticos (text, bg, border, etc.)
 * ✅ Dark mode automático (prefers-color-scheme)
 * ✅ Escalas de color accesibles (WCAG AAA)
 * ✅ Estados interactivos (hover, focus, active, disabled)
 * ✅ Temas personalizables
 * ✅ Gradientes optimizados
 * ✅ Overlays y transparencias
 * 
 * Uso: Las variables se pueden sobrescribir dinámicamente
 * con JavaScript o personalizar por sección/componente.
 */

/* ===============================================
   1. PALETA DE COLORES BASE
   =============================================== */

:root {
  /* ===== PRIMARIOS ===== */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;  /* Base */
  --color-primary-600: #2563eb;  /* Principal */
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
  
  /* ===== SECUNDARIOS (Verde) ===== */
  --color-secondary-50: #ecfdf5;
  --color-secondary-100: #d1fae5;
  --color-secondary-200: #a7f3d0;
  --color-secondary-300: #6ee7b7;
  --color-secondary-400: #34d399;
  --color-secondary-500: #10b981;
  --color-secondary-600: #059669;  /* Base */
  --color-secondary-700: #047857;
  --color-secondary-800: #065f46;
  --color-secondary-900: #064e3b;
  --color-secondary-950: #022c22;
  
  /* ===== ACENTO (Rojo/Naranja) ===== */
  --color-accent-50: #fef2f2;
  --color-accent-100: #fee2e2;
  --color-accent-200: #fecaca;
  --color-accent-300: #fca5a5;
  --color-accent-400: #f87171;
  --color-accent-500: #ef4444;
  --color-accent-600: #dc2626;  /* Base */
  --color-accent-700: #b91c1c;
  --color-accent-800: #991b1b;
  --color-accent-900: #7f1d1d;
  --color-accent-950: #450a0a;
  
  /* ===== NEUTRALES (Grises) ===== */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;
  
  /* ===== COLORES SEMÁNTICOS ===== */
  --color-success-light: #d1fae5;
  --color-success: #059669;
  --color-success-dark: #047857;
  
  --color-warning-light: #fef3c7;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  
  --color-error-light: #fee2e2;
  --color-error: #dc2626;
  --color-error-dark: #b91c1c;
  
  --color-info-light: #dbeafe;
  --color-info: #3b82f6;
  --color-info-dark: #1d4ed8;
}

/* ===============================================
   2. TOKENS SEMÁNTICOS - Light Mode (Default)
   =============================================== */

:root {
  /* ===== TEXTO ===== */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-400);
  --text-inverse: #ffffff;
  --text-link: var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);
  
  /* ===== FONDOS ===== */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-neutral-50);
  --bg-tertiary: var(--color-neutral-100);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-disabled: var(--color-neutral-200);
  
  /* ===== BORDES ===== */
  --border-primary: var(--color-neutral-200);
  --border-secondary: var(--color-neutral-300);
  --border-focus: var(--color-primary-600);
  --border-error: var(--color-error);
  --border-success: var(--color-success);
  
  /* ===== SOMBRAS (con color) ===== */
  --shadow-color-sm: rgba(0, 0, 0, 0.05);
  --shadow-color-md: rgba(0, 0, 0, 0.1);
  --shadow-color-lg: rgba(0, 0, 0, 0.15);
  --shadow-color-xl: rgba(0, 0, 0, 0.2);
  
  /* ===== GRADIENTES ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 50%, var(--color-primary-400) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-500) 50%, var(--color-secondary-400) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent-600) 0%, var(--color-accent-500) 50%, var(--color-accent-400) 100%);
  --gradient-hero: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  --gradient-cta: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  
  /* ===== OVERLAYS ===== */
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-primary: rgba(37, 99, 235, 0.1);
  --overlay-secondary: rgba(5, 150, 105, 0.1);
  
  /* ===== ESTADOS INTERACTIVOS ===== */
  --hover-overlay: rgba(0, 0, 0, 0.04);
  --active-overlay: rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  
  /* ===== COMPONENTES ESPECÍFICOS ===== */
  --btn-primary-bg: var(--color-primary-600);
  --btn-primary-bg-hover: var(--color-primary-700);
  --btn-primary-text: #ffffff;
  
  --btn-secondary-bg: var(--color-secondary-600);
  --btn-secondary-bg-hover: var(--color-secondary-700);
  --btn-secondary-text: #ffffff;
  
  --card-bg: #ffffff;
  --card-border: var(--border-primary);
  --card-shadow: 0 4px 6px -1px var(--shadow-color-md);
  
  --input-bg: #ffffff;
  --input-border: var(--border-primary);
  --input-border-focus: var(--border-focus);
  --input-text: var(--text-primary);
}

/* ===============================================
   3. DARK MODE - Auto (prefers-color-scheme)
   =============================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* ===== TEXTO ===== */
    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-300);
    --text-tertiary: var(--color-neutral-400);
    --text-disabled: var(--color-neutral-600);
    --text-inverse: var(--color-neutral-900);
    --text-link: var(--color-primary-400);
    --text-link-hover: var(--color-primary-300);
    
    /* ===== FONDOS ===== */
    --bg-primary: var(--color-neutral-900);
    --bg-secondary: var(--color-neutral-800);
    --bg-tertiary: var(--color-neutral-700);
    --bg-elevated: var(--color-neutral-800);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-disabled: var(--color-neutral-700);
    
    /* ===== BORDES ===== */
    --border-primary: var(--color-neutral-700);
    --border-secondary: var(--color-neutral-600);
    --border-focus: var(--color-primary-500);
    --border-error: var(--color-error-400);
    --border-success: var(--color-success-400);
    
    /* ===== SOMBRAS (ajustadas para dark) ===== */
    --shadow-color-sm: rgba(0, 0, 0, 0.3);
    --shadow-color-md: rgba(0, 0, 0, 0.4);
    --shadow-color-lg: rgba(0, 0, 0, 0.5);
    --shadow-color-xl: rgba(0, 0, 0, 0.6);
    
    /* ===== GRADIENTES (ajustados) ===== */
    --gradient-hero: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
    --gradient-cta: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    
    /* ===== OVERLAYS ===== */
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-primary: rgba(59, 130, 246, 0.15);
    --overlay-secondary: rgba(16, 185, 129, 0.15);
    
    /* ===== ESTADOS ===== */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
    
    /* ===== COMPONENTES ===== */
    --btn-primary-bg: var(--color-primary-600);
    --btn-primary-bg-hover: var(--color-primary-500);
    
    --card-bg: var(--color-neutral-800);
    --card-border: var(--color-neutral-700);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    
    --input-bg: var(--color-neutral-800);
    --input-border: var(--color-neutral-700);
    --input-border-focus: var(--color-primary-500);
  }
}

/* ===============================================
   4. TEMA MANUAL DARK (clase .dark-mode)
   =============================================== */

.dark-mode {
  /* Mismo esquema que prefers-color-scheme: dark */
  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-tertiary: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-600);
  --text-inverse: var(--color-neutral-900);
  --text-link: var(--color-primary-400);
  --text-link-hover: var(--color-primary-300);
  
  --bg-primary: var(--color-neutral-900);
  --bg-secondary: var(--color-neutral-800);
  --bg-tertiary: var(--color-neutral-700);
  --bg-elevated: var(--color-neutral-800);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-disabled: var(--color-neutral-700);
  
  --border-primary: var(--color-neutral-700);
  --border-secondary: var(--color-neutral-600);
  --border-focus: var(--color-primary-500);
  
  --shadow-color-sm: rgba(0, 0, 0, 0.3);
  --shadow-color-md: rgba(0, 0, 0, 0.4);
  --shadow-color-lg: rgba(0, 0, 0, 0.5);
  --shadow-color-xl: rgba(0, 0, 0, 0.6);
  
  --card-bg: var(--color-neutral-800);
  --card-border: var(--color-neutral-700);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* ===============================================
   5. VARIABLES LEGACY (Compatibilidad)
   =============================================== */

:root {
  /* Mantener compatibilidad con style.css original */
  --rumex-primary: var(--color-primary-600);
  --rumex-primary-dark: var(--color-primary-700);
  --rumex-primary-light: var(--color-primary-400);
  
  --rumex-secondary: var(--color-secondary-600);
  --rumex-secondary-dark: var(--color-secondary-700);
  --rumex-secondary-light: var(--color-secondary-400);
  
  --rumex-accent: var(--color-accent-600);
  --rumex-accent-dark: var(--color-accent-700);
  --rumex-accent-light: var(--color-accent-400);
  
  --rumex-dark: var(--color-neutral-800);
  --rumex-gray: var(--color-neutral-500);
  --rumex-light: var(--color-neutral-50);
  --rumex-white: #ffffff;
}

/* ===============================================
   6. COLORES PARA WOOCOMMERCE
   =============================================== */

:root {
  /* Botones de productos */
  --wc-primary: var(--color-primary-600);
  --wc-primary-hover: var(--color-primary-700);
  
  /* Precio */
  --wc-price-color: var(--color-neutral-900);
  --wc-price-sale: var(--color-error);
  
  /* Rating */
  --wc-star-color: #fbbf24;
  --wc-star-empty: var(--color-neutral-300);
  
  /* Badges */
  --wc-badge-sale-bg: var(--color-error);
  --wc-badge-sale-text: #ffffff;
  --wc-badge-new-bg: var(--color-success);
  --wc-badge-new-text: #ffffff;
  
  /* Stock */
  --wc-in-stock: var(--color-success);
  --wc-out-stock: var(--color-error);
  --wc-on-backorder: var(--color-warning);
}

/* Dark mode para WooCommerce */
@media (prefers-color-scheme: dark) {
  :root {
    --wc-price-color: var(--color-neutral-50);
    --wc-star-empty: var(--color-neutral-600);
  }
}

/* ===============================================
   7. UTILIDADES DE COLOR
   =============================================== */

/* Clases de texto */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-white { color: #ffffff !important; }

/* Clases de fondo */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-success { background-color: var(--color-success-light) !important; }
.bg-warning { background-color: var(--color-warning-light) !important; }
.bg-error { background-color: var(--color-error-light) !important; }

/* Clases de borde */
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-focus { border-color: var(--border-focus) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-error { border-color: var(--color-error) !important; }

/* ===============================================
   8. GRADIENTES COMO CLASES
   =============================================== */

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-secondary {
  background: var(--gradient-secondary);
}

.gradient-accent {
  background: var(--gradient-accent);
}

.gradient-hero {
  background: var(--gradient-hero);
}

.gradient-cta {
  background: var(--gradient-cta);
}

/* Gradient text (experimental) */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===============================================
   9. OVERLAYS & MASKS
   =============================================== */

.overlay-light {
  background-color: var(--overlay-light);
}

.overlay-dark {
  background-color: var(--overlay-dark);
}

.overlay-primary {
  background-color: var(--overlay-primary);
}

/* ===============================================
   10. ACCESIBILIDAD - Contraste alto
   =============================================== */

@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #1f2937;
    --bg-primary: #ffffff;
    --border-primary: #000000;
    --border-secondary: #374151;
    
    /* Incrementar contraste de botones */
    --btn-primary-bg: #1e40af;
    --btn-secondary-bg: #047857;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --text-primary: #ffffff;
      --text-secondary: #e5e7eb;
      --bg-primary: #000000;
      --border-primary: #ffffff;
    }
  }
}

/* ===============================================
   11. TOKENS DE ESPACIADO (relacionados con color)
   =============================================== */

:root {
  /* Gaps y separadores con color */
  --divider-color: var(--border-primary);
  --divider-thickness: 1px;
  
  /* Focus rings personalizables */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--border-focus);
}

/* ===============================================
   12. ANIMACIONES DE COLOR
   =============================================== */

/* Fade in con color */
@keyframes fadeInColor {
  from {
    opacity: 0;
    background-color: var(--bg-tertiary);
  }
  to {
    opacity: 1;
    background-color: var(--bg-primary);
  }
}

/* Pulse de borde (útil para loading) */
@keyframes pulseBorder {
  0%, 100% {
    border-color: var(--border-primary);
  }
  50% {
    border-color: var(--color-primary-400);
  }
}

/* Aplicar a elementos con clase */
.animate-fade-color {
  animation: fadeInColor 0.3s ease-in-out;
}

.animate-pulse-border {
  animation: pulseBorder 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===============================================
   13. MODO DE IMPRESIÓN
   =============================================== */

@media print {
  :root {
    /* Forzar colores para impresión */
    --text-primary: #000000;
    --text-secondary: #374151;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --border-primary: #000000;
    
    /* Remover gradientes */
    --gradient-hero: #2563eb;
    --gradient-cta: #2563eb;
  }
  
  /* Remover sombras */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ===============================================
   FIN - Sistema de Colores RuMex Store
   =============================================== */