# Design Token — 宇之然 UI 规范

> 统一 Web (Next.js) 和 Mobile (Vue) 的设计语言。

## 色彩系统

### 语义色板 (CSS Variables)

| Token | 浅色 | 深色 | 用途 |
|-------|------|------|------|
| `--background` | `0 0% 100%` | `222.2 84% 4.9%` | 页面背景 |
| `--foreground` | `222.2 84% 4.9%` | `210 40% 98%` | 主要文字 |
| `--card` | `0 0% 100%` | `222.2 84% 4.9%` | 卡片/面板背景 |
| `--muted` | `210 40% 96.1%` | `217.2 32.6% 17.5%` | 次级背景（消息气泡、标签底） |
| `--muted-foreground` | `215.4 16.3% 46.9%` | `215 20.2% 65.1%` | 次级文字（描述、辅助信息） |
| `--accent` | `210 40% 96.1%` | `217.2 32.6% 17.5%` | Hover/激活背景 |
| `--border` | `214.3 31.8% 91.4%` | `217.2 32.6% 17.5%` | 边框/分割线 |
| `--ring` | `207 100% 38%` | `207 58% 52%` | Focus 环 |
| `--primary` (brand-600) | `207 100% 38%` | `207 58% 52%` | 品牌主色（按钮/链接） |

### Tailwind 映射

```css
/* 禁止使用的旧颜色 */
text-gray-*    → text-foreground / text-muted-foreground
bg-gray-*      → bg-card / bg-muted / bg-accent
border-gray-*  → border-border

/* 品牌色阶梯 */
brand-50  ~ #f0f7ff   背景 tint
brand-100 ~ #e0effe   标签背景
brand-600 ~ #0070c4   主色（按钮/链接）
```

### Mobile (Vue) 对应

Mobile 使用 uni-app，CSS 变量命名相同，在 `App.vue` 定义：

```css
/* mobile/src/App.vue */
page {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #666666;
  --border: #e5e5e5;
  --brand: #0070c4;
}
```

## 间距系统

| Token | 值 | 用途 |
|-------|-----|------|
| page padding | `px-4 sm:px-6 lg:px-8` | 页面级内边距 |
| card padding | `p-4 sm:p-6` | 卡片内边距 |
| section gap | `gap-4 md:gap-6` | 卡片/区块间距 |
| content max-w | `max-w-7xl` | 内容页宽度 |
| text max-w | `max-w-3xl` | 法律/文本页宽度 |

## 圆角

| Token | 值 | 用途 |
|-------|-----|------|
| `--radius` | `0.75rem` (12px) | 基础圆角 |
| `rounded-xl` | 12px | 卡片圆角 |
| `rounded-2xl` | 16px | 大圆角容器 |
| `rounded-lg` | 8px | 按钮/输入框 |
| `rounded-full` | 9999px | 标签/徽章 |

## 排版

| 层级 | 类名 | 字体大小 | 用途 |
|------|------|---------|------|
| H1 | `text-3xl font-bold` | 30px/1.2 | 页面标题 |
| H2 | `text-xl font-semibold` | 20px/1.4 | 区块标题 |
| H3 | `text-lg font-semibold` | 18px/1.4 | 卡片标题 |
| Body | `text-sm` | 14px/1.5 | 正文 |
| Caption | `text-xs` | 12px/1.5 | 辅助文字 |
| Mono | `text-sm font-mono` | 14px | 代码 |

## 组件模式

### PageLayout — 页面容器
```tsx
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div className="mb-8">
    <h1 className="text-3xl font-bold text-foreground">标题</h1>
    <p className="mt-2 text-muted-foreground">描述</p>
  </div>
  {/* 内容 */}
</div>
```

### Card — 卡片容器
```tsx
<div className="bg-card rounded-2xl border border-border p-6">
  {/* 内容 */}
</div>
```

### StatCard — 统计数字卡片
```tsx
<div className="bg-card rounded-xl border border-border p-6">
  <div className="text-sm text-muted-foreground mb-1">标签</div>
  <div className="text-2xl font-bold text-foreground">数值</div>
</div>
```

### FormField — 表单字段
```tsx
<div>
  <label className="block text-sm font-medium text-foreground mb-1">标签</label>
  <input className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground" />
</div>
```

## Mobile (Vue) 迁移清单

| 文件 | 状态 | 备注 |
|------|------|------|
| `mobile/src/styles/variables.css` | ✅ 新建 | 完整 Design Token CSS 变量定义 |
| `mobile/src/App.vue` | ✅ 已修复 | 使用 `var(--muted)` / `var(--foreground)` |
| `mobile/src/pages/sandbox/index.vue` | ✅ 已修复 | 参考页面，全部替换为 CSS 变量 |
| 其余 16 个页面 | ⏳ | 按 sandbox 模式全局替换硬编码颜色 |

### Mobile 迁移对照表

| 旧值 | 新值 |
|------|------|
| `#fff` / `white` | `var(--card)` |
| `#f5f5f5` | `var(--muted)` |
| `#333` | `var(--foreground)` |
| `#666` / `#999` | `var(--muted-foreground)` |
| `#4f8cff` | `var(--brand)` |
| `#e0effe` | `var(--brand-light)` |
| `#f0f0f0` / `#e5e5e5` | `var(--border)` |
| `12rpx` border-radius | `var(--radius)` |

> 此文档在 UI 变更时同步更新。