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

.label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.input {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:hover:not(:disabled) {
  border-color: var(--color-neutral-400);
}

.input:focus {
  outline: none;
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-neutral-100);
}

.hasError .input {
  border-color: var(--color-danger-500);
}

.hasError .input:focus {
  box-shadow: 0 0 0 3px var(--color-danger-100);
}

.error {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
}

.hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}