/* ==========================================================================
   VARIABLES GLOBALES DE DISEÑO (Design System)
   Proyecto: Cachita E-commerce
   ========================================================================== */

:root {
    /* ==========================================
       1. COLORES GLOBALES (Fondo y Texto General)
       ========================================== */
    --bg-global: #000000;         /* Fondo negro principal del Index (Home) */
    --text-global: #fffefe;       /* Color de texto principal (blanco) */
    
    --bg-secondary: #2a2b2e;      /* [NUEVO] Fondo gris oscuro (Usado en Categorías y Checkout) */
    --bg-surface: #ffffff;        /* [NUEVO] Fondo blanco puro para formularios y tarjetas del checkout */

    /* ==========================================
       2. HEADER Y TOP BAR (Menú Superior)
       ========================================== */
    --bg-topbar: #fafafa;         /* Fondo de la tira de "Promociones nuevas" */
    --text-topbar: #000000;       /* Letra de la tira de promociones */
    
    --bg-header: #0D2A61;         /* Fondo del menú principal */
    --text-logo: #ffffff;         /* Color de la palabra "CACHITA" */
    --text-nav-link: #ffffff;     /* Letras del menú (Pescados, Fiambres) */
    --bg-nav-link-hover: #288aec; /* Fondo del botón del menú al pasar el mouse */
    --text-nav-link-hover: #ffffff;/* Letra del menú al pasar el mouse */
    --text-header-icons: #fdfdfd; /* Color del carrito y "Mi cuenta" */
    --text-header-icons-hover: #00A8E8; /* Color de íconos al pasar el mouse */

    /* ==========================================
       3. FOOTER (Pie de Página)
       ========================================== */
    --bg-footer: #080808;         /* Fondo gris oscuro del footer */
    --text-footer-heading: #ffffff;/* Títulos del footer (MENÚ, CONTACTO) */
    --text-footer-link: #e6e6e6;  /* Letras de los enlaces del footer */
    --text-footer-link-hover: #ffffff; /* Letras de los enlaces al pasar el mouse */
    --bg-footer-bottom: #000000;  /* Fondo de la tira de "Copyright" */
    --text-footer-bottom: #979797;/* Letra del Copyright */

    /* ==========================================
       4. TARJETAS DE PRODUCTO (Catálogo)
       ========================================== */
    --bg-card: #ffffff;           /* Fondo gris claro de cada tarjeta de producto */
    --border-card: #746f6ff4;     /* Línea del borde de la tarjeta */
    --text-card-title: #0D2A61;   /* Color del nombre del producto */
    --text-card-desc: #8f5151;    /* Color de la descripción corta */
    --text-card-price: #2589ed;   /* Color del Precio ($) en la tarjeta */

    /* ==========================================
       5. BOTONES Y FORMULARIOS (Checkout)
       ========================================== */
    --bg-btn-primary: #2589ed;    /* Fondo del botón general "Agregar al carrito" / GPS */
    --text-btn-primary: #ffffff;  /* Texto del botón general */
    --bg-btn-primary-hover: #2f52ff; /* Fondo del botón al presionarlo */
    
    --bg-btn-whatsapp: #25D366;   /* [NUEVO] Fondo verde WhatsApp para "Finalizar Pedido" */
    --bg-btn-whatsapp-hover: #128C7E; /* [NUEVO] Verde oscuro WhatsApp Hover */

    --border-input: #d9d9d9;      /* [NUEVO] Color del borde de los campos del formulario */
    --border-input-focus: #2878ff;/* [NUEVO] Borde celeste cuando haces click en un input */
    --bg-input-focus: rgba(40, 120, 255, 0.15); /* [NUEVO] Sombra celeste del input */
    
    --color-success: #388E3C;     /* Verde genérico para mensajes de éxito */
    --color-error: #e32c2b;       /* [ACTUALIZADO] Rojo para los errores del formulario */
    --bg-error-soft: #fff5f5;     /* [NUEVO] Fondo rojizo suave para campos con error */

    /* ==========================================
       6. TIPOGRAFÍA Y ESPACIADOS (No tocar)
       ========================================== */
    --font-family-base: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --spacing-xs: 0.25rem;  
    --spacing-sm: 0.5rem;   
    --spacing-md: 1rem;     
    --spacing-lg: 1.5rem;   
    --spacing-xl: 2rem;     
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;     /* [NUEVO] Bordes curvos para secciones grandes */
    --box-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --box-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --box-shadow-lg: 0 10px 30px rgba(0,0,0,0.15); /* [NUEVO] Sombra intensa para el checkout */
    --header-height: 110px;
    --container-max-width: 1200px;
    --transition-fast: 0.2s ease-in-out;
}