/*
  Form component styles.
  Use these for text inputs, textareas, selects, helper text, and validation states.
*/

.form-control,
.form-select {
  min-height: var(--size-button-height);
  color: var(--color-text);
  background-color: #FDFEFF;
  border: var(--border-width-base) solid var(--color-card-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--space-1) var(--color-focus-accent);
}

textarea.form-control {
  min-height: var(--space-16);
  resize: vertical;
}

.form-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.form-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.is-valid {
  border-color: var(--color-success);
}

.is-invalid {
  border-color: var(--color-error);
}

.valid-feedback {
  color: var(--color-success);
}

.invalid-feedback {
  color: var(--color-error);
}