用 CSS 变量做一套不会打架的主题系统

主题混乱的根源，通常不是颜色太多，而是颜色没有名字。

第一步是把所有具体色值收进 :root，并给它们语义化的名字：background、foreground、card、muted、primary。组件只引用名字，不引用色值。

第二步是把切换成本压到最低：深色模式只需要覆盖同一批变量，而不是重写样式表。

最后给 body 加一个 400ms 的颜色过渡，切换主题时整个页面像被轻轻擦亮，而不是突然闪一下。