# 色彩体系规范

## 色板层级

| 层级 | 说明 | 示例 |
|:----|:-----|:-----|
| 50 | 最浅色（背景色） | `#E3F2FD` |
| 100 | 浅色（hover/禁用背景） | `#BBDEFB` |
| 200 | 中浅色（选中背景） | `#90CAF9` |
| 300 | 中间色（边框/装饰） | `#64B5F6` |
| 400 | 中深色（次要文字） | `#42A5F5` |
| 500 | **基准色（品牌色）** | `#2196F3` |
| 600 | 深色（hover 状态） | `#1E88E5` |
| 700 | 更深色（active 状态） | `#1976D2` |
| 800 | 深色（强调文字） | `#1565C0` |
| 900 | 最深色（标题文字） | `#0D47A1` |

## 色彩分类

### 品牌色（Brand Colors）
- **Primary（主色）** — 品牌核心色彩，用于主要操作按钮、导航高亮、链接
- **Secondary（辅色）** — 辅助品牌色，用于次要操作、标签、装饰元素
- **Accent（强调色）** — 用于吸引注意力的高亮元素

### 中性色（Neutral Colors）
- 用于文字、背景、边框、分割线
- 建议至少 9 级灰度（Gray 50–900）

### 语义色（Semantic Colors）
| 类型 | 色值倾向 | 用途 |
|:----|:---------|:-----|
| Success（成功） | 绿色系 | 成功提示、完成状态 |
| Warning（警告） | 橙色系 | 警告提示、待处理状态 |
| Error（错误） | 红色系 | 错误提示、失败状态 |
| Info（信息） | 蓝色系 | 信息提示、通知 |

## 色彩命名规范

```
{语义}_{层级}
示例：primary_500, gray_100, success_50, error_700
```

## 无障碍对比度标准（WCAG 2.1）

| 级别 | 普通文字 | 大文字/图标 | 装饰元素 |
|:----|:---------|:------------|:---------|
| AA | ≥ 4.5:1 | ≥ 3:1 | 无要求 |
| AAA | ≥ 7:1 | ≥ 4.5:1 | 无要求 |

## 暗色模式色板规则
- 背景色：从 Gray 900+ 开始，向下取色
- 文字色：从 Gray 50 开始，向上取色
- 品牌色在暗色模式下可降低饱和度（-20%）
- 语义色保持色相不变，调整明度

## 主题色配置结构

```json
{
  "brand": { "primary": "#1890FF", "secondary": "#722ED1", "accent": "#13C2C2" },
  "neutral": { "background": "#F5F5F5", "text": "#262626", "border": "#D9D9D9" },
  "semantic": { "success": "#52C41A", "warning": "#FAAD14", "error": "#FF4D4F", "info": "#1890FF" }
}
```