feat(tokens): 扩充视觉令牌到八类并统一焦点环与动效

- 保留原有颜色/圆角/间距/字号四组，新增字重行高、边框、阴影、动效、
  焦点环、控件高度、层级七组，共十一组；每个变量补中文用途注释
- 阴影收敛为四档 elevation（柔和优先：扩散更大、透明度更低），并在
  [data-theme=dark] 覆盖为更高黑度，解决暗色下阴影沿用亮色投影的问题
- 动效时长收为 fast/base/slow 三档（fast 取 0.15s，贴合现有主流时长），
  补 --ua-ease / --ua-ease-out 两条主缓动
- 焦点环统一为 --ua-focus-ring / --ua-focus-ring-inset 两个槽位
- 字号补 xs/xl/2xl，控件高度三档，层级五档
- tokens.json 资产清单按新分组同步

packages/design/tokens/tokens.css

@@ -1,40 +1,95 @@
-/* @ui-arch design tokens - light theme defaults + dark theme overrides */
+/* @ui-arch design tokens - light theme defaults + dark theme overrides
+   分组：颜色 / 圆角 / 间距 / 字号 / 字重与行高 / 边框 / 阴影 / 动效 / 焦点环 / 控件高度 / 层级
+   约定：皮肤包（packages/skin/ui/ui.css）只能消费 var(--ua-*)，禁止硬编码颜色、阴影、时长、字号；
+   本文件是令牌唯一来源，ua tokens / llms-full.txt / MCP get_tokens 全部从这里派生。 */
 :root {
-  --ua-color-bg: #ffffff;
-  --ua-color-surface: #f6f7f9;
-  --ua-color-text: #1c1e21;
-  --ua-color-text-muted: #6b7280;
-  --ua-color-border: rgba(0, 0, 0, 0.15);
-  --ua-color-accent: #185fa5;
-  --ua-color-accent-contrast: #ffffff;
-  --ua-color-danger: #a32d2d;
-  --ua-color-success: #0f6e56;
-  --ua-color-warning: #9a6b1f;
+  /* ---- 颜色：语义色，暗色主题逐个覆盖 ---- */
+  --ua-color-bg: #ffffff; /* 页面底色：弹层、卡片之外的最底层 */
+  --ua-color-surface: #f6f7f9; /* 表面色：卡片 / 表头 / 次级容器 */
+  --ua-color-text: #1c1e21; /* 主文本色：正文与标题共用 */
+  --ua-color-text-muted: #6b7280; /* 辅助文本色：说明、占位、次要信息 */
+  --ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
+  --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
+  --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
+  --ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
+  --ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
+  --ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */
 
-  --ua-radius-sm: 4px;
-  --ua-radius-md: 8px;
-  --ua-radius-lg: 12px;
+  /* ---- 圆角：三档，控件用小、卡片用中、弹层用大 ---- */
+  --ua-radius-sm: 4px; /* 小圆角：按钮 / 输入框 / 标签等控件 */
+  --ua-radius-md: 8px; /* 中圆角：卡片 / 面板 / 分组容器 */
+  --ua-radius-lg: 12px; /* 大圆角：弹窗 / 抽屉等浮层外壳 */
 
-  --ua-space-1: 4px;
-  --ua-space-2: 8px;
-  --ua-space-3: 12px;
-  --ua-space-4: 16px;
-  --ua-space-table-cell: var(--ua-space-2) var(--ua-space-3);
+  /* ---- 间距：4px 基准四档 + 表格单元格复合值 ---- */
+  --ua-space-1: 4px; /* 间距 1 档：图标与文字之间、紧邻元素 */
+  --ua-space-2: 8px; /* 间距 2 档：控件内边距、同组元素间隔 */
+  --ua-space-3: 12px; /* 间距 3 档：表单行内边距、卡片内边距 */
+  --ua-space-4: 16px; /* 间距 4 档：区块内边距、卡片间距 */
+  --ua-space-table-cell: var(--ua-space-2) var(--ua-space-3); /* 表格单元格内边距：上下 2 档 / 左右 3 档 */
 
-  --ua-font-size-sm: 12px;
-  --ua-font-size-md: 13px;
-  --ua-font-size-lg: 14px;
+  /* ---- 字号：五档主轴 + 两档展示字号（10/11px 统一归入 xs，避免单独成档） ---- */
+  --ua-font-size-xs: 11px; /* 最小字号：角标 / 辅助说明 / 密排表格 */
+  --ua-font-size-sm: 12px; /* 小字号：次级文本、表头、提示 */
+  --ua-font-size-md: 13px; /* 正文字号：控件文本与默认正文 */
+  --ua-font-size-lg: 14px; /* 大字号：强调正文、卡片标题 */
+  --ua-font-size-xl: 16px; /* 次标题字号：分组标题、弹窗标题 */
+  --ua-font-size-2xl: 18px; /* 标题字号：页面区块标题 */
+
+  /* ---- 字重与行高：标题 / 正文 / 辅助三档 ---- */
+  --ua-weight-normal: 400; /* 常规字重：正文与表单值 */
+  --ua-weight-medium: 500; /* 中字重：控件文本、表头、强调条目 */
+  --ua-weight-semibold: 600; /* 半粗字重：标题、关键数值 */
+  --ua-leading-tight: 1.35; /* 紧凑行高：标题、按钮、单行控件 */
+  --ua-leading-normal: 1.55; /* 常规行高：多行正文、说明文字 */
+
+  /* ---- 边框：细分（比基础边框更淡，用于分割线，避免 1px 线过重） ---- */
+  --ua-border-subtle: color-mix(in srgb, var(--ua-color-border) 60%, transparent); /* 细分边框色：表格分割线、卡片内分隔 */
+
+  /* ---- 阴影：四档 elevation，柔和优先（扩散大、透明度低） ---- */
+  --ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); /* 1 档：贴地投影，用于卡片 / 输入组 / 轻浮起 */
+  --ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1); /* 2 档：下拉菜单 / 选择面板 / 气泡提示 */
+  --ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.12); /* 3 档：浮层 / 悬浮面板 / 拖拽中的卡片 */
+  --ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.14); /* 4 档：模态弹窗 / 抽屉 / 通知中心等最高层 */
+
+  /* ---- 动效：三档时长 + 两条主缓动曲线 ---- */
+  --ua-duration-fast: 0.15s; /* 快：hover / 聚焦 / 颜色与边框变化（既有样式的主流时长） */
+  --ua-duration-base: 0.2s; /* 中：展开收起 / 位移 / 透明度过渡 */
+  --ua-duration-slow: 0.25s; /* 慢：浮层出入场 / 较大面积变化 */
+  --ua-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* 标准缓动：先快后缓，控件交互默认用这条 */
+  --ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 出场缓动：元素进入视口 / 弹层出现时使用 */
+
+  /* ---- 焦点环：统一外环与内嵌两种形态，全部由强调色派生 ---- */
+  --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent); /* 外焦点环：输入框 / 按钮 / 可聚焦控件 */
+  --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 内嵌焦点环：内部已裁切或需要贴合边框的控件 */
+
+  /* ---- 控件高度：三档，略放大以提升可点面积 ---- */
+  --ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
+  --ua-control-h-md: 34px; /* 中控件高度：输入框 / 下拉 / 按钮的默认档 */
+  --ua-control-h-lg: 40px; /* 大控件高度：主按钮、搜索框、移动端触控目标 */
+
+  /* ---- 层级：五档，数值留出间隙便于中间插入 ---- */
+  --ua-z-dropdown: 100; /* 下拉层：菜单 / 选择面板 / 气泡 */
+  --ua-z-sticky: 200; /* 粘性层：表头、吸顶工具栏 */
+  --ua-z-overlay: 300; /* 遮罩层：模态背后的半透明遮罩 */
+  --ua-z-modal: 400; /* 模态层：弹窗 / 抽屉本体 */
+  --ua-z-toast: 500; /* 通知层：全局消息提示，永远最高 */
 }
 
 [data-theme='dark'] {
-  --ua-color-bg: #101216;
-  --ua-color-surface: #1a1c22;
-  --ua-color-text: #e7e9ec;
-  --ua-color-text-muted: #888780;
-  --ua-color-border: rgba(255, 255, 255, 0.15);
-  --ua-color-accent: #378add;
-  --ua-color-accent-contrast: #042c53;
-  --ua-color-danger: #d96a6a;
-  --ua-color-success: #4fc39e;
-  --ua-color-warning: #d9a94f;
+  --ua-color-bg: #101216; /* 暗色页面底色 */
+  --ua-color-surface: #1a1c22; /* 暗色表面色 */
+  --ua-color-text: #e7e9ec; /* 暗色主文本色 */
+  --ua-color-text-muted: #888780; /* 暗色辅助文本色 */
+  --ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
+  --ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
+  --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
+  --ua-color-danger: #d96a6a; /* 暗色危险色 */
+  --ua-color-success: #4fc39e; /* 暗色成功色 */
+  --ua-color-warning: #d9a94f; /* 暗色警告色 */
+
+  /* 暗色下投影需要更高黑度才看得见：亮色那套在暗底上几乎不可见 */
+  --ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); /* 暗色 1 档：贴地投影 */
+  --ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4); /* 暗色 2 档：下拉 / 气泡 */
+  --ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.45); /* 暗色 3 档：浮层 / 悬浮面板 */
+  --ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.5); /* 暗色 4 档：模态 / 抽屉 / 通知 */
 }