# 🎨 Drama Ling 色彩系統

**更新日期**: 2025-09-14
**版本**: v1.0
**狀態**: 基礎規範

## 🌈 主要色彩

### 品牌色
- **主色調**: `#4F46E5` (Indigo-600) - 學習專注色
- **輔助色**: `#EC4899` (Pink-500) - 遊戲化強調色
- **成功色**: `#10B981` (Emerald-500) - 正確/成功狀態
- **警告色**: `#F59E0B` (Amber-500) - 提醒/注意
- **錯誤色**: `#EF4444` (Red-500) - 錯誤/失敗狀態

### 中性色
- **背景主色**: `#FFFFFF` (White)
- **背景次色**: `#F9FAFB` (Gray-50)
- **文字主色**: `#111827` (Gray-900)
- **文字次色**: `#6B7280` (Gray-500)
- **邊框色**: `#E5E7EB` (Gray-200)

## 🎭 場景色彩

### 學習關卡色彩
- **第1關 詞彙學習**: `#60A5FA` (Blue-400)
- **第2關 詞彙熟悉**: `#34D399` (Emerald-400)
- **第2+關 口說練習**: `#FBBF24` (Amber-400) + 鑽石標記
- **第3關 情境對話**: `#A78BFA` (Violet-400)

### 遊戲化色彩
- **金幣**: `#FCD34D` (Amber-300)
- **鑽石**: `#60A5FA` (Blue-400) + 漸層
- **經驗值**: `#8B5CF6` (Violet-500)
- **成就徽章**: 多色組合

## 🌗 深色模式 (規劃中)

### 深色背景
- **背景主色**: `#111827` (Gray-900)
- **背景次色**: `#1F2937` (Gray-800)
- **文字主色**: `#F9FAFB` (Gray-50)
- **文字次色**: `#9CA3AF` (Gray-400)

## 📐 使用規範

### 對比度要求
- 文字與背景對比度 >= 4.5:1 (WCAG AA)
- 重要操作按鈕對比度 >= 7:1 (WCAG AAA)

### 色彩應用原則
1. **一致性**: 同類功能使用相同色彩
2. **層次感**: 使用色彩深淺建立視覺層次
3. **可訪問性**: 確保色盲用戶可區分
4. **情感引導**: 色彩符合功能情感暗示

## 🔗 相關資源
- [設計代幣 CSS](./tokens/design-tokens.css)
- [元件色彩應用](./components/web-components.md)
- [遊戲化設計標準](../specifications/gamification-standards.md)