/* Visual "claro moderno", o mesmo do PDV do restaurante: verde-floresta, fundo verde bem
   clarinho, cartões brancos, verde de destaque e dourado. */
:root {
  --fonte: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fundo: #f2f5f0;
  --branco: #fff;

  --sage-50: #f6f8f5;
  --sage-100: #e5ebe4;
  --sage-200: #d5ded4;
  --sage-400: #8a9a8f;
  --sage-500: #6b7c71;
  --sage-600: #55685c;
  --sage-700: #3e5146;
  --sage-900: #15261c;

  --leaf-50: #eef7f1;
  --leaf-100: #d9eee0;
  --leaf-500: #25894f;
  --leaf-600: #1f7a45;
  --leaf-700: #165c33;

  --forest-700: #1b4533;
  --forest-800: #163b2c;
  --forest-900: #133426;

  --gold-100: #fff6dd;
  --gold-400: #f2c14e;
  --gold-500: #b9861c;

  --vermelho: #c92a2a;
  --vermelho-50: #fdecec;

  --sombra-cartao: 0 1px 2px rgba(19, 52, 38, .05), 0 8px 20px rgba(19, 52, 38, .05);
  --sombra-pop: 0 1px 2px rgba(19, 52, 38, .05), 0 16px 40px rgba(19, 52, 38, .10);
  --sombra-cta: 0 8px 20px rgba(31, 122, 69, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--sage-900); font-family: var(--fonte); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { letter-spacing: -.02em; }
.tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--leaf-600); outline-offset: 2px; }

/* Desenho no lugar da foto, por categoria */
.sem-foto { display: grid; place-items: center; background: linear-gradient(135deg, var(--leaf-50), var(--leaf-100)); }
.sem-foto[data-categoria="Salgados"]      { background: linear-gradient(135deg, #fff4e0, #ffe0b2); }
.sem-foto[data-categoria="Lanches"]       { background: linear-gradient(135deg, #fff6dd, #fbe3a6); }
.sem-foto[data-categoria="Pratos do dia"] { background: linear-gradient(135deg, #fdecec, #f9cfcf); }
.sem-foto[data-categoria="Frutas"]        { background: linear-gradient(135deg, #eef7f1, #cfeadb); }
.sem-foto[data-categoria="Bebidas"]       { background: linear-gradient(135deg, #e7f3fd, #c4e1f8); }
.sem-foto[data-categoria="Gelados"]       { background: linear-gradient(135deg, #f0edfd, #d9d1f8); }
.sem-foto[data-categoria="Doces"]         { background: linear-gradient(135deg, #fbeef6, #f5cfe4); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}