同一作品，长成你的样子

01 · 先列规则，再选颜色

设计系统不是颜色收藏。先定义页面底色、文字色、弱文字、主色、边框、圆角、间距和字体，再让所有组件使用这些变量。

本课做“林地”和“墨蓝”两套主题。每套都只设一个主色与一组中性色，结构和信息层级必须完全一致。

:root {
  --color-bg: #f5f0e6;
  --color-text: #242622;
  --color-muted: #62655d;
  --color-accent: #194b3a;
  --color-line: rgba(36, 38, 34, .16);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius: .35rem;
}

02 · 让 Agent 重构为 token

这一步只重构样式来源，不改变功能。明确“不改功能和文案”是本轮最重要的边界。

请修改 10-theme-system/theme-system.html（内容来自上一课的计划器），不要改变任何功能和文案。

先扫描 CSS 中所有颜色、间距、圆角和字体声明，整理为语义化 CSS 自定义属性。组件只能使用 token，不直接写重复色值。
建立“林地”和“墨蓝”两套主题；主题切换按钮要说明当前主题；选择保存到 localStorage；系统 prefers-reduced-motion 时取消主题过渡；按钮 hover、focus、disabled 状态在两套主题中都清楚。
完成后列出 token 表，并说明哪些组件使用它们。

03 · 检查一致性而不是新鲜感

切换主题时，布局、字号层级、按钮位置和交互都不应跳动。主题只改变视觉语言，不改变任务路径。

1. 分别截取两套主题的同一页面状态。
2. 叠放截图，确认结构位置一致。
3. 检查主按钮、次按钮、输入框、错误文字和焦点五种状态。
4. 刷新页面，确认主题选择保留。

04 · 做一次 token 审计

不是所有数字都必须变量化。只复用一次、表达特定几何关系的值可以保留；跨组件重复或承载语义的值应该进入 token。

请审计 theme-system.html：搜索所有十六进制、rgb、px 间距和 border-radius。列出仍直接写在组件里的值，并判断应成为 token 还是保留为局部特例。先给审计表，不要自动修改。