# 设计规范 Design Tokens

## 颜色 Colors

| Token | Hex | 用途 |
|---|---|---|
| --brand-primary | `#FF6B35` | 主色 / 按钮 / 关键数据 / 强调 |
| --brand-primary-dark | `#E5562A` | 主色按下态 |
| --brand-secondary | `#FFB800` | 积分 / 抽奖 / 现金相关 |
| --accent-success | `#22C55E` | 成功 / 完成 / 中奖 |
| --accent-danger | `#EF4444` | 错误 / 失败 / 倒计时警告 |
| --bg-primary | `#0F1115` | 页面深色背景 |
| --bg-card | `#1A1D24` | 卡片背景 |
| --bg-elevated | `#252932` | 弹层 / 高亮卡 |
| --text-primary | `#FFFFFF` | 主文本 |
| --text-secondary | `#A0A6B0` | 次文本 |
| --text-muted | `#6B7280` | 辅助文本 |
| --border-subtle | `#2A2E37` | 分割线 |

## 字体 Typography

- 中文字体：`-apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`
- 数字字体：优先 `font-variant-numeric: tabular-nums` 等宽数字
- 字号：
  - `text-xs` 12px 辅助
  - `text-sm` 14px 正文
  - `text-base` 16px 标题
  - `text-lg` 18px 卡片标题
  - `text-xl` 20px 区块标题
  - `text-2xl` 24px 数据展示
  - `text-3xl` 30px 大数据
  - `text-4xl` 36px Hero 数据

## 间距 Spacing

- 4 8 12 16 20 24 32（Tailwind 默认）
- 页面左右内边距统一 `px-5` (20px)
- 卡片圆角 `rounded-2xl` (16px)
- 按钮圆角 `rounded-full` (胶囊)

## 图标 Icons

- 使用 Lucide Icons（CDN，stroke-width=2）
- 默认尺寸 20px / 24px

## 页面尺寸

- iPhone 14 Pro: 393 × 852px
- 内容最大宽度：353px (393 - 20×2)

## 组件模式

### 卡片
```
bg-bg-card rounded-2xl p-4
```

### 主按钮
```
bg-brand-primary text-white rounded-full px-6 py-3 font-medium
```

### 称号标签
```
px-2 py-1 rounded-md text-xs font-bold
- 王者: bg-gradient-to-r from-purple-600 to-pink-600
- 钻石: bg-gradient-to-r from-cyan-400 to-blue-500
- 铂金: bg-gradient-to-r from-gray-300 to-gray-400 text-black
- 黄金: bg-gradient-to-r from-yellow-400 to-amber-500 text-black
- 白银: bg-gradient-to-r from-gray-100 to-gray-300 text-black
- 青铜: bg-gradient-to-r from-orange-700 to-orange-900
```

## 动效（原型阶段暂用 CSS transition）

- hover / 按下：scale 0.98 + brightness
- 滚动列表：CSS 动画 infinite