/* forms.css — formulär, inputs, labels, valideringsmeddelanden */

form {
  margin: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.form-field label {
  font-weight: var(--weight-medium);
  font-size: var(--font-size-small);
  color: var(--color-text-main);
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-body);
  font-family: inherit;
  background: #ffffff;
  color: var(--color-text-main);
  min-height: var(--touch-target);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
  border-color: rgba(57, 61, 82, 0.3);
}

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

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

.form-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--line-height-normal);
}

.form-field .error-message {
  color: var(--color-error);
  font-size: var(--font-size-small);
}

.form-field .helper-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}