/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — vocabulário visual "cliente-final" (Totem + Pedido Online).
   Versão real do docs/prototipo/tokens.css (trilha VIS, regra 3): é o ÚNICO
   arquivo compartilhado entre os dois apps — templates e views seguem
   isolados. Não usar nas telas operacionais (PDV/Monitor/KDS/Rotas).

   Fontes vendoradas (sem Google Fonts em runtime): o Totem é offline-first
   e o cliente do delivery pode estar em rede ruim — fallback nunca trava.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lilita-one-latin.9a95c766f3e1.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900; /* variável — um arquivo cobre todos os pesos */
  font-display: swap;
  src: url("fonts/inter-latin.260c81a4759b.woff2") format("woff2");
}

:root {
  /* fundo — quase preto e quente, para as fotos "saltarem" (Bíblia §3.5) */
  --gula-bg: #14100e;
  --gula-bg-alt: #1b1613;
  --gula-superficie: #221c18;
  --gula-superficie-2: #2c2521;
  --gula-borda: #3b332c;

  /* texto */
  --gula-texto: #f8f3ec;
  --gula-texto-fraco: #b6aba1;

  /* marca — o mesmo verde de "confirmar/ir" das telas operacionais */
  --gula-marca: #22c55e;
  --gula-marca-escura: #16a34a;
  --gula-marca-texto: #0b2e18;

  /* preço em dourado — "suculento", como no mockup do Totem */
  --gula-preco: #f7b731;

  --gula-perigo: #ef4444;
  --gula-overlay: rgba(10, 8, 7, 0.75);

  /* tipografia */
  --gula-fonte-destaque: "Lilita One", system-ui, sans-serif;
  --gula-fonte-corpo: "Inter", system-ui, -apple-system, sans-serif;

  /* forma */
  --gula-raio-card: 18px;
  --gula-raio-pill: 999px;
  --gula-raio-modal: 26px;
  --gula-sombra-card: 0 8px 22px rgba(0, 0, 0, 0.35);
  --gula-sombra-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* placeholder de foto de produto — degradê + emoji quando não há imagem */
.gula-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #4a3420, #241a12 70%);
}