badge · 状态标记
badge 承载一个短状态词（"已停牌""审计中"）。
它不可点 —— 要能点请用 <button class="badge badge--clickable">
或 <a>，语义由元素本身承担。
五个变体
为什么是「淡底 + 深字」而不是「饱和底 + 白字」？因为 badge 只有 11–12px， 小字号在饱和底上对比度普遍不够。本库五组实测 4.82–6.76（浅色）· 5.25–10.59（暗色）， 全部 ≥ 4.5，不需要为 badge 单独调一套色。
用在真实语境里
每一枚都自带文字（WCAG 1.4.1：不能只靠颜色区分）—— 去掉颜色也能读懂，颜色只是冗余线索。
两档尺寸
只有两档。出现第三档说明信息密度没规划好
（与 card 的判断标准一致）。
反例
反例：饱和底 + 白字
看起来"更醒目"，但白字在小字号饱和底上对比度普遍不足。
实测（contrast.py）：暗色下白字在 --success 上只有
2.72:1，远低于 4.5；浅色下是 6.39 达标 ——
也就是说这套写法在暗色下会直接失效，而看浅色时完全发现不了。
并且全页面只有这三个色块时，视觉噪声远大于信息量。
反例：用 badge 装可点的东西
<div class="badge badge--info" onclick="...">待复核</div>
—— div 加 onclick 对读屏是「没有角色的按钮」：
读不出来它是能点的，键盘也 Tab 不到。
要能点就用 <button> 或 <a>，样式照抄 .badge。
⚠️ 但这句建议目前有个坑：换成 button/a 之后，
本库 badge 门禁会判「命中区 54×24 < 44px」—— 徽标本体的高度不够。
这个问题还没解决，不是演示写错了。
强制高对比模式
Windows 的高对比模式会覆盖底色。本组件在
@media (forced-colors: active) 下把边框换成
currentColor —— 靠边框保住边界，不靠底色。
这一段无法在本机验证（需要系统级开关）。