/* forms.css */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--clr-text-1);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--clr-text-1);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--clr-text-3);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-light);
}

.input[aria-invalid="true"] {
  border-color: var(--clr-error);
}

.field__hint  { font-size: var(--text-xs); color: var(--clr-text-3); }
.field__error { font-size: var(--text-xs); color: var(--clr-error); }

.textarea {
  min-height: 96px;
  resize: vertical;
}