/**
 * Theme Variables - Auto-generated from Admin Panel
 * Includes automatic contrast detection for accessibility
 * Last updated: 2026-05-01 15:31:55
 */

:root {
    /* ============================================
       PRIMARY COLORS (Brand Colors)
       ============================================ */
    
    /* Primary Color - AFECTA:
       - Botones principales (.btn-primary, .btn-buy)
       - Links en hover
       - Hero CTA buttons
       - Category icons en hover
       - Feature icons background
       - Product title hover color
       - Barra de búsqueda focus border
    */
    --primary-color: #f7bd41;
    --primary-color-dark: #c59734;
    --primary-color-light: #ffe24e;
    
    /* Secondary Color - AFECTA:
       - Header background (topbar + main)
       - Footer background principal
       - Navbar background
       - Dropdowns oscuros
    */
    --secondary-color: #ffffff;
    
    /* Dark Color - AFECTA:
       - Navbar background (si es diferente al secondary)
       - Footer "back to top" button
       - Social icons background
       - Modal headers oscuros
    */
    --dark-color: #000000;
    
    /* Accent Color - AFECTA:
       - Botón de búsqueda background
       - Newsletter button
       - Badges destacados
       - Card links hover color
       - Social icons hover
       - Cart badge background
    */
    --accent-color: #f7bd41;
    
    /* ============================================
       AUTOMATIC CONTRAST COLORS
       Calculados automáticamente basados en luminancia WCAG
       El texto/iconos serán blancos o negros según el fondo
       ============================================ */
    
    /* Contraste para secondary (header/footer text) */
    --secondary-contrast: #1a1a2e;
    
    /* Contraste para dark (navbar text) */
    --dark-contrast: #ffffff;
    
    /* Contraste para primary (button text) */
    --primary-contrast: #1a1a2e;
    
    /* Contraste para accent (search button, badges text) */
    --accent-contrast: #1a1a2e;
    
    /* Header/Footer specific auto-contrast */
    --header-text-auto: #1a1a2e;
    --header-text-muted-auto: rgba(0,0,0,0.6);
    --header-border-auto: rgba(0,0,0,0.15);
    
    /* Topbar/Navbar specific auto-contrast (based on dark-color) */
    --topbar-text-auto: #ffffff;
    --topbar-text-muted-auto: rgba(255,255,255,0.7);
    --topbar-border-auto: rgba(255,255,255,0.15);
    --navbar-text-auto: #ffffff;
    --navbar-icon-auto: #ffffff;
    
    /* Accent button text auto */
    --accent-btn-text: #1a1a2e;
    
    /* ============================================
       STATUS COLORS (Estados)
       ============================================ */
    
    /* Success Color - AFECTA:
       - Badges "Envío Gratis"
       - Offer tags
       - Stock alto indicator
       - Price savings text
       - Toast/alerts de éxito
    */
    --success-color: #27ae60;
    
    /* Warning Color - AFECTA:
       - Badges de advertencia
       - Stock bajo indicator
       - Alerts de precaución
    */
    --warning-color: #f39c12;
    
    /* Danger Color - AFECTA:
       - Badges de descuento (ej: -20%)
       - Stock agotado indicator
       - Botón remove/delete
       - Errors y alerts de peligro
    */
    --danger-color: #e74c3c;
    
    /* Info Color - AFECTA:
       - Badges informativos (ventas, shipping)
       - Links informativos
       - Tooltips de ayuda
    */
    --info-color: #3498db;
    
    /* Status Color Contrasts */
    --success-contrast: #ffffff;
    --warning-contrast: #ffffff;
    --danger-contrast: #ffffff;
    --info-contrast: #ffffff;
    
    /* RGB Variants (for rgba() backgrounds) */
    --primary-color-rgb: 247, 189, 65;
    --success-color-rgb: 39, 174, 96;
    --warning-color-rgb: 243, 156, 18;
    --danger-color-rgb: 231, 76, 60;
    --info-color-rgb: 52, 152, 219;
    
    /* ============================================
       NEUTRAL COLORS (Texto y Fondos)
       ============================================ */
    
    /* Text Primary - AFECTA:
       - Títulos de productos
       - Precios finales
       - Nombres de categorías
       - Texto principal de cards
       - Homepage card titles
       - Carousel titles
    */
    --text-primary: #333333;
    
    /* Text Secondary - AFECTA:
       - Subtítulos
       - Descripciones secundarias
       - Labels de formularios
    */
    --text-secondary: #7f8c8d;
    
    /* Text Muted - AFECTA:
       - Descripciones de productos
       - Placeholder de inputs
       - Texto deshabilitado
       - Cuotas en precios
       - Timestamps
    */
    --text-muted: #666666;
    
    /* Background Light - AFECTA:
       - Price section background
       - Input backgrounds
       - Secciones alternas
       - Qty selector background
       - Homepage wrapper background
    */
    --bg-light: #ffffff;
    --background-light: #ffffff;
    
    /* Background White - AFECTA:
       - Product cards background
       - Modal backgrounds
       - Dropdown backgrounds
       - Homepage cards
       - Carousel sections
    */
    --bg-white: #ffffff;
    --card-bg: #ffffff;
    
    /* Border Color - AFECTA:
       - Bordes de inputs
       - Separadores de cards
       - Dividers de menú
       - Bordes de tablas
    */
    --border-color: #e0e0e0;
    
    /* Typography */
    --font-primary: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-headings: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    
    /* Spacing & Effects */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    --box-shadow-hover: 0 8px 25px rgba(0,0,0,0.12);
    --transition-speed: 0.3s;
    
    /* Colores Sólidos (sin gradientes - configuración del usuario) */
    --gradient-primary: var(--primary-color);
    --gradient-primary-reverse: var(--primary-color);
    --gradient-secondary: var(--secondary-color);
    --gradient-accent: var(--accent-color);
    --gradient-success: var(--success-color);
    --gradient-warning: var(--warning-color);
    --gradient-danger: var(--danger-color);
    --gradient-info: var(--info-color);
    
    /* Bootstrap Variable Overrides (Neutralization of Electro Theme defaults) */
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-success: var(--success-color);
    --bs-info: var(--info-color);
    --bs-warning: var(--warning-color);
    --bs-danger: var(--danger-color);
    --bs-light: var(--bg-light);
    --bs-dark: var(--dark-color);
    --bs-white: var(--bg-white);
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-white);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color-dark);
    --bs-border-color: var(--border-color);
    
    /* Colores de Iconos y Enlaces */
    --icon-color: var(--primary-color);
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-dark);
    
    /* ============================================
       ADVANCED CUSTOMIZATION - GRANULAR CONTROL
       Empty values fall back to base colors
       ============================================ */
    
    /* Header/Footer Section Colors */
    --header-bg: #FFFFFF;
    --header-bg-alt: var(--dark-color);
    --navbar-bg: #FFFFFF;
    --topbar-bg: var(--dark-color);
    --footer-bg: #000000;
    --footer-text: #FFFFFF;
    --footer-link: var(--accent-color);
    
    /* Header/Topbar/Navbar Contrast Colors (auto-calculated) */
    --topbar-text: var(--dark-contrast);
    --topbar-text-auto: var(--dark-contrast);
    --topbar-text-muted-auto: rgba(255,255,255,0.7);
    --topbar-border-auto: rgba(255,255,255,0.1);
    --navbar-text: var(--dark-contrast);
    --navbar-text-auto: var(--dark-contrast);
    --navbar-icon-auto: var(--dark-contrast);
    --header-text: var(--secondary-contrast);
    --header-text-auto: var(--secondary-contrast);
    --header-border: rgba(255,255,255,0.1);
    --header-border-auto: rgba(255,255,255,0.1);
    --header-icon: var(--secondary-contrast);
    --header-accent: var(--accent-color);
    --header-accent-hover: var(--primary-color);
    --search-btn-bg: var(--accent-color);
    --search-btn-text: var(--accent-contrast);
    --search-btn-hover: var(--primary-color);
    
    /* Homepage Section Colors */
    --hero-bg: var(--secondary-color);
    --benefits-bg: var(--bg-white);
    --contact-bg: #333333;
    --shipping-bg: var(--primary-color);
    --products-bg: var(--bg-light);
    --categories-bg: var(--bg-white);
    
    /* Contact Section Auto-Contrast (calculated from contact-bg) */
    --contact-contrast: #ffffff;
    --contact-text-muted: rgba(255,255,255,0.5);
    --contact-border: rgba(255,255,255,0.2);
    --contact-input-bg: rgba(255,255,255,0.08);
    
    /* Footer Section Auto-Contrast (calculated from footer-bg) */
    --footer-contrast: #ffffff;
    --footer-text-muted: rgba(255,255,255,0.7);
    --footer-border: rgba(255,255,255,0.15);
    --footer-input-bg: rgba(255,255,255,0.1);
    
    /* Button Colors */
    --btn-primary-bg: var(--primary-color);
    --btn-secondary-bg: var(--secondary-color);
    --btn-outline-border: var(--primary-color);
    --btn-cta-bg: var(--accent-color);
    
    /* Badge Colors */
    --badge-sale: var(--danger-color);
    --badge-new: var(--success-color);
    --badge-featured: var(--primary-color);
    --badge-stock: var(--success-color);
    
    /* Card Colors */
    --card-bg: var(--bg-white);
    --card-border: var(--border-color);
    --card-hover-shadow: rgba(0,0,0,0.12);
    --card-header-bg: var(--bg-light);
    
    /* Inputs & Forms */
    --input-bg: #000000;
    --input-border: #000000;
    --input-focus: #000000;
    
    /* Overrides for Links */
    --link-color: #000000;
    --link-hover-color: #000000;
    
    /* Modals & Dropdowns */
    --modal-bg: var(--bg-white);
    --modal-header-bg: var(--bg-light);
    --dropdown-bg: var(--bg-white);
    --dropdown-hover: var(--bg-light);
    
    /* Tables & Navigation */
    --table-header-bg: var(--bg-light);
    --table-stripe-bg: rgba(0,0,0,0.02);
    --breadcrumb-bg: var(--bg-light);
    --pagination-active-bg: var(--primary-color);
    --tooltip-bg: var(--dark-color);
    --sidebar-bg: var(--bg-white);
    --sidebar-text: var(--text-primary);
    
    /* Layout & Spacing Overrides */
    --border-radius-sm: 4px;
    --border-radius-xl: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
    --transition-fast: 0.15s;
    --transition-slow: 0.5s;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --bg-light: #1a1a2e;
        --bg-white: #252530;
        --border-color: #404050;
    }
}