/* ==========================================================================
   BENDICIONES BURGER — tokens de diseño
   "Brasa en la carretera de noche."
   Ningún color, tamaño ni duración fuera de este archivo.
   ========================================================================== */

:root {

  /* --- Fondos ----------------------------------------------------------- */
  --negro-carbon: #0B0B0C;   /* fondo base de la página */
  --negro-humo:   #141416;   /* superficie elevada, apenas perceptible */
  --negro-puro:   #000000;   /* fondo de las fotos: funde sin costura */

  /* --- Fuego (del logo del food truck) ---------------------------------- */
  --ambar:        #F28C28;
  --ambar-claro:  #FFB347;
  --ambar-brasa:  #D4571A;

  /* --- Oro (del cartel del menú) ---------------------------------------- */
  --oro:          #C9A227;
  --oro-claro:    #E8D08B;

  /* --- Acento ----------------------------------------------------------- */
  --rojo-brasa:   #C1361F;   /* 3,57:1 sobre negro. Solo texto grande,
                                o de fondo con --hueso encima (4,88:1). */

  /* --- Texto ------------------------------------------------------------ */
  --hueso:        #F5F1E8;   /* 17,45:1 — texto principal */
  --gris-humo:    #9A938C;   /*  6,49:1 — texto secundario, pasa AA */
  --gris-apagado: #5C5751;   /*  2,75:1 — NUNCA texto. Solo bordes. */

  /* --- Líneas y luz ----------------------------------------------------- */
  --linea-oro:    rgba(201, 162, 39, 0.18);
  --linea-tenue:  rgba(245, 241, 232, 0.08);
  --glow-ambar:   0 0 60px -20px var(--ambar);
  --glow-suave:   0 0 90px -40px var(--ambar);

  /* --- Tipografías ------------------------------------------------------ */
  --f-titular:  "Anton", "Arial Narrow", sans-serif;
  --f-producto: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-cuerpo:   "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Escala tipográfica fluida ----------------------------------------
     Calculada punto a punto entre 390 px y 1440 px de ancho de viewport.
     El primer valor del clamp() es el tamaño real a 390 px.               */
  --t-hero:     clamp(2.75rem,  1.601rem + 4.714vw, 5.5rem);    /*  44 →  88 */
  --t-seccion:  clamp(2rem,     1.257rem + 3.048vw, 4rem);      /*  32 →  64 */
  --t-producto: clamp(1.5rem,   1.314rem + 0.762vw, 2rem);      /*  24 →  32 */
  --t-precio:   clamp(1.75rem,  1.564rem + 0.762vw, 2.25rem);   /*  28 →  36 */
  --t-lema:     clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);    /*  18 →  24 */
  --t-cuerpo:   clamp(1rem,     0.954rem + 0.190vw, 1.125rem);  /*  16 →  18 */
  --t-etiqueta: clamp(0.8125rem, 0.789rem + 0.095vw, 0.875rem); /*  13 →  14 */
  --t-micro:    0.75rem;                                        /*  12 fijo  */

  --lh-titular: 0.92;
  --lh-producto: 1.15;
  --lh-cuerpo: 1.65;
  --ls-titular: 0.01em;
  --ls-boton: 0.08em;

  /* --- Espaciado: rejilla de 8 px --------------------------------------- */
  --e-1:   8px;
  --e-2:  16px;
  --e-3:  24px;
  --e-4:  32px;
  --e-6:  48px;
  --e-8:  64px;
  --e-12: 96px;
  --e-16: 128px;
  --e-seccion: clamp(80px, 12vw, 160px);

  /* --- Layout ----------------------------------------------------------- */
  --ancho-max: 1280px;
  --ancho-texto: 62ch;        /* línea de lectura por debajo de 80 caracteres */
  --margen-lateral: 24px;
  --radio: 4px;               /* botones y badges. Nada más lleva radio. */

  /* --- Movimiento -------------------------------------------------------
     Regla del brief: salir siempre a la mitad de tiempo que entrar.       */
  --dur-entrada: 350ms;
  --dur-salida:  175ms;
  --dur-hover:   200ms;
  --ease-entrada: cubic-bezier(0.22, 0.61, 0.36, 1);   /* power2.out    */
  --ease-salida:  cubic-bezier(0.65, 0.05, 0.36, 1);   /* power2.inOut  */

  --z-mapa: 1;
  --z-hero-luz: 5;
  --z-escotilla: 10;
  --z-ui: 20;
}

@media (min-width: 768px) {
  :root { --margen-lateral: 40px; }
}

/* Sin animación: las duraciones se anulan en la raíz para que ningún
   componente tenga que acordarse de hacerlo por su cuenta. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-entrada: 150ms;
    --dur-salida:  150ms;
    --dur-hover:   0ms;
  }
}