/* ------------------------------------------------------------------
   tokens.css · Rústicas
   Color, tipografía, espacio, elevación y movimiento. Nada de valores sueltos
   en el resto de los estilos.
   Paleta: muestreada de la carta impresa (JPEG de 720 px) y del logo; los
   valores se afinan cuando llegue el logo en alta.
   Fuentes alojadas en assets/fuentes (licencia SIL OFL 1.1, ver los .txt):
     · Big Shoulders (Bold)   → display, condensada como el logo
     · Bricolage Grotesque    → lectura
------------------------------------------------------------------- */
@font-face { font-family: "Big Shoulders"; src: url("../assets/fuentes/BigShoulders-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fuentes/BricolageGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fuentes/BricolageGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Color por roles */
  --c-fondo: #000;
  --c-superficie: #12110F;
  --c-superficie-alta: #1E1C19;
  --c-texto: #F4EFE4;
  --c-texto-suave: #BDB6A6;
  --c-acento: #F0A21A;
  --c-sobre-acento: #000;
  --c-linea: #34312C;
  --c-estado-agotado: #7A5A3A;

  /* Atmósfera: cambia con cada antojo */
  --atm: #F0A21A;
  --atm-sobre: #000;

  /* Colores de los antojos (de las pinceladas de la carta) */
  --a-cerdo: #F28C1E;
  --a-pollo: #FFD02E;
  --a-res: #F83231;
  --a-veggie: #7ED957;
  --a-todos: #F4EFE4;

  /* Tipografía */
  --f-display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --f-texto: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --t-base: 16px;
  --t-chico: 13.5px;
  --t-hero: clamp(58px, 19vw, 92px);

  /* Espacio (base 4/8) */
  --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: 6px; --r-medio: 12px; --r-capa: 22px; --r-pildora: 999px;
  --sombra-flotante: 0 10px 28px rgba(0, 0, 0, .55);
  --sombra-capa: 0 -14px 40px rgba(0, 0, 0, .6);

  /* 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);

  /* Áreas seguras */
  --seg-sup: env(safe-area-inset-top, 0px);
  --seg-inf: env(safe-area-inset-bottom, 0px);
}