.field {
  display: grid;
  gap: var(--space-8);
}

.field label {
  color: var(--color-ink);
  font-weight: 600;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  color: var(--color-ink);
  padding: 0 var(--space-16);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.input,
.select {
  min-height: 48px;
}

.textarea {
  min-height: 144px;
  padding-block: var(--space-16);
  resize: vertical;
}

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.input.is-success,
.textarea.is-success,
.select.is-success {
  border-color: var(--color-success);
}

.input.is-error,
.textarea.is-error,
.select.is-error {
  border-color: var(--color-error);
}

.form-message {
  font-size: var(--text-small);
}

.form-message.is-success { color: var(--color-success); }
.form-message.is-error { color: var(--color-error); }

.checkbox {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
}