@teamix-evo/skills 0.5.0 → 0.6.0

package/src/teamix-evo-design-opentrek/rules/design-tokens.css

@@ -0,0 +1,433 @@
+/**
+ * OpenTrek Design Tokens — v4.1（teamix-evo 对齐版）
+ *
+ * 信源：TrekClaw v4.1（OP Design Tokens v4.1 / tokens-v4.json）
+ * 品牌主色：#0055EE（深蓝 218.6°）
+ *
+ * 命名空间：颜色 token 统一使用 `--color-*` 前缀，对齐
+ * `@teamix-evo/tokens/variants/opentrek/theme.css` 的 Tailwind v4 @theme 命名。
+ * 非颜色 token（spacing / radius / font / shadow / duration / z-index 等）保持原命名，
+ * 已与 teamix-evo 一致。
+ *
+ * 值格式：保留 TrekClaw 的 HSL 三元组（不含 hsl() 包裹），
+ * 使用方式：`hsl(var(--color-token-name))`。
+ * 这与运行时 `@teamix-evo/tokens` 的 hsl() 包裹格式存在写法差异，
+ * 详见同目录 token-mapping.md「值格式差异」章节。
+ *
+ * 本文件仅作为 AI Skill 设计规则的参考文档，不参与运行时构建。
+ * 真正落地的 token 由 `teamix-evo tokens init opentrek` 写入消费方根 `tokens/`。
+ *
+ * 更新时间：2026-06-10（对齐 v7.8.5：Shadow 注释补齐）
+ */
+
+@layer base {
+  :root {
+    /* ========================================
+     * Brand / 主色（#0055EE 深蓝，真实色相 218.6°）
+     * 实测 #0055EE 的 HSL ≈ hsl(218.6, 100%, 46.7%)，以实际色值为准。
+     * ======================================== */
+    --color-primary: 218.6 100% 46.7%;  /* #0055EE 主按钮、链接、选中态、聚焦态边框、行动点、高亮 */
+    --color-primary-foreground: 0 0% 100%;  /* #FFFFFF 主色上的前景文字 */
+    --color-primary-hover: 218.6 100% 42%;  /* #004CD6 主按钮 hover 态 */
+    --color-primary-pressed: 218.6 100% 37.5%;  /* #0044BF 主按钮 pressed 态 */
+    --color-primary-glow: 226.9 100% 68.6%;  /* #5F82FF 主色光晕 / 渐变起始（sidebar Gradient） */
+
+    /* ========================================
+     * Accent / 辅助色（MasterGuide 提取）
+     * 用途：UI 强调色、图标、标签、次要操作
+     * 排序：蓝 → 紫 → 杏 → 靛 → 绿 → 洋红 → 青 → 橙 → 莓 → 橄榄
+     * ======================================== */
+    --color-accent-blue: 217.4 92.8% 67.5%;  /* #5F99F9 */
+    --color-accent-violet: 261.8 100% 74.1%;  /* #AB7BFF */
+    --color-accent-apricot: 38.1 95.9% 62.0%;  /* #CF8A1C */
+    --color-accent-indigo: 238.0 100% 76.7%;  /* #888BFF */
+    --color-accent-green: 140.2 43.7% 52.0%;  /* #4CB36F */
+    --color-accent-magenta: 297.6 66.1% 62.9%;  /* #DA62DF */
+    --color-accent-turquoise: 186.1 98.9% 37.1%;  /* #33AFA9 */
+    --color-accent-orange: 21.2 89.9% 64.9%;  /* #EF702C */
+    --color-accent-berry: 341.2 80.1% 66.5%;  /* #EE6590 */
+    --color-accent-olive: 84.1 51.8% 52.0%;  /* #7BAD30 */
+
+    /* ========================================
+     * Gray / 灰色完整色阶（v7.4 重构 — 合并整合 + 反白色新增）
+     * 色相统一冷灰调（210°/216°/218°/220°），8 级语义分层
+     * ======================================== */
+    --color-gray-primary: 220 9% 7%;  /* #101113 主要文字、大标题、sidebar 激活文字、顶部导航背景 */
+    --color-gray-primary-foreground: 210 33% 99%;  /* #FBFCFD 主题反白色 / 侧边栏反白文字色 */
+    --color-gray-secondary-foreground: 216 4% 26%;  /* #414346 次要文字颜色 */
+    --color-muted-foreground: 216 2% 45%;  /* #717376 弱化文字色（替代旧 --gray-tertiary） */
+    --color-gray-disabled: 210 3% 63%;  /* #9DA0A3 禁用文字颜色、输入框激活态 */
+    --color-gray-line: 210 9% 91%;  /* #E6E8EA 描边色、分割线、卡片边框（合并旧 --gray-border + --color-gray-line） */
+    --color-gray-sidebar-accent: 210 12% 93%;  /* #ECEEF0 sidebar 激活态背景 */
+    --color-gray-muted: 220 18% 97%;  /* #F5F6F8 表单禁用态色、目录激活背景色、表头颜色、页面背景、消息填充（合并旧 --gray-bg-dark + --gray-bg + --gray-fill） */
+    --color-gray-white: 0 0% 100%;  /* #FFFFFF 纯白 */
+
+    /* ========================================
+     * Legacy 别名（保留兼容旧引用，不新增使用）
+     * ======================================== */
+    --gray-title: 220 9% 7%;  /* #101113 */
+    --gray-secondary: 216 4% 26%;  /* #414346 */
+    --gray-tertiary: 216 2% 45%;  /* #717376 */
+    --gray-border: 210 9% 91%;  /* #E6E8EA */
+    --gray-fill: 220 18% 97%;  /* #F5F6F8 */
+    --gray-bg-dark: 220 18% 97%;  /* #F5F6F8 */
+    --gray-bg: 220 18% 97%;  /* #F5F6F8 */
+
+    /* ========================================
+     * 语义映射（shadcn 标准）
+     * ======================================== */
+    --color-foreground: 220 9% 7%;  /* #101113 shadcn 主前景文字（→ --color-gray-primary） */
+    --page-title: 220 9% 7%;  /* #101113 页面标题色（v7.4 起合并 → --color-gray-primary） */
+    --color-border: 210 9% 91%;  /* #E6E8EA shadcn 标准边框 token（→ --color-gray-line），区别于 colorMapping.border 语义引用 */
+    --color-input: 210 9% 91%;  /* #E6E8EA shadcn input 边框色（→ --color-gray-line） */
+    --color-ring: 218.6 100% 46.7%;  /* #0055EE shadcn focus ring（→ --color-primary） */
+
+    /* ========================================
+     * Background
+     * ======================================== */
+    --color-background: 220 18% 97%;  /* #F5F6F8 页面级背景 */
+    --color-background-dark: 216 42.9% 93.1%;  /* #E6ECF5 导航经过色（legacy） */
+    --color-background-panel: 220 27.3% 97.8%;  /* #F8F9FB 画布配置面板背景 */
+    --background-end: 220 18% 97%;  /* #F5F6F8 页面背景渐变结束色（与 --color-background 一致） */
+
+    /* ========================================
+     * Card / Popover / Secondary / Accent
+     * ======================================== */
+    --color-card: 0 0% 100%;  /* #FFFFFF 卡片与弹窗背景、输入框背景 */
+    --color-card-foreground: 220 9% 7%;  /* #101113 卡片上的前景文字（→ --color-gray-primary） */
+    --color-popover: 0 0% 100%;  /* #FFFFFF 浮层（Popover/Dropdown）背景 */
+    --color-popover-foreground: 220 9% 7%;  /* #101113 浮层文字色（→ --color-gray-primary） */
+    --color-secondary: 220 18% 97%;  /* #F5F6F8 shadcn secondary 背景（→ --color-gray-muted） */
+    --color-secondary-foreground: 220 9% 7%;  /* #101113 shadcn secondary 文字（→ --color-gray-primary） */
+    --color-muted: 220 18% 97%;  /* #F5F6F8 shadcn muted 背景（→ --color-gray-muted），区别于 --color-muted-foreground 文字色 */
+    --color-accent: 220 18% 97%;  /* #F5F6F8 shadcn accent 高亮（→ --color-gray-muted） */
+    --color-accent-foreground: 220 9% 7%;  /* #101113 shadcn accent 上的前景文字（→ --color-gray-primary） */
+
+    /* ========================================
+     * Success / 成功色（#16A34A，Tailwind green-600）
+     * ======================================== */
+    --color-success: 142 76% 36%;  /* #16A34A 成功状态、运行中、已开通 */
+    --color-success-foreground: 0 0% 100%;  /* #FFFFFF 成功色上的前景文字 */
+    --color-success-hover: 142 72% 29%;  /* #15803D 成功按钮 hover 态 */
+    --color-success-pressed: 143 60% 24%;  /* #166534 成功按钮 pressed 态 */
+    --color-success-bg: 152 82% 96%;  /* #ECFDF5 成功状态背景 */
+    --color-success-border: 142 77% 73%;  /* #86EFAC 成功状态边框 */
+    --success-dark: 142 72% 29%;  /* #15803D → --color-success-hover */
+    --success-medium: 142 77% 73%;  /* #86EFAC → --color-success-border */
+    --success-light: 152 82% 96%;  /* #ECFDF5 → --color-success-bg */
+    --success-aura: 0 0 8px rgba(22, 163, 74, 0.25);  /* 成功色光晕（box-shadow 用） */
+
+    /* ========================================
+     * Destructive / 警示色（#DC2626，Tailwind red-600）
+     * ======================================== */
+    --color-destructive: 0 72% 51%;  /* #DC2626 错误状态、已停止、失败、删除操作 */
+    --color-destructive-foreground: 0 0% 100%;  /* #FFFFFF 警示色上的前景文字 */
+    --color-destructive-hover: 0 74% 42%;  /* #B91C1C destructive 按钮 hover 态 */
+    --color-destructive-pressed: 0 70% 35%;  /* #991B1B 警示按钮 pressed 态 */
+    --color-destructive-bg: 0 86% 97%;  /* #FEF2F2 错误状态背景 */
+    --color-destructive-border: 0 93% 82%;  /* #FCA5A5 错误状态边框 */
+    --destructive-dark: 0 74% 42%;  /* #B91C1C → --color-destructive-hover */
+    --destructive-light: 0 86% 97%;  /* #FEF2F2 → --color-destructive-bg */
+    --destructive-aura: 0 0 8px rgba(220, 38, 38, 0.25);  /* 警示色光晕（box-shadow 用） */
+
+    /* ========================================
+     * Warning / 提醒色（#D97706，Tailwind amber-600）
+     * ======================================== */
+    --color-warning: 40 88% 48%;  /* #D97706 警告状态、创建中、停止中 */
+    --color-warning-foreground: 0 0% 100%;  /* #FFFFFF 警告色上的前景文字 */
+    --color-warning-hover: 38 85% 40%;  /* #B45309 警告按钮 hover 态 */
+    --color-warning-pressed: 35 78% 34%;  /* #92400E 警告按钮 pressed 态 */
+    --color-warning-bg: 43 100% 94%;  /* #FFF3DB 警告状态背景 */
+    --color-warning-border: 40 92% 68%;  /* #FBBF24 警告状态边框 */
+    --warning-dark: 38 85% 40%;  /* #B45309 → --color-warning-hover */
+    --warning-light: 43 100% 94%;  /* #FFF3DB → --color-warning-bg */
+    --warning-aura: 0 0 8px rgba(217, 119, 6, 0.25);  /* 警告色光晕（box-shadow 用） */
+
+    /* ========================================
+     * Info / 信息提示色（#2563EB，Tailwind blue-600）
+     * ======================================== */
+    --color-info: 221 83% 53%;  /* #2563EB 信息提示、异步操作中 */
+    --color-info-foreground: 0 0% 100%;  /* #FFFFFF 信息色上的前景文字 */
+    --color-info-hover: 224 76% 48%;  /* #1D4ED8 信息按钮 hover 态 */
+    --color-info-pressed: 226 71% 40%;  /* #1E40AF 信息按钮 pressed 态 */
+    --color-info-bg: 214 100% 97%;  /* #EFF6FF 信息状态背景 */
+    --color-info-border: 212 96% 78%;  /* #93C5FD 信息状态边框 */
+    --color-info-light: 213 100% 98.2%;  /* #F6FAFF 信息浅色背景（与 sidebar gradient 联动） */
+    --info-aura: 0 0 8px rgba(37, 99, 235, 0.25);  /* 信息色光晕（box-shadow 用） */
+
+    /* ========================================
+     * 图表用色 — 10 色标准组合（MasterGuide 提取）
+     * ======================================== */
+    --color-chart-1: 246.4 93.4% 64.5%;  /* #6250F9 */
+    --color-chart-2: 261.8 100% 74.1%;  /* #33AFA9 */
+    --color-chart-3: 297.3 56.9% 54.5%;  /* #AE34B4 */
+    --color-chart-4: 36.1 88.1% 57.1%;  /* #5F99F9 */
+    --color-chart-5: 266.2 77.7% 57.8%;  /* #9C660D */
+    --color-chart-6: 140.4 40.4% 50.0%;  /* #EE6590 */
+    --color-chart-7: 217.4 68.5% 51.4%;  /* #068580 */
+    --color-chart-8: 49.4 65.0% 42.5%;  /* #AB7BFF */
+    --color-chart-9: 207.7 11.0% 53.7%;  /* #5A8219 */
+    --color-chart-10: 341.2 80.1% 66.5%;  /* #7C8A96 */
+
+    /* ========================================
+     * Legacy 别名（兼容 --data-* 旧命名）
+     * ======================================== */
+    --data-1: var(--color-chart-1);  /* → --color-chart-1 */
+    --data-2: var(--color-chart-2);  /* → --color-chart-2 */
+    --data-3: var(--color-chart-3);  /* → --color-chart-3 */
+    --data-4: var(--color-chart-4);  /* → --color-chart-4 */
+    --data-5: var(--color-chart-5);  /* → --color-chart-5 */
+    --data-6: var(--color-chart-6);  /* → --color-chart-6 */
+    --data-7: var(--color-chart-7);  /* → --color-chart-7 */
+    --data-8: var(--color-chart-8);  /* → --color-chart-8 */
+    --data-9: var(--color-chart-9);  /* → --color-chart-9 */
+    --data-10: var(--color-chart-10);  /* → --color-chart-10 */
+
+    /* ========================================
+     * 顶栏 / 侧边栏
+     * ======================================== */
+    --color-topbar: 0 0% 7.8%;  /* #141414 顶栏背景色 */
+    --color-topbar-foreground: 0 0% 100%;  /* #FFFFFF 顶栏文字色 */
+    --color-topbar-divider: 0 0% 30.2%;  /* #4D4D4D 顶栏分割线 */
+    --topbar-height: 48px;  /* 顶栏高度 */
+    --color-sidebar: 220 18% 97%;  /* #F5F6F8 侧边栏背景色（v7.4 起 → --color-gray-muted） */
+    --color-sidebar-foreground: 220 9% 7%;  /* #101113 侧边栏默认文字色（v7.4 起 → --color-gray-primary） */
+    --color-sidebar-active: 210 12% 93%;  /* #ECEEF0 侧边栏激活态背景色（v7.4 起 → --color-gray-sidebar-accent） */
+    --color-sidebar-active-foreground: 220 9% 7%;  /* #101113 侧边栏激活态文字色（v7.4 起 → --color-gray-primary） */
+    --color-sidebar-hover: 220 18% 97%;  /* #F5F6F8 侧边栏菜单项 hover 背景色（v7.4 起 → --color-gray-muted） */
+    --color-sidebar-title: 220 9% 7%;  /* #101113 侧边栏标题文字色（v7.4 起 → --color-gray-primary） */
+    --color-sidebar-group: 216 2% 45%;  /* #717376 侧边栏分组标题文字色（v7.4 起 → --color-muted-foreground） */
+    --color-sidebar-item: 220 9% 7%;  /* #101113 侧边栏菜单项文字色（v7.4 起 → --color-gray-primary） */
+    --color-sidebar-item-muted: 216 4% 26%;  /* #414346 侧边栏次要菜单项文字色（v7.4 起 → --color-gray-secondary-foreground） */
+    --color-sidebar-accent: 210 12% 93%;  /* #F6FAFF 表格行选中背景（sidebar 选中态用 --color-sidebar-active，见 sidebarRules.colors.menuItem.active） */
+    --color-sidebar-accent-foreground: 218.6 100% 46.7%;  /* #0055EE 侧边栏强调文字色（= primary） */
+    --color-sidebar-border: 210 9% 91%;  /* #E6E8EA 侧边栏内部分隔线（菜单组间/折叠态边框），v7.4 起 → --color-gray-line；侧边栏容器禁止右侧外边框（详见 sidebarRules.colors.container.border: none） */
+    --color-sidebar-ring: 218.6 100% 46.7%;  /* #0055EE 侧边栏焦点环（= primary） */
+    --color-sidebar-primary: 218.6 100% 46.7%;  /* #0055EE 侧边栏主色（= primary） */
+    --color-sidebar-primary-foreground: 0 0% 100%;  /* #FFFFFF 侧边栏主色上的文字（白色） */
+    --color-avatar-bg: 216 11.1% 91.2%;  /* #E3E5E8 Sidebar 头像背景色 */
+
+    /* ========================================
+     * Sidebar Collapsed State
+     * ======================================== */
+    --sidebar-collapsed-width: 68px;  /* 侧边栏收起状态宽度（仅显示图标） */
+    --sidebar-menu-item-height: 40px;  /* 菜单项高度（展开/收起共用） */
+    --sidebar-menu-item-size-collapsed: 40px;  /* 收起态菜单项正方形尺寸 */
+    --sidebar-menu-item-gap-collapsed: 0px;  /* 收起态菜单项内部 gap（消除隐形文字节点的 flex 间距） */
+    --sidebar-header-padding-collapsed: 0 12px;  /* 收起态品牌区 padding */
+    --sidebar-footer-padding-collapsed: 12px 10px 16px;  /* 收起态底部 padding */
+    --sidebar-flyout-z-index: 200;  /* Flyout 浮层 z-index */
+    --sidebar-flyout-min-width: 160px;  /* Flyout 浮层最小宽度 */
+    --sidebar-flyout-item-height: 36px;  /* Flyout 浮层菜单项高度 */
+    --sidebar-centered-axis: 34px;  /* 收起态视觉中轴（68/2 = 34px） */
+    --sidebar-expand-icon-size: 14px;  /* 展开/折叠按钮图标尺寸 */
+
+    /* ========================================
+     * 类型标识 - API / MCP
+     * ======================================== */
+    --color-type-api: 221 83% 53%;  /* #2563EB API 类型主色 */
+    --color-type-api-light: 214 100% 92%;  /* #D6E8FF API 类型浅底 */
+    --color-type-api-border: 213 97% 87%;  /* #BFDBFE API 类型边框 */
+    --color-type-mcp: 271 81% 56%;  /* #9333EA MCP 类型主色 */
+    --color-type-mcp-light: 264 77% 95%;  /* #F0E8FC MCP 类型浅底 */
+    --color-type-mcp-border: 269 100% 92%;  /* #E9D5FF MCP 类型边框 */
+
+    /* ========================================
+     * 状态指示点
+     * ======================================== */
+    --color-status-running: 142 76% 36%;  /* #16A34A 运行中（→ --color-success） */
+    --color-status-stopped: 222 7.6% 74.1%;  /* #BABCBF 已停止（→ --color-gray-disabled 同色系） */
+    --color-status-error: 0 72% 51%;  /* #DC2626 错误（→ --color-destructive） */
+
+    /* ========================================
+     * 终端 / 代码块
+     * ======================================== */
+    --color-terminal: 222 47% 11%;  /* #0F172A 终端背景 */
+    --color-terminal-foreground: 142 69% 58%;  /* #4ADE80 终端前景（绿色字符） */
+
+    /* ========================================
+     * Font Family / 字体族（v7.8.4 新增）
+     * body 必须使用 var(--font-sans)，代码片段使用 var(--font-mono)
+     * 禁止在页面中硬编码 font-family 堆栈
+     * ======================================== */
+    --font-sans: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;  /* UI 文字、正文、标题、标签、按钮等所有非代码文本 */
+    --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;  /* 代码/ID/IP/版本号/实例规格等机器可读标识符 */
+
+    /* ========================================
+     * Typography / 字号等级（v4 规则）
+     * base=12 / lg=14 / xl=16 / 2xl=18
+     * ======================================== */
+    --font-size-base: 0.75rem;  /* 正文/标签/脚注/输入框/表格/Badge/分页/页面副标题 */
+    --font-size-lg: 0.875rem;  /* 强调正文/弹窗标题/抽屉标题/Tab */
+    --font-size-xl: 1rem;  /* Sidebar 品牌区文字、小标题、卡片标题、区块标题 */
+    --font-size-2xl: 1.125rem;  /* 页面主标题（PageHeader）、概览统计大数字 */
+    --font-size-page-header: 1.125rem;  /* PageHeader 页面主标题专用字号（映射到 --font-size-2xl）。生成页面时 .page-header-title 必须使用此变量。 */
+    --font-weight-normal: 400;  /* 正文、Tab 常态、表格单元格 */
+    --font-weight-medium: 500;  /* 标签、导航、Tab 激活、弹窗标题、按钮 */
+    --font-weight-black: 900;  /* Sidebar 品牌区文字 */
+    --line-height-input: 1.5;
+    --line-height-normal: 1.5;
+    --line-height-dialog-title: 1.57;
+    --letter-spacing-tight: -0.025em;
+    --letter-spacing-normal: 0em;
+
+    /* ========================================
+     * 间距（v4 保留项目原值：button-gap=8 / card-gap=16 / page-container-*）
+     * ======================================== */
+    --gap-xs: 4px;  /* Button 内部 icon↔文字间距 */
+    --btn-padding-x: 16px;  /* 按钮水平内边距（默认尺寸 height=32px） */
+    --btn-padding-x-sm: 12px;  /* 小号按钮水平内边距（卡片内操作等紧凑场景） */
+    --button-gap: 8px;  /* 操作栏按钮行/筛选器行/分页器间距 */
+    --tabs-gap: 24px;  /* Tabs 标签项之间的水平间距 */
+    --card-gap: 16px;  /* 卡片网格间距/区块之间垂直间距 */
+    --page-container-gap: 16px;  /* 白卡外间距同义别名（v7.5 由 20px → 16px） */
+    --page-container-padding: 16px;  /* 白卡外间距（上/右/下）/ PageContainer 内边距（top/right/bottom）（v7.5 由 20px → 16px） */
+    --page-container-padding-left: 0px;  /* 主内容区左边缘 → 白卡容器左边缘间距；sidebar 与内容区之间不预留间距，白卡紧贴 sidebar 右侧 */
+    --card-padding-x: 20px;  /* 白卡容器（ContentCard）内部左右内边距（v7.5 由 24px → 20px）；Card 内所有子组件的唯一外侧呼吸来源。独立于 --page-container-padding（PageContainer 外层间距 16px），两者属不同设计层级，不可混用。 */
+
+    /* ========================================
+     * Layout Frame Width
+     * ======================================== */
+    --layout-sidebar-width: 240px;
+
+    /* ========================================
+     * Table Cell Padding (v7.5 三层模型)
+     * ======================================== */
+    --table-cell-padding-x: 12px;  /* 中间列 td 水平内边距 */
+    --table-first-cell-padding-left: 20px;  /* 首列 padding-left（额外缩进 20px） */
+    --table-last-cell-padding-right: 20px;  /* 末列 padding-right（额外缩进 20px） */
+
+    /* ========================================
+     * CardGrid 列宽预设 (v7.2 新增，业务卡片页 minWidth token 化)
+     * ======================================== */
+    --card-grid-min-compact: 240px;  /* iconStyle=avatar + density=minimal */
+    --card-grid-min-standard: 300px;  /* iconStyle=avatar + density=standard（默认） */
+    --card-grid-min-comfortable: 320px;  /* iconStyle=tile + density=standard */
+    --card-grid-min-feature: 360px;  /* iconStyle=avatar + density=complex */
+
+    /* ========================================
+     * Page Header
+     * ======================================== */
+    --page-header-height: 64px;  /* PageHeader 高度 */
+    --breadcrumb-height: 64px;  /* Breadcrumb 高度 */
+
+    /* ========================================
+     * ActionToolbar
+     * ======================================== */
+    --action-toolbar-search-combo-gap: 20px;  /* ActionToolbar 中 SearchCombo 与 .left-actions 间距 */
+
+    /* ========================================
+     * 圆角（v4 更新）
+     * sm=4 / md=8 / lg=12 / xl=16 / full=9999
+     * drawer-radius 已移除
+     * ======================================== */
+    --radius: 1rem;  /* 全局基准圆角（= --radius-xl 16px，对话框/大型容器） */
+    --radius-sm: 4px;  /* Badge、Chip、Checkbox、select-item */
+    --radius-md: 8px;  /* 按钮、输入框、Select trigger、Toggle capsule */
+    --radius-lg: 12px;  /* 卡片 */
+    --radius-xl: 16px;  /* 对话框、大型容器（= --radius） */
+    --radius-full: 9999px;  /* 完全圆形、药丸标签、Switch handle */
+    --card-radius: 12px;  /* → --radius-lg（卡片圆角，原 8px 已升至 12px） */
+    --input-radius: 8px;  /* → --radius-md（输入框圆角，原 6px 已升至 8px） */
+
+    /* ========================================
+     * Input / 输入框
+     * ======================================== */
+    --input-height: 32px;
+    --input-font-size: 12px;
+    --text-font-size: 14px;  /* → --font-size-lg（强调正文 legacy 别名） */
+    --input-line-height: 18px;
+    --input-padding-x: 8px;
+    --input-padding-y: 7px;
+    --color-input-placeholder: 0 0% 66.7%;  /* #AAAAAA 占位符、不可用文字 */
+    --input-icon-size: 16px;
+
+    /* ========================================
+     * Dialog / 弹窗
+     * ======================================== */
+    --dialog-width-s: 400px;  /* 二次确认/极简字段 */
+    --dialog-width-m: 600px;  /* 常用弹窗 */
+    --dialog-width-l: 800px;  /* 宽表格 */
+    --dialog-width-xl: 1000px;  /* 分栏/超复杂 */
+    --dialog-header-height: 46px;
+    --dialog-footer-height: 64px;
+    --dialog-body-padding-x: 20px;
+    --dialog-body-padding-y: 16px;
+    --shadow-dialog: 0px 12px 48px 0px rgba(0, 0, 0, 0.2);
+
+    /* ========================================
+     * Drawer / 抽屉
+     * ======================================== */
+    --drawer-width-s: 400px;
+    --drawer-width-m: 600px;
+    --drawer-width-l: 800px;
+    --drawer-width-xl: 1200px;
+
+    /* ========================================
+     * Shadow / 阴影等级（v4 新增；v7.6 补充 ContentCard surface 规则）
+     * ----------------------------------------
+     * v7.6 内容区大卡片容器（ContentCard / G-C024 作为白卡容器使用时）表面规则：
+     * - 去掉 1px solid border（不使用 --color-gray-line 边框）
+     * - 使用最弱阴影 var(--shadow-sm) = 0 1px 2px rgba(0,0,0,0.05)
+     * 详见 design-tokens.json · shadowMapping
+     * ======================================== */
+    --shadow-none: 0 0 #0000;  /* 无阴影 */
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);  /* 按钮、输入框微浮起；v7.6 起作为 ContentCard 白卡容器唯一阴影源（无边框方案的最弱阴影） */
+    --shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);  /* 卡片默认阴影（v7.6 起 ContentCard 不再使用，已转为 sm） */
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);  /* 卡片、面板、Dropdown */
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);  /* Popover、Toast、右键菜单 */
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);  /* Dialog、Sheet、Command Palette */
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);  /* 顶层模态、全屏遮罩 */
+    --shadow-dialog: 0px 12px 48px 0px rgba(0, 0, 0, 0.2);  /* 弹窗专属阴影 */
+    --shadow-select-content: 0 6px 24px rgba(0,0,0,0.1);  /* Select 弹层阴影 */
+
+    /* ========================================
+     * Animation / 动画（v4 新增）
+     * ======================================== */
+    --duration-fast: 150ms;  /* 微交互(hover/focus) */
+    --duration-normal: 200ms;  /* 常规过渡(Accordion/Tabs) */
+    --duration-slow: 300ms;  /* 面板滑入(Sheet/Dialog) */
+    --duration-slower: 500ms;  /* 大型展开动画 */
+    --easing-linear: cubic-bezier(0, 0, 1, 1);
+    --easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* ========================================
+     * Z-index 层级
+     * ======================================== */
+    --z-base: 0;
+    --z-dropdown: 50;
+    --z-sticky: 100;
+    --z-overlay: 200;
+    --z-modal: 300;
+    --z-tooltip: 500;
+
+    /* ========================================
+     * Form Layout / 表单布局
+     * ======================================== */
+    --form-label-width: 140px;  /* 左右布局下 label 列宽度 */
+    --form-control-max-width: 400px;  /* 表单控件最大宽度 */
+    --form-row-gap: 24px;  /* 表单分组间距 */
+    --form-row-padding-y: 12px;  /* 表单行垂直内边距 */
+    --form-description-font-size: 13px;  /* 表单描述文字字号 */
+    --form-required-indicator-margin-left: 2px;  /* 必填星号与 label 间距 */
+
+    /* ========================================
+     * Pagination / 分页
+     * ======================================== */
+    --pagination-button-size: 32px;  /* 分页按钮正方形尺寸 */
+    --pagination-arrow-icon-size: 20px;  /* 左右翻页箭头图标尺寸 */
+    --pagination-ellipsis-icon-size: 16px;  /* 省略号图标尺寸 */
+    --button-sm-height: 28px;  /* 小号按钮高度（分页/紧凑场景共用） */
+
+    /* ========================================
+     * Stepper / 步进器
+     * ======================================== */
+    --stepper-button-width: 32px;  /* 加减按钮宽度 */
+    --stepper-button-height: 36px;  /* 加减按钮高度 */
+    --stepper-input-width: 60px;  /* 数值输入框宽度 */
+    --stepper-input-height: 36px;  /* 数值输入框高度 */
+  }
+}