/* ==========================================================================
   FLORY PAPEL - SISTEMA PROFESIONAL DE VARIABLES Y COMPONENTES CSS
   Author: Senior Full Stack Architect
   Description: Definición de variables independientes por componente.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. BODY & CONTENIDO GENERAL
       ---------------------------------------------------------------------- */
    --body-bg: #f8f9fa;
    --body-text: #212529;
    --body-text-muted: #6c757d;
    --body-border: #e9ecef;
    --body-card-bg: #ffffff;
    --body-link: #ff6b8b;
    --body-link-hover: #ff4770;

    /* ----------------------------------------------------------------------
       2. HEADER & CABECERA
       ---------------------------------------------------------------------- */
    --header-bg: rgba(255, 255, 255, 0.92);
    --header-text: #212529;
    --header-border: rgba(0, 0, 0, 0.08);
    --header-icon: #212529;
    --header-icon-hover: #ff6b8b;
    --header-logo-text: #243beb;

    /* ----------------------------------------------------------------------
       3. MENÚ DE NAVEGACIÓN Y DROPDOWNS
       ---------------------------------------------------------------------- */
    --menu-bg: transparent;
    --menu-text: #212529;
    --menu-text-hover: #ff6b8b;
    --menu-active: #ff6b8b;
    --menu-border: transparent;
    --menu-icon: #212529;
    
    /* Dropdown Específico */
    --menu-dropdown-bg: rgba(255, 255, 255, 0.95);
    --menu-dropdown-text: #212529;
    --menu-dropdown-hover: #ff6b8b;
    --menu-dropdown-hover-bg: rgba(255, 107, 139, 0.08);
    --menu-dropdown-opacity: 0.95;
    --menu-dropdown-backdrop: blur(16px);
    --menu-dropdown-border: rgba(0, 0, 0, 0.08);
    --menu-dropdown-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* ----------------------------------------------------------------------
       4. FOOTER & PIE DE PÁGINA
       ---------------------------------------------------------------------- */
    --footer-bg: #0b0f19;
    --footer-text: #f1f3f5;
    --footer-title: #ffffff;
    --footer-link: #adb5bd;
    --footer-link-hover: #ff6b8b;
    --footer-border: rgba(255, 255, 255, 0.1);
    --footer-icon: #adb5bd;

    /* ----------------------------------------------------------------------
       5. PRODUCTOS & TARJETAS DE CATÁLOGO
       ---------------------------------------------------------------------- */
    --product-bg: #ffffff;
    --product-text: #212529;
    --product-title: #212529;
    --product-price: #243beb;
    --product-old-price: #6c757d;
    --product-border: #e9ecef;
    --product-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    --product-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.1);
    --product-badge: #ffb703;
    --product-badge-text: #000000;

    /* ----------------------------------------------------------------------
       6. BOTONES
       ---------------------------------------------------------------------- */
    --button-primary-bg: #ff6b8b;
    --button-primary-text: #ffffff;
    --button-primary-hover: #ff4770;
    
    --button-secondary-bg: #4ea8de;
    --button-secondary-text: #ffffff;
    --button-secondary-hover: #3a86ff;

    /* ----------------------------------------------------------------------
       7. CARRITO DE COMPRAS
       ---------------------------------------------------------------------- */
    --cart-bg: #ffffff;
    --cart-text: #212529;
    --cart-border: #e9ecef;
    --cart-total: #243beb;
    --cart-button: #25d366;
    --cart-button-hover: #128c7e;

    /* ----------------------------------------------------------------------
       8. FORMULARIOS & INPUTS
       ---------------------------------------------------------------------- */
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-focus: #ff6b8b;
    --input-placeholder: #6c757d;

    /* ----------------------------------------------------------------------
       9. REDES SOCIALES
       ---------------------------------------------------------------------- */
    --social-bg: rgba(0, 0, 0, 0.05);
    --social-text: #212529;
    --social-hover: #ff6b8b;
    --social-hover-bg: rgba(255, 107, 139, 0.15);
    --social-border: rgba(0, 0, 0, 0.1);
}