令牌不是变量清单
很多人把设计令牌理解成"把颜色写成变量"。真正有价值的部分是约束：定义完令牌之后，组件里就不该再出现裸的十六进制颜色。
一旦允许例外，令牌就会在半年内退化成一份没人维护的备忘单。
两层结构
我们用了两层：
:root存品牌原始值，比如--brand-accent@theme inline把原始值映射成 Tailwind 主题令牌，比如--color-accent
这样品牌值只有一个来源，而组件只消费语义令牌。换品牌色时只需要改一行。
三个容易踩的坑
- 命名冲突：两层如果同名，
var()会自己引用自己，必须在命名上区分。 - 暗色模式：只做暗色时不要引入
prefers-color-scheme，否则用户系统是亮色时会出现半亮半暗的割裂。 - 字阶缺失：只定义 h1 和 h3 会逼着人跳过层级，最好补一个 h2 的排版规则。
判断标准
如果换一个品牌色需要改动的文件超过一个，说明令牌还没抽干净。