.input,
.select,
.textarea {
  width: 100%;
  border: var(--border-1) solid var(--color-border-default);
  background: var(--color-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth),
    background-color var(--duration-normal) var(--ease-smooth);
}

.input,
.select {
  min-height: var(--input-height-md);
}

.textarea {
  min-height: 120px;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  resize: vertical;
}

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

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