/* Sistema de diseño de Parra's Burguer & Mex. Colores medidos del logo (negro y crema); ámbar y rojo salen de las fotos (cheddar, papel de envolver). */

/* Fuentes alojadas en el proyecto (Barlow y Barlow Condensed, licencia SIL OFL 1.1, subconjunto latino) */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fuentes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fuentes/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fuentes/barlow-700.woff2") format("woff2"); }

:root {
  /* paleta base */
  --c-negro: #0b0907;
  --c-crema: #fee3b4;
  --c-crema-suave: #e8cf9f;
  --c-tinta-suave: #4a3a28;
  --c-ambar: #e0a030;
  --c-rojo: #c4452f;

  /* roles (valores del mundo «Burguer»; los otros mundos los redefinen abajo) */
  --c-fondo: var(--c-crema);
  --c-superficie: #f6d59f;
  --c-superficie-alta: #fff0d2;
  --c-texto: var(--c-negro);
  --c-texto-suave: var(--c-tinta-suave);
  --c-acento: var(--c-negro);
  --c-sobre-acento: var(--c-crema);
  --c-linea: rgba(11, 9, 7, .85);
  --c-estado-agotado: #8a7a60;

  /* tipografía: las fuentes finales se alojan en assets/fuentes (pendiente de descarga aprobada) */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-base: 17px;
  --t-titulo-mundo: clamp(60px, 22vw, 104px);
  --t-cartel: clamp(46px, 15.5vw, 72px);
  --t-precio: clamp(32px, 10vw, 46px);

  /* espacio (base 4/8) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 48px;
  --banda: 46px;

  /* forma y elevación */
  --r-chico: 10px; --r-medio: 16px; --r-pildora: 999px;
  --el-flotante: 0 10px 30px rgba(0, 0, 0, .28);
  --el-capa: 0 -20px 60px rgba(0, 0, 0, .45);

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

[data-tema="amp"] {
  --c-fondo: var(--c-ambar);
  --c-superficie: #eab04a;
  --c-superficie-alta: #f3c36b;
  --c-texto: var(--c-negro);
  --c-texto-suave: #2b1d0a;
  --c-acento: var(--c-negro);
  --c-sobre-acento: var(--c-ambar);
  --c-linea: rgba(11, 9, 7, .85);
}

[data-tema="mex"] {
  --c-fondo: var(--c-negro);
  --c-superficie: #17120e;
  --c-superficie-alta: #241c15;
  --c-texto: var(--c-crema);
  --c-texto-suave: var(--c-crema-suave);
  --c-acento: var(--c-ambar);
  --c-sobre-acento: var(--c-negro);
  --c-linea: rgba(254, 227, 180, .28);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 1ms; --d-corto: 1ms; --d-medio: 1ms; --d-largo: 1ms; }
}