# Theme — Amber 琥珀金（设计 token 源）

> 全站视觉的**单一事实来源**。强调色全部来自 `--accent / --accent-2 / --accent-soft`，
> 改这几个 token 即可整体换肤。定义在 `public/style.css` 的 `:root`。
> 选型经过 10 套候选对比（见 `docs/mockups/palette-compare*.png`），最终定为 **Amber 琥珀金**：
> 暖中性底 + 金色强调，暗色护眼、长时间看不累，且明确避开蓝/紫/绿。

## 调色板 (Design Tokens)

| Token | 值 | 用途 |
|-------|-----|------|
| `--bg` | `#100f0d` | 终端 / 最深表面（暖中性，非冷蓝灰） |
| `--surface-1` | `#181613` | 标签栏、键栏 |
| `--surface-2` | `#1f1c17` | 标签、按钮、卡片 |
| `--surface-3` | `#2a2620` | hover / active |
| `--border` | `rgba(255,255,255,.07)` | 普通描边 |
| `--border-strong` | `rgba(255,255,255,.14)` | 强描边 |
| `--text` | `#ece9e3` | 主文字（暖白） |
| `--text-dim` | `#a8a299` | 次要文字 |
| `--text-faint` | `#6f6a61` | 弱化文字 |
| **`--accent`** | **`#e3a64a`** | **强调色：金色**（按钮、链接、选中、聚焦环） |
| `--accent-2` | `#c9892f` | 深金（渐变 / hover） |
| `--accent-soft` | `rgba(227,166,74,.15)` | 强调色半透明（选中底、chip、聚焦光晕） |
| `--on-accent` | `#1a1305` | **金色底上的文字色**（深墨，保证对比度——金底配白字会糊） |
| `--warn-wash` | `color-mix(in srgb, var(--warn) 24%, transparent)` | `--warn` 的 24% 半透明：diff 删除行底色。**由 `--warn` 派生**，换肤自动跟随，勿改写成 rgba 字面量（`--warn` 见 `:root` 的 Git 面板语义） |

## 状态色（语义独立，勿与强调色混用）

连接状态点沿用既有语义，**不随主题强调色变**：

| Token | 值 | 含义 |
|-------|-----|------|
| `--green` | `#46d07f` | 已连接 connected |
| `--amber` | `#f5b14c` | 连接中 connecting |
| `--red` | `#ff6b6b` | 断开 / 出错 disconnected / error |

> Project 面板里的 session 状态语义（v0.6）：`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `stuck = --warn` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。

## 接入约定（改主题只改这里）

- 任何"强调"视觉 **只用 token**，不要写死颜色（`#7c8cff` 这类硬编码已清除）。
- **金色当背景时，文字必须用 `var(--on-accent)`**（深墨），不要用 `#fff`。
  当前 4 处 accent 背景按钮已统一改为 `--on-accent`：`.settings-opt.active` / `.hist-resume` 等。
- 换肤 = 替换 `:root` 的 `--accent / --accent-2 / --accent-soft / --on-accent`（必要时连 `--bg/--surface-*` 一起）。
- 历史：原 indigo 靛蓝 `#7c8cff` 已于本次替换为 Amber（git 可回溯）。

## 候选存档

10 套对比预览（暖底、无蓝/紫/绿）：`docs/mockups/palette-compare.png`（Amber/Copper/Mono/Rose）、
`docs/mockups/palette-compare-2.png`（Ruby/Sand/Brass/Apricot/Slate/Clay）。
最终全面板预览：`docs/mockups/final-amber.png`。