/* =====================================================================
   PODEPÁ RESTAURANTE E BAR — Tokens de design
   Importar em todas as páginas antes de qualquer outro CSS.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@600;700&display=swap');

:root {
  /* --- Cores da fachada --- */
  --amarelo:        #FFC800;  /* amarelo da parede e da barra da placa */
  --amarelo-claro:  #FFE066;  /* hover, realces */
  --ouro:           #E3A81C;  /* letras douradas */
  --ouro-escuro:    #B87A0C;  /* base do gradiente, sombras */

  --preto:          #101010;  /* fundo da placa, fundo do sistema */
  --preto-2:        #1C1C1C;  /* cards sobre o preto */
  --preto-3:        #2A2A2A;  /* bordas, divisórias */

  --creme:          #FAF7F0;  /* texto claro, fundo das telas de leitura */
  --cinza:          #9A9A9A;  /* texto secundário */

  /* --- Cores de estado (cozinha e comanda) --- */
  --pendente:  #FF8A00;  /* item esperando aprovação */
  --preparo:   #3B82F6;
  --pronto:    #22C55E;
  --alerta:    #EF4444;  /* estoque abaixo do mínimo, cancelamento */

  /* --- Tipografia --- */
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --texto:   'Barlow', system-ui, sans-serif;
  --dados:   'Barlow Semi Condensed', sans-serif;  /* preços, números de mesa */

  --t-hero:  clamp(2.5rem, 7vw, 4.5rem);
  --t-h1:    clamp(1.9rem, 4vw, 2.6rem);
  --t-h2:    1.45rem;
  --t-corpo: 1.02rem;
  --t-mini:  0.82rem;

  /* --- Espaço e forma --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --sombra: 0 8px 28px rgba(0,0,0,.45);
  --borda: 1px solid var(--preto-3);
}

/* =====================================================================
   ASSINATURA — o xadrez das toalhas de mesa do salão.
   Usar como divisória entre seções e no topo de cards de mesa.
   ===================================================================== */
.xadrez {
  height: 18px;
  background-image:
    linear-gradient(45deg,  var(--preto) 25%, transparent 25%, transparent 75%, var(--preto) 75%),
    linear-gradient(45deg,  var(--preto) 25%, transparent 25%, transparent 75%, var(--preto) 75%);
  background-color: var(--creme);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.xadrez--amarelo { background-color: var(--amarelo); }

/* =====================================================================
   Base
   ===================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--creme);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 .5em;
}

.preco {
  font-family: var(--dados);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amarelo);
}

/* --- Botões --- */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
  padding: .85em 1.6em;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .12s ease, background .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--principal { background: var(--amarelo); color: var(--preto); }
.btn--principal:hover { background: var(--amarelo-claro); }
.btn--secundario {
  background: transparent; color: var(--amarelo);
  box-shadow: inset 0 0 0 2px var(--amarelo);
}
.btn--perigo { background: var(--alerta); color: #fff; }

/* --- Card --- */
.card {
  background: var(--preto-2);
  border: var(--borda);
  border-radius: var(--r-md);
  padding: 1.15rem;
}

/* --- Etiqueta de status --- */
.tag {
  display: inline-block;
  font-family: var(--dados);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--t-mini);
  padding: .28em .7em;
  border-radius: 999px;
  color: var(--preto);
}
.tag--pendente { background: var(--pendente); }
.tag--preparo  { background: var(--preparo); color: #fff; }
.tag--pronto   { background: var(--pronto); }
.tag--alerta   { background: var(--alerta); color: #fff; }

/* --- Acessibilidade --- */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Avisos flutuantes (função aviso() do config.js)
   ===================================================================== */
.aviso {
  position: fixed; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%) translateY(140%);
  background: var(--preto-2); color: var(--creme);
  border: 1px solid var(--preto-3); border-left: 4px solid var(--amarelo);
  padding: .85rem 1.3rem; border-radius: var(--r-sm);
  box-shadow: var(--sombra); z-index: 9999;
  max-width: min(92vw, 460px); font-size: .95rem;
  transition: transform .25s ease, opacity .25s ease;
  opacity: 0;
}
.aviso--visivel { transform: translateX(-50%) translateY(0); opacity: 1; }
.aviso--erro { border-left-color: var(--alerta); }
.aviso--atencao { border-left-color: var(--pendente); }