/* Base das duas superfícies. Nenhuma cor literal aqui: tudo vem de
   tokens.css, que é gerado do tokens.json. Um teste recusa hex fora de lá. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* O atributo `hidden` vale mais que qualquer classe.
   Sem isto, uma regra como `.alerta { display: flex }` vence o `display:
   none` do navegador — que vem do seletor `[hidden]`, de menor peso — e o
   elemento continua na tela. Foi o que aconteceu no primeiro acesso em
   produção: a caixa de aviso aparecia vazia, e o esconder de TODA tela deste
   app (login, abertura, folhas, intervalo) era um comando sem efeito. */
[hidden] {
  display: none !important;
}

html {
  /* Só tema escuro (docs/design/sistema/README.md). */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  /* O salão é em pé e com pressa: nada de zoom acidental ao tocar rápido. */
  touch-action: manipulation;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--text-title-weight);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Todo alvo de toque tem no mínimo tap-min de altura. */
button,
[role='button'],
input,
select {
  min-height: var(--tap-min);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
}

.titulo {
  font-family: var(--font-display);
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
  font-weight: var(--text-title-weight);
}

.rotulo {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
}

.legenda {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* Todo número é mono e com dígitos de largura fixa: coluna de dinheiro que
   dança a cada atualização é ilegível na correria. */
.numero {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.dinheiro {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-money-size);
  line-height: var(--text-money-line);
  font-weight: var(--text-money-weight);
}

/* ---------------------------------------------------------------------------
   Superfícies e sinais
   --------------------------------------------------------------------------- */

.superficie {
  background: var(--surface);
  border-radius: var(--radius-md);
}

.superficie-alta {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}

/* Vermelho é ação e marca, nunca erro. */
.botao-principal {
  background: var(--red);
  color: var(--on-red);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  font-weight: var(--text-label-weight);
}

.botao-secundario {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  font-weight: var(--text-label-weight);
}

.botao-principal[disabled],
.botao-secundario[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Verde só depois da confirmação do servidor (§13.2). Nunca antes. */
.confirmado {
  color: var(--ok);
}

/* Aviso que pede atenção sem bloquear: valor alterado, fora da janela. */
.aviso {
  background: var(--warn);
  color: var(--ground);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-caption-size);
  font-weight: var(--text-label-weight);
}

/* Vermelho de texto pequeno: saldo devedor, eliminado, estorno. O red do logo
   não passa contraste neste tamanho. */
.devedor {
  color: var(--red-text);
}

.silenciado {
  color: var(--ink-muted);
}

.invisivel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}