/* GERADO por scripts/ui-sync.sh a partir de @jabutee/ui 0.2.0 (v0.2.0). Não edite aqui. */
/**
 * ✏️ O CAMPO (`.campo`): a moldura do campo de texto, como peça.
 *
 * Opcional: quem não importa esta folha continua com a moldura que desenhou (a `escolha.css`
 * só encaixa o campo do app na caixa dela). O neutro é a moldura discreta de sempre: sem borda
 * no repouso, a borda aparece na mão em cima e sobe um degrau no foco. Cada aspecto é uma
 * variável `--jb-field-*` de `tokens.css`, e é por elas que uma pele muda o campo (a `paper`
 * deixa a borda à vista no repouso, com fundo de papel).
 *
 * ⚖️ Tudo em `:where()`: a folha do app vence sem precisar de especificidade.
 */
:where(.campo) {
  width: 100%;
  padding: var(--jb-field-pad);
  color: var(--jb-text);
  font-family: var(--jb-font-body);
  font-weight: var(--jb-weight-regular);
  font-size: var(--jb-field-size);
  background: var(--jb-field-bg);
  border: 1px solid var(--jb-field-edge);
  border-radius: var(--jb-field-radius);
  transition: border-color var(--jb-dur-instant) var(--jb-ease), background var(--jb-dur-instant) var(--jb-ease);
}
:where(.campo)::placeholder { color: var(--jb-field-placeholder); font-weight: var(--jb-weight-regular); }
:where(.campo.vazio) { color: var(--jb-field-placeholder); }
:where(.campo):hover { border-color: var(--jb-field-edge-hover); }
:where(.campo):focus { background: var(--jb-field-bg-focus); border-color: var(--jb-field-edge-focus); }