/* ============================================================
   VARIABLES CSS — Comidas Rápidas Emanuel
   Paleta estilo KFC integrada con identidad Emanuel
   ============================================================ */

:root {
    /* ── Paleta principal — blanco dominante + negro estructural + rojo acento ── */
    --fondo:             #FFFFFF;  /* blanco puro, dominante */
    --fondo-alt:         #F7F7F7;  /* gris muy claro para alternar */
    --granate:           #1A1A1A;  /* negro estructural — header/footer/botones secundarios */
    --granate-claro:     #2B2B2B;
    --rojo:              #E4032E;  /* rojo vivo estilo KFC */
    --rojo-oscuro:       #C2022A;
    --amarillo:          #F5B700;  /* acento propio Emanuel */
    --amarillo-oscuro:   #D89E00;

    /* ── Neutros ── */
    --texto:             #1A1A1A;
    --texto-suave:       #555555;
    --texto-tenue:       #8A8A8A;
    --blanco:            #FFFFFF;
    --borde:             #E8E8E8;
    --borde-suave:       #F2F2F2;
    --gris-fondo:        #F0F0F0;

    /* ── Estados ── */
    --color-exito:       #25A55A;
    --color-error:       #E4032E;
    --color-alerta:      #F5B700;
    --color-info:        #2980B9;
    --whatsapp:          #25D366;
    --whatsapp-oscuro:   #1DA851;

    /* ── Estados de pedido ── */
    --estado-pendiente:  #F5B700;
    --estado-preparando: #E67E22;
    --estado-listo:      #25A55A;
    --estado-entregado:  #95A5A6;
    --estado-cancelado:  #E4032E;

    /* ── Tipografías ── */
    --fuente-titulo:     'Bebas Neue', Impact, sans-serif;
    --fuente-marcador:   'Permanent Marker', cursive;
    --fuente-condensada: 'Barlow Condensed', Arial Narrow, sans-serif;
    --fuente-precio:     'Barlow Condensed', sans-serif;
    --fuente-cuerpo:     'Nunito', Arial, sans-serif;

    /* ── Tamaños ── */
    --texto-xs:   0.75rem;
    --texto-sm:   0.875rem;
    --texto-base: 1rem;
    --texto-md:   1.125rem;
    --texto-lg:   1.25rem;
    --texto-xl:   1.5rem;
    --texto-2xl:  2rem;
    --texto-3xl:  2.5rem;
    --texto-4xl:  3rem;

    /* ── Espaciado ── */
    --espacio-xs:  0.25rem;
    --espacio-sm:  0.5rem;
    --espacio-md:  1rem;
    --espacio-lg:  1.5rem;
    --espacio-xl:  2rem;
    --espacio-2xl: 3rem;
    --espacio-3xl: 4rem;

    /* ── Bordes ── */
    --radio-sm:   4px;
    --radio-md:   8px;
    --radio-lg:   12px;
    --radio-xl:   20px;
    --radio-full: 9999px;

    /* ── Sombras ── */
    --sombra-sm:   0 2px 6px rgba(0,0,0,0.06);
    --sombra-md:   0 4px 14px rgba(0,0,0,0.10);
    --sombra-lg:   0 8px 28px rgba(0,0,0,0.14);
    --sombra-roja: 0 4px 16px rgba(228,3,46,0.30);

    /* ── Transiciones ── */
    --transicion-rapida: 0.15s ease;
    --transicion-normal: 0.3s ease;
    --transicion-lenta:  0.5s ease;

    /* ── Layout ── */
    --ancho-maximo:  1100px;
    --altura-header: 64px;

    /* ── Z-index ── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* ── Ajuste: tonos adicionales estilo KFC real ── */
:root {
    --hueso:           #F5F0E6;  /* footer color hueso/bone */
    --hueso-borde:     #E8DFCF;
    --rojo-oscuro-bg:  #6E0A1E;  /* rojo profundo para hero — no negro */
}

/* ── Ajuste: tonos adicionales estilo KFC real ── */
:root {
    --hueso:           #F5F0E6;  /* footer color hueso/bone */
    --hueso-borde:     #E8DFCF;
    --rojo-oscuro-bg:  #6E0A1E;  /* rojo profundo para hero — no negro */
}