/* ==========================================================================
   variables.css — Sistema de diseño de Mexa Flavor Drinks
   Todos los colores, tipografías, medidas y tiempos viven aquí.
   Cambiar un valor aquí lo cambia en todo el sitio.
   ========================================================================== */

:root {
  /* ---------- Paleta corporativa ---------- */
  --c-negro:            #101012;
  --c-negro-suave:      #1A1A1E;
  --c-marfil:           #F6F1E9;
  --c-marfil-claro:     #FBF8F3;
  --c-blanco:           #FFFFFF;
  --c-agave:            #657C68;
  --c-agave-oscuro:     #4E6151;
  --c-agave-claro:      #97A899;
  --c-coral:            #F45145;
  --c-coral-oscuro:     #C93A30;
  --c-rosa:             #F6D5D1;
  --c-gris:             #56565A;
  --c-gris-claro:       #8C8C92;
  --c-linea:            #DDD6CA;
  --c-linea-oscura:     rgba(246, 241, 233, 0.18);

  /* ---------- Roles semánticos ---------- */
  --fondo:              var(--c-marfil);
  --fondo-alt:          var(--c-marfil-claro);
  --texto:              var(--c-negro);
  --texto-suave:        var(--c-gris);
  --acento:             var(--c-agave);
  --acento-calido:      var(--c-coral);
  /* Versiones para texto pequeño: garantizan contraste AA sobre el fondo en uso */
  --acento-texto:       var(--c-agave-oscuro);
  --coral-texto:        #B8342B;

  /* ---------- Acentos de producto ----------
     Muestreados de las fotografías de producto disponibles.
     Se usan sólo como detalle gráfico, nunca como fondo de texto largo. */
  --p-jamaica:          #911322;
  --p-granada:          #E22A1E;
  --p-fresa:            #E2544F;
  --p-carajillo:        #33190C;
  --p-spicy-mango:      #E8A012;
  --p-margarita:        #B6C06A;
  --p-mx-shots:         #D8342B;
  --p-coco:             #C9B993;
  --p-hierbabuena:      #7E8F79;

  /* ---------- Tipografía ---------- */
  --f-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
               Palatino, "Times New Roman", Georgia, serif;
  --f-texto:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida — nunca por debajo de tamaños cómodos de lectura */
  --t-hero:     clamp(2.75rem, 1.4rem + 6.2vw, 6.5rem);
  --t-h1:       clamp(2.35rem, 1.3rem + 4.6vw, 4.75rem);
  --t-h2:       clamp(1.95rem, 1.25rem + 3vw, 3.4rem);
  --t-h3:       clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  --t-h4:       clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-cuerpo-g: clamp(1.075rem, 1rem + 0.42vw, 1.3rem);
  --t-cuerpo:   clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --t-chico:    clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --t-eyebrow:  0.8125rem;

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

  --interlinea-titulo: 1.06;
  --interlinea-texto:  1.62;
  --track-eyebrow: 0.18em;

  /* ---------- Medidas y ritmo ---------- */
  --ancho-max:      1320px;
  --ancho-texto:    64ch;
  --gutter:         clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
  --seccion-y:      clamp(4rem, 2.4rem + 7vw, 9.5rem);
  --seccion-y-sm:   clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
  --bloque:         clamp(1.5rem, 1rem + 1.6vw, 2.75rem);

  --radio:          2px;   /* Deliberadamente casi recto: nada de tarjetas redondeadas */
  --borde:          1px solid var(--c-linea);
  --borde-oscuro:   1px solid var(--c-linea-oscura);

  /* ---------- Movimiento ---------- */
  --t-rapida:  160ms;
  --t-media:   320ms;
  --t-lenta:   680ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- Capas ---------- */
  --z-header:  120;
  --z-menu:    130;
  --z-gate:    200;
}

/* Secciones oscuras: se redefinen los roles, no los componentes */
.tema-oscuro {
  --fondo:       var(--c-negro);
  --fondo-alt:   var(--c-negro-suave);
  --texto:       var(--c-marfil);
  --texto-suave: #A8A69F;
  --acento:      var(--c-agave-claro);
  --acento-texto: var(--c-agave-claro);
  --coral-texto: var(--c-coral);
  --c-linea:     var(--c-linea-oscura);
  color-scheme: dark;
}

.tema-agave {
  --fondo:       var(--c-agave);
  --fondo-alt:   var(--c-agave-oscuro);
  --texto:       var(--c-marfil);
  --texto-suave: rgba(246, 241, 233, 0.86);
  --acento:      var(--c-marfil);
  --acento-texto: var(--c-marfil);
  --coral-texto: var(--c-rosa);
  --c-linea:     rgba(246, 241, 233, 0.3);
  color-scheme: dark;
}