/* Foomy · tema da demonstração de massa.
 * Mesmo cartão das demos de pizza e hambúrguer: farinha, tinta de casca queimada e tomate.
 * As variáveis da bancada (escrita no tema escuro) são remapeadas para os tokens da Foomy. */
:root {
  --color-paper: oklch(97.4% 0.014 82);
  --color-paper-2: oklch(94.4% 0.024 78);
  --color-paper-3: oklch(90.8% 0.034 74);
  --color-card: oklch(99.2% 0.006 82);
  --color-ink: oklch(23% 0.03 38);
  --color-ink-2: oklch(40% 0.03 42);
  --color-ink-hover: oklch(30% 0.035 38);
  --color-line: oklch(87% 0.024 70);
  --color-line-2: oklch(80% 0.03 68);
  --color-tomato: oklch(54% 0.2 31);
  --color-tomato-aro: oklch(54% 0.2 31 / .4);
  --color-tomato-soft: oklch(91% 0.05 38);
  --color-on-tomato: oklch(98.5% 0.01 80);
  --color-basil: oklch(48% 0.12 148);
  --color-shadow: oklch(30% 0.05 40 / 0.16);
  --color-shadow-strong: oklch(25% 0.05 40 / 0.28);
  --color-brilho: oklch(100% 0 0 / .6);
  --color-preco: oklch(100% 0 0 / .12);
  --color-veu: oklch(23% 0.03 38 / .45);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --radius-xl: 30px;

  /* a bancada lê estas */
  --preto: var(--color-card);
  --preto-2: var(--color-paper-2);
  --preto-3: var(--color-paper-3);
  --creme: var(--color-ink);
  --creme-2: var(--color-ink-2);
  --dourado: var(--color-tomato);
  --linha: var(--color-line);
  --sombra: var(--color-shadow-strong);
  --serifa: var(--font-display);
}

body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }

.app { max-width: 440px; border-radius: var(--radius-xl); background: var(--color-card); box-shadow: 0 30px 60px -24px var(--color-shadow-strong), 0 2px 0 var(--color-brilho) inset; }

/* marca do restaurante e títulos: grotesca, sem caixa-alta */
.topo__casa { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; text-transform: none; color: var(--color-ink); }
.topo__sub { color: var(--color-ink-2); }
.instrucao b, .instrucao__txt b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; text-transform: none; }
.confirma__titulo { font-family: var(--font-display); text-transform: none; letter-spacing: -0.02em; }
.limite__num { font-family: var(--font-display); }
.resumo__rot, .opcoes__rot { font-family: var(--font-mono); font-weight: 500; }

/* fogão claro, como a bancada das outras demos */
.fogao { background: radial-gradient(circle at 50% 42%, var(--color-paper) 0%, var(--color-paper-3) 78%); }

/* contador e etiquetas com o tomate no lugar do dourado */
.limite { box-shadow: inset 0 0 0 1.5px var(--color-tomato-aro); }
.limite__pontos i { box-shadow: inset 0 0 0 1px var(--color-tomato-aro); }
.limite.cheio { background: var(--color-tomato-soft); box-shadow: inset 0 0 0 1.5px var(--color-tomato); }
.etiq--fixa { border-color: var(--color-tomato-aro); }
.badge, .abas b, .mini__dupla, .seg button[aria-pressed="true"], .trilha button.feito i { color: var(--color-on-tomato); }

/* botão de pedir igual ao da pizza: tinta escura, preço em mono, verde quando chega */
.pedir, .pedir.guia { background: var(--color-ink); color: var(--color-paper); font-weight: 600; box-shadow: 0 10px 24px -12px var(--color-shadow-strong); }
.pedir:hover { background: var(--color-ink-hover); }
.pedir.ok { background: var(--color-basil); color: var(--color-paper); }
.pedir__preco { font-family: var(--font-mono); font-size: .875rem; background: var(--color-preco); }
.delta { color: var(--color-paper); }

.confirma::backdrop { background: var(--color-veu); }

/* dentro da landing (iframe): sem tela cheia, a altura é a do conteúdo */
.embed body { background: transparent; }
.embed .palco { min-height: 0; padding: 0 0 32px; }
.embed .fogao { width: min(100%, 340px); }
.embed .pedir { position: relative; bottom: auto; }
.embed .confirma { margin: 96px auto auto; }

/* trilha nas telas estreitas: número menor e, no limite, só o nome da etapa */
@media (max-width: 400px) {
  .trilha button { gap: 4px; padding: 0 2px; font-size: .7rem; }
  .trilha i { width: 16px; height: 16px; font-size: .6rem; }
}
@media (max-width: 300px) { .trilha i { display: none; } }

/* árabe: letras árabes na fonte certa e sem espaçamento entre letras */
html[lang="ar"] { --font-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[lang="ar"] body * { letter-spacing: 0 !important; }
[dir="rtl"] .cuba-preco, [dir="rtl"] .delta { direction: ltr; unicode-bidi: isolate; }