/* ============================================================
   ESSENTIAL 3AT
   Sistema visual central
   Archivo: variables.css
   ============================================================ */

:root {

    /* ==========================================================
       IDENTIDAD DE MARCA
       ========================================================== */

    --color-brand-primary: #2f6b4f;
    --color-brand-primary-dark: #24543e;
    --color-brand-primary-light: #eaf4ee;

    --color-brand-secondary: #b88a44;
    --color-brand-secondary-light: #f6efe3;


    /* ==========================================================
       COLORES GENERALES
       ========================================================== */

    --color-white: #ffffff;
    --color-black: #111111;

    --color-background: #fafaf7;
    --color-surface: #ffffff;
    --color-surface-soft: #f3f5f1;

    --color-text-primary: #202520;
    --color-text-secondary: #626a63;
    --color-text-muted: #8a918b;

    --color-border: #e1e6e1;
    --color-border-light: #edf0ed;


    /* ==========================================================
       ESTADOS
       ========================================================== */

    --color-success: #2e7d4f;
    --color-warning: #c58a22;
    --color-danger: #c94b4b;
    --color-info: #3978a8;


    /* ==========================================================
       TIPOGRAFÍA
       ========================================================== */

    --font-family-base:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-heading:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;


    /* ==========================================================
       TAMAÑOS DE TEXTO
       ========================================================== */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;

    --font-size-hero: clamp(
        2.25rem,
        5vw,
        4.5rem
    );


    /* ==========================================================
       PESOS TIPOGRÁFICOS
       ========================================================== */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* ==========================================================
       ALTURA DE LÍNEA
       ========================================================== */

    --line-height-tight: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;


    /* ==========================================================
       SISTEMA DE ESPACIADO
       ========================================================== */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    /* ==========================================================
       CONTENEDORES
       ========================================================== */

    --container-max-width: 1200px;
    --container-padding: 1.25rem;


    /* ==========================================================
       BORDES Y RADIOS
       ========================================================== */

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;


    /* ==========================================================
       SOMBRAS
       ========================================================== */

    --shadow-sm:
        0 1px 3px rgba(0, 0, 0, 0.06);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 16px 40px rgba(0, 0, 0, 0.10);


    /* ==========================================================
       TRANSICIONES
       ========================================================== */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;


    /* ==========================================================
       Z-INDEX
       ========================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;


    /* ==========================================================
       HEADER
       ========================================================== */

    --header-height: 72px;


    /* ==========================================================
       PRODUCTOS
       ========================================================== */

    --product-image-ratio: 1 / 1;


    /* ==========================================================
       BUSCADOR
       ========================================================== */

    --search-height: 52px;

    --search-max-width: 900px;

    --filter-chip-height: 40px;


    /* ==========================================================
       TARJETAS DE CONTENIDO
       ========================================================== */

    --card-padding: 1.5rem;

    --card-gap: 1.5rem;


    /* ==========================================================
       CARRITO
       ========================================================== */

    --cart-drawer-width: 440px;


    /* ==========================================================
       RESPONSIVE
       ========================================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}