使用哪个CSS系统颜色可设置与原生输入框一致的焦点轮廓

CSS提供了大量可适配系统环境的响应式系统颜色关键字，对应焦点状态颜色的关键字是什么？
运行代码可以观察到：当<input>元素获得焦点时，会显示浅蓝色轮廓，该颜色会根据用户的色彩偏好设置、操作系统及浏览器的不同存在差异。
需求是将示例代码中当前设置为红色的<div>轮廓色，修改为与<input>焦点轮廓完全一致的颜色，需要找到对应的CSS系统颜色关键字。

示例代码 #

JavaScript #

document.querySelector('input').focus();

CSS #

:root {
  color-scheme: light dark;
}

.form {
  margin: 1em;
  padding: 1em;
  display: inline-block;
}

.form:focus-within {
  /* 需要将red替换为对应焦点状态的系统颜色 */
  outline: 2px solid red;
}

.system-colors-example {
  margin: 1em;
  padding: 1em;
  display: inline-block;
  background-color: field;
  color: fieldtext;
}

HTML #

<div class="form">
  <input type="text" value="hell-o-whirled">
</div>

<div class="system-colors-example">
  系统颜色示例<br>
  此处颜色应当和输入框文字颜色匹配
</div>

需要使用的系统颜色关键字是Highlight。
将CSS规则里的red替换为Highlight即可，修改后的代码如下：

.form:focus-within {
  outline: 2px solid Highlight;
}

这个关键字对应系统里选中内容、焦点轮廓的高亮色，会自动跟随系统主题、深浅模式、用户自定义色彩偏好变化，和原生input的焦点轮廓颜色完全一致。
注意不要和AccentColor混淆：AccentColor是复选框、单选框、滑块这类表单控件的强调色，和焦点轮廓颜色不是同一个系统色值。

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