/* Botão — variantes primário/secundário/fantasma, tamanhos md/sm. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  font-size: var(--texto-sm);
  font-weight: 600;
  line-height: 1;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao:hover { text-decoration: none; }
.botao svg { width: 18px; height: 18px; }

.botao--primario { background: var(--cor-primaria); color: #fff; }
.botao--primario:hover { background: var(--cor-primaria-forte); }
.tema-escuro .botao--primario { color: #06201c; }

.botao--secundario { background: var(--cor-superficie); border-color: var(--cor-borda); color: var(--cor-texto); }
.botao--secundario:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.botao--fantasma { background: transparent; color: var(--cor-primaria); }
.botao--fantasma:hover { background: var(--cor-primaria-tint); }

.botao--sm { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-xs); }
.botao--bloco { width: 100%; }
.botao[disabled] { opacity: 0.55; cursor: not-allowed; }