/* ==========================================================================
   variables.css
   --------------------------------------------------------------------------
   ÚNICO lugar donde se define la identidad visual de Sebita Drinks.
   Para cambiar colores, tipografías o espaciados, edita SOLO este archivo.
   Ningún otro archivo CSS debe contener colores o medidas "sueltas".
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     1. COLORES DE MARCA
     ------------------------------------------------------------------------ */
  --color-principal:        #0B0B0C;  /* Negro: cabecera, banner, pie, botones y textos */
  --color-principal-claro:  #1F1F22;  /* Negro suave: fila de categorías y hover */
  --color-acento:           #EFB810;  /* Amarillo del logo: solo detalles y llamadas a la acción */
  --color-acento-oscuro:    #C99A00;  /* Hover del amarillo */
  --color-fondo:            #FFFFF5;  /* Crema: fondo general de la web */

  /* ------------------------------------------------------------------------
     2. COLORES DE OFERTA
     El rojo puro (#FF0000) se usa en etiquetas grandes con texto blanco.
     Para precios en texto pequeño usamos la versión oscura (mejor contraste).
     ------------------------------------------------------------------------ */
  --color-oferta:           #FF0000;
  --color-oferta-oscuro:    #C40000;

  /* ------------------------------------------------------------------------
     3. COLORES DE TEXTO Y SUPERFICIES
     ------------------------------------------------------------------------ */
  --color-texto:            #0B0B0C;  /* Texto principal */
  --color-texto-suave:      #55555B;  /* Texto secundario */
  --color-texto-invertido:  #FFFFF5;  /* Texto sobre fondos oscuros */
  --color-superficie:       #FFFFFF;  /* Tarjetas y formularios */
  --color-borde:            #E3E1D2;  /* Líneas y bordes suaves */
  --color-borde-oscuro:     #3A3A3F;  /* Bordes sobre fondos negros */
  --color-foco:             #0B0B0C;  /* Contorno de foco (teclado) */

  /* ------------------------------------------------------------------------
     4. COLORES DE ESTADO (confirmaciones y avisos)
     ------------------------------------------------------------------------ */
  --color-exito:            #1E7B34;
  --color-exito-fondo:      #E4F4E8;
  --color-aviso-fondo:      #FFF3CC;

  /* ------------------------------------------------------------------------
     4b. OTROS COLORES FIJOS
     ------------------------------------------------------------------------ */
  --color-blanco:           #FFFFFF;
  --color-whatsapp:         #1E7B34;  /* Verde oscuro: contraste correcto con texto blanco */
  --color-whatsapp-oscuro:  #17612A;
  --color-resalte:          #FBEBB5;  /* Amarillo suave: fila resaltada del buscador */

  /* ------------------------------------------------------------------------
     5. TIPOGRAFÍA
     Títulos: Barlow Condensed (se carga desde Google Fonts en el <head> de
     cada página). Si no carga, se usa una fuente condensada del sistema.
     ------------------------------------------------------------------------ */
  --fuente-titulos: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "DejaVu Sans Condensed", Impact, sans-serif;
  --fuente-texto:   system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --texto-xs:   0.8125rem;  /* 13 px */
  --texto-sm:   0.9375rem;  /* 15 px */
  --texto-base: 1rem;       /* 16 px */
  --texto-lg:   1.125rem;   /* 18 px */
  --texto-xl:   1.625rem;   /* 26 px */
  --texto-2xl:  2.25rem;    /* 36 px */
  --texto-3xl:  3.25rem;    /* 52 px */
  --texto-precio: 2rem;     /* 32 px: precios destacados */

  --peso-normal: 400;
  --peso-medio:  600;
  --peso-fuerte: 700;

  --interlineado: 1.5;

  /* ------------------------------------------------------------------------
     6. ESPACIADOS (escala de 4 px)
     ------------------------------------------------------------------------ */
  --espacio-1: 0.25rem;  /*  4 px */
  --espacio-2: 0.5rem;   /*  8 px */
  --espacio-3: 0.75rem;  /* 12 px */
  --espacio-4: 1rem;     /* 16 px */
  --espacio-5: 1.5rem;   /* 24 px */
  --espacio-6: 2rem;     /* 32 px */
  --espacio-7: 3rem;     /* 48 px */
  --espacio-8: 4rem;     /* 64 px */

  /* ------------------------------------------------------------------------
     7. FORMAS Y SOMBRAS
     ------------------------------------------------------------------------ */
  --radio-sm: 0.125rem;
  --radio-md: 0.25rem;
  --radio-lg: 0.5rem;
  --radio-pildora: 999px;

  --sombra-suave: 0 2px 8px rgba(10, 17, 40, 0.08);
  --sombra-media: 0 6px 18px rgba(10, 17, 40, 0.14);

  /* ------------------------------------------------------------------------
     8. LAYOUT
     ------------------------------------------------------------------------ */
  --ancho-contenido: 72rem;   /* Ancho máximo del contenido (1152 px) */
  --alto-boton:      3rem;    /* 48 px: cómodo para tocar en móvil */
  --alto-cabecera:   4rem;

  /* ------------------------------------------------------------------------
     9. PUNTOS DE QUIEBRE (referencia, no se pueden usar dentro de @media)
        Tableta:     48em  (768 px)
        Computador:  64em  (1024 px)
     ------------------------------------------------------------------------ */

  /* ------------------------------------------------------------------------
     10. TRANSICIONES
     ------------------------------------------------------------------------ */
  --transicion: 0.2s ease;
}