/* Base compartilhada (site + sistema). Requer tokens.css. Fontes locais em fontes.css (o caixa abre sem internet). Sem color-mix em fundos: o checar.js não lê color(). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; --alvo: var(--alvo-min-site); }
.sistema { --alvo: var(--alvo-min); }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.55;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.sistema { font-size: var(--texto-caixa); }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: 34px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.num, .preco, .total { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--cor-ok); outline-offset: 3px; }

/* botões: <button> ou <a>. Neutro por padrão; principal = vermelho do logo. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--espaco) * 1);
  min-height: var(--alvo); padding: calc(var(--espaco) * 1.5) calc(var(--espaco) * 3);
  border: 0; border-radius: var(--raio-pilula);
  font: 600 1em/1.2 var(--fonte-texto); text-align: center; text-decoration: none; cursor: pointer;
  background: var(--cor-superficie); color: var(--cor-texto);
  transition: background-color .15s ease-out, transform .1s ease-out;
}
.botao:hover { background: var(--cor-superficie-escura); }
.botao:active { transform: scale(.98); }
.botao--principal { background: var(--cor-principal); color: #fff; }
.botao--principal:hover { background: var(--cor-principal-escura); }
.botao--ok { background: var(--cor-ok); color: #fff; }
.botao--ok:hover { background: var(--cor-ok-escura); }
.botao--perigo { background: var(--cor-fundo); color: var(--cor-erro); box-shadow: inset 0 0 0 2px var(--cor-erro); }
.botao--perigo:hover { background: var(--cor-erro-fundo); }
.botao--grande { min-height: calc(var(--alvo) + 16px); font-size: 1.33em; padding-inline: calc(var(--espaco) * 4); }
/* sem transição quando desativado: o checker pode pegar a cor no meio da animação */
.botao:disabled, .botao[aria-disabled="true"],
.botao:disabled:hover, .botao[aria-disabled="true"]:hover {
  background: var(--cor-desativado); color: var(--cor-desativado-texto); box-shadow: none;
  cursor: not-allowed; transform: none; transition: none;
}

/* campo: rótulo sempre acima, erro como texto abaixo */
.campo { display: flex; flex-direction: column; gap: var(--espaco); }
.campo__rotulo { font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--alvo); padding: var(--espaco) calc(var(--espaco) * 2);
  font: inherit; color: var(--cor-texto); background: var(--cor-fundo);
  border: 2px solid var(--cor-borda); border-radius: 14px;
}
.campo textarea { min-height: calc(var(--alvo) * 2); }
.campo__erro { color: var(--cor-erro); font-weight: 600; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--cor-erro); }

/* cartão e chips */
.cartao { background: var(--cor-superficie); border-radius: var(--raio); padding: calc(var(--espaco) * 2); }
.cartao .total { background: var(--cor-fundo); }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo); padding: var(--espaco) calc(var(--espaco) * 2.5);
  font: 600 1em/1.2 var(--fonte-texto); color: var(--cor-texto); cursor: pointer;
  background: var(--cor-fundo); border: 2px solid var(--cor-borda); border-radius: var(--raio-pilula);
}
.chip--ativo { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }

/* avisos: sempre cor + texto (ícone é extra) */
.aviso, .aviso--ok, .aviso--atencao, .aviso--erro {
  --c: var(--cor-ok); --f: var(--cor-ok-fundo);
  padding: calc(var(--espaco) * 1.5) calc(var(--espaco) * 2); border-radius: 14px; font-weight: 600;
  color: var(--cor-texto); background: var(--f); border-left: 6px solid var(--c);
}
.aviso--atencao { --c: var(--cor-atencao); --f: var(--cor-atencao-fundo); }
.aviso--erro { --c: var(--cor-erro); --f: var(--cor-erro-fundo); }

/* selo, total, teclado */
.selo-esgotado {
  display: inline-block; white-space: nowrap; padding: 2px 12px; border-radius: var(--raio-pilula);
  font-size: 16px; font-weight: 600; background: var(--cor-desativado); color: var(--cor-desativado-texto);
}
.total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px calc(var(--espaco) * 2);
  padding: calc(var(--espaco) * 2); border-radius: 14px; background: var(--cor-superficie);
}
.total__rotulo { font: 600 24px/1 var(--fonte-titulo); color: var(--cor-texto-suave); }
.total__valor { font: 700 var(--texto-total)/1 var(--fonte-titulo); letter-spacing: -.03em; }
.teclado-numerico { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--espaco) * 1.5); max-width: 360px; }
.teclado-numerico button {
  min-height: 72px; border: 0; border-radius: 16px; cursor: pointer;
  font: 700 28px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums;
  background: var(--cor-superficie); color: var(--cor-texto);
}
.teclado-numerico button:hover { background: var(--cor-superficie-escura); }
.teclado-numerico button:active { transform: scale(.97); }
.teclado-numerico .teclado__apagar { font: 600 20px/1.1 var(--fonte-texto); }

/* demonstração online (DEMO = true): faixa grafite no alto de todas as telas e do site */
.faixa-demo { margin: 0; padding: 8px 16px; text-align: center; font-weight: 600; font-size: 16px; color: #fff; background: var(--cor-destaque); }

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