/* =====================================================================
   TOKENS · ¡Go Papa! Food Truck
   Cerrado en la Fase 3 (contraste AA verificado con cálculo, ver PROYECTO-CONTEXT E5). Todo el color, la tipografía,
   el espacio, la elevación y el movimiento salen de aquí: sin valores sueltos.
   Origen de la paleta: logo (naranja de la mancha, amarillo de las papas,
   granate del círculo) y paneles del menú impreso (asfalto, granate, crema,
   chocolate, naranja).
   ===================================================================== */

/* Fuentes alojadas en el proyecto (licencia OFL). Subconjunto latino. */
@font-face {
  font-family: "Bagel Fat One";
  src: url("../assets/fuentes/bagel-fat-one-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fuentes/archivo-variable-latin.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  /* ---- Paleta de marca (valores base) ---- */
  --asfalto-900: #0B0A09;
  --asfalto-800: #141110;
  --asfalto-700: #25201C;
  --asfalto-600: #342C26;
  --papa-300:    #FFE27A;
  --papa-500:    #FFC629;   /* amarillo de las papas y del banner del logo */
  --papa-700:    #A9780A;
  --salsa-500:   #F08C23;   /* naranja de la mancha del logo */
  --salsa-700:   #C5360F;   /* panel naranja del menú */
  --granate-500: #9A1B27;   /* círculo del logo, paneles rojos */
  --granate-700: #6E111C;
  --choco-600:   #4B1C16;   /* panel de Internacionales */
  --crema-100:   #FFF6EA;
  --crema-200:   #F7F0E1;
  --tinta:       #21130E;
  --papel:       #FFFAEE;   /* hojas claras: ficha y pedido */
  --papel-linea: #E2D7C4;
  --papel-suave: #46352B;
  --error:       #B3160F;
  --wa:          #25D366;   /* verde propio de WhatsApp, solo en su botón */
  --wa-tinta:    #04331A;

  /* ---- Color por roles ---- */
  --c-fondo:           var(--asfalto-800);
  --c-superficie:      var(--asfalto-700);
  --c-superficie-alta: var(--asfalto-600);
  --c-texto:           var(--crema-100);
  --c-texto-suave:     #D8CDC0;
  --c-acento:          var(--papa-500);
  --c-sobre-acento:    var(--tinta);
  --c-linea:           rgba(255, 246, 234, .22);
  --c-estado-agotado:  #A99B8C;   /* contraste 6,8:1 sobre asfalto; siempre acompañado de texto */

  /* ---- Tipografía ---- */
  --f-display: "Bagel Fat One", "Arial Black", system-ui, sans-serif;
  --f-texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho-cond: 72%;    /* font-stretch para precios y etiquetas */
  --ancho-norm: 100%;

  /* ---- Espacio (4/8 px) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 56px; --e-10: 72px;

  /* ---- Forma y elevación ---- */
  --r-chico: 10px; --r-medio: 16px; --r-grande: 24px; --r-pildora: 999px;
  --elev-plano:   none;
  --elev-flota:   0 4px 0 rgba(0, 0, 0, .34);                         /* botón que se hunde al tocar */
  --elev-capa:    0 18px 40px rgba(0, 0, 0, .5);
  --textura-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M-20 60 40 10l10 50 60-50 10 50 60-50M-20 150l60-50 10 50 60-50 10 50 60-50' fill='none' stroke='%23231D19' stroke-width='16'/%3E%3C/svg%3E");

  /* ---- Movimiento (propuestas.md §5.4) ---- */
  --d-micro: 150ms;
  --d-corto: 220ms;
  --d-medio: 380ms;
  --d-largo: 640ms;
  --ease-salida:  cubic-bezier(.16, 1, .3, 1);
  --ease-entrada: cubic-bezier(.7, 0, .84, 0);
  --ease-enfasis: cubic-bezier(.65, 0, .35, 1);
  --ease-resorte: cubic-bezier(.22, 1.3, .36, 1);   /* ajuste de marca: rebote corto, es food truck */
}

/* ---- Escala tipográfica (móvil primero; titular mayor ≈ 5–8 veces el texto base) ---- */
:root {
  --t-texto: 16px;
  --t-menor: 14px;
  --t-precio: 26px;
  --t-nombre: 24px;
  --t-titulo: clamp(44px, 14vw, 72px);
  --t-titulo-chico: clamp(28px, 8.6vw, 40px);
  --z-barra: 20; --z-cabecera: 30; --z-hoja: 40; --z-vuelo: 60; --z-intro: 80;
}

/* ---- Atmósferas por categoría (el fondo cambia al llegar; cada pareja verificada ≥ 4,5:1) ---- */
.app {
  --atm-fondo: var(--papa-500);       --atm-titulo: var(--granate-700);  --atm-texto: var(--tinta);
  --atm-bandeja: var(--asfalto-800);  --atm-bandeja-texto: var(--crema-100); --atm-bandeja-suave: #D8CDC0;
  --atm-borde: transparent;
}
[data-atm="recomendadas"]   { --atm-fondo: var(--papa-500);    --atm-titulo: var(--granate-700); --atm-texto: var(--tinta); }
[data-atm="premium"]        { --atm-fondo: var(--granate-500); --atm-titulo: var(--papa-500);    --atm-texto: var(--crema-100); }
[data-atm="internacionales"]{ --atm-fondo: var(--choco-600);   --atm-titulo: var(--papa-500);    --atm-texto: var(--crema-100); }
[data-atm="picar"]          { --atm-fondo: var(--salsa-700);   --atm-titulo: #FFFFFF;            --atm-texto: #FFFFFF; }
[data-atm="infantil"]       { --atm-fondo: var(--salsa-500);   --atm-titulo: var(--tinta);       --atm-texto: var(--tinta); }
[data-atm="tomar"]          { --atm-fondo: var(--asfalto-900); --atm-titulo: var(--papa-500);    --atm-texto: var(--crema-100);
                                  --atm-bandeja: var(--asfalto-700); --atm-borde: var(--asfalto-600); }
[data-atm="adiciones"]      { --atm-fondo: var(--granate-700); --atm-titulo: var(--papa-500);    --atm-texto: var(--crema-100); }
[data-atm="completo"]       { --atm-fondo: var(--asfalto-800); --atm-titulo: var(--papa-500);    --atm-texto: var(--crema-100);
                                  --atm-bandeja: var(--asfalto-700); --atm-borde: var(--asfalto-600); }