Figma设计还原问题：输入框文本过粗与设计不符求助

我尝试还原Figma中的输入框设计，但效果不完全准确：

想要创建的输入框效果如下：

注意其中文本的纤细程度，Figma给出的参数如下：

color: var(--heading-black, #222);
/* Button/16/Regular */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px;

我使用了相同的颜色和字重，甚至尝试将字重改为100，但实际实现的效果里文本明显更粗：

以下是我的输入框CSS代码：

.search-field {
    margin-left: 65px;
    width: 429px;
    height: 44px;   
    font-size: 16px;
    font-weight: 400;
    padding-left: 46px;
    background: url("../../../assets/icons/search.png") no-repeat;
    background-color: white;
    background-size: 21px;
    background-position: 14px center;
    border: none;
    border-radius: 4px;
    outline: none;
    color: #222;
}

以及HTML代码：

<input type="text" class="search-field" value placeholder="Booking.com, Expedia, Otto...">

请问我哪里出错了？

内容的提问来源于stack exchange，提问作者IonicMan