:root {
  --form-border: #cbd5e1;
  --form-border-focus: #6366f1;
  --form-bg: #ffffff;
  --form-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --form-ring: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 0.5rem;
  color: #0f172a;
  box-shadow: var(--form-shadow);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
  select:focus,
  textarea:focus
) {
  outline: none;
  border-color: var(--form-border-focus);
  box-shadow: var(--form-ring), var(--form-shadow);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):disabled,
  select:disabled,
  textarea:disabled
) {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.form-help ul {
  margin: 0.25rem 0 0 1.25rem;
  list-style: disc;
}

.form-help li + li {
  margin-top: 0.25rem;
}