/* Yapedido — sistema de diseño «Brasa»
 * Tokens base. Cambiar --brand por negocio para theming dinámico de la tienda pública.
 */

:root {
  /* Paleta Brasa */
  --papel: #FBF7F1;
  --papel-2: #EFE8DD;
  --papel-3: #F6F1E9;
  --carbon: #241C16;
  --brasa: #D45A36;
  --ladrillo: #A8442A;
  --ceniza: #9B9088;
  --tinta: #6B5F54;
  --linea: #E5DACB;
  --linea-2: #D8CCBB;
  --linea-3: #F0E7DA;
  --linea-4: #F6E4DA;

  /* Estados */
  --estado-nuevo: #D45A36;
  --estado-prep: #E0A82E;
  --estado-prep-bg: #FBF1D9;
  --estado-prep-fg: #9A6E0C;
  --estado-listo: #3E8E5A;
  --estado-listo-bg: #E3F4E9;
  --estado-listo-fg: #2E6B43;

  /* WhatsApp */
  --whatsapp: #25D366;

  /* Color del negocio (theming por tienda) — sobrescribir en negocio.html */
  --brand: #D45A36;

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Espaciado base 4 */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-3xl: 30px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--carbon);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand); color: #fff; }

/* Tipografía utilitaria */
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--carbon); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ceniza); }
.lead { color: var(--tinta); font-size: 17px; line-height: 1.55; }

/* Botones */
.btn {
  border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700;
  font-size: 15px; padding: 14px 22px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brasa); color: #fff; box-shadow: 0 8px 20px -8px rgba(168,68,42,.6); }
.btn-primary:hover { background: var(--ladrillo); }
.btn-dark { background: var(--carbon); color: #fff; }
.btn-ghost { background: #fff; color: var(--carbon); border: 1px solid var(--linea-2); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-full { width: 100%; }

/* Cards y superficies */
.card { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-xl); }
.surface { background: #fff; }

/* Comanda (elemento firma) */
.ticket { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.ticket-band { height: 6px; background: var(--brand); }
.ticket-cut { border-top: 2px dashed var(--linea-2); margin: 0 12px; }

/* Chip de estado */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 14px; letter-spacing: .04em; }
.chip-nuevo { background: var(--linea-4); color: var(--ladrillo); }
.chip-prep { background: var(--estado-prep-bg); color: var(--estado-prep-fg); }
.chip-listo { background: var(--estado-listo-bg); color: var(--estado-listo-fg); }

/* Container */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Animaciones */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.pulse { animation: pulse 1.6s infinite; }