/*
  Seus estilos.
  ------------------------------------------------------------------
  O arquivo `estilo.css` contém o design system inteiro e é gerado — não
  precisa ser editado. Escreva aqui: este arquivo carrega depois e sempre vence.

  As cores da marca estão disponíveis como variáveis:
    var(--color-brand)   roxo  #6928e3
    var(--color-accent)  amarelo #f1cb5f
    var(--color-ink)     texto
    var(--color-paper)   fundo
    var(--color-muted)   texto secundário
    var(--color-line)    bordas
*/

/* Campos de formulário */
.campo {
  height: 3rem;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-paper);
  padding: 0 1rem;
  font-size: 0.95rem;
  color: var(--color-ink);
  transition: border-color 0.25s ease;
}

.campo::placeholder {
  color: color-mix(in srgb, var(--color-muted) 60%, transparent);
}

.campo:hover {
  border-color: color-mix(in srgb, var(--color-ink) 25%, transparent);
}

.campo:focus {
  border-color: var(--color-brand);
  outline: none;
}

.campo.erro {
  border-color: color-mix(in srgb, var(--color-brand) 70%, transparent);
}

textarea.campo {
  height: auto;
  padding: 0.875rem 1rem;
  line-height: 1.625;
  resize: vertical;
}

select.campo {
  appearance: none;
}

/* Fundo levemente diferente do campo dentro do formulário do site */
.campo-suave {
  background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
}