Tokyo Crime Dark 暖黑数据图

/* Default = tokyo-crime-dark — 只链接这一份即最快 apply */
/* Tokyo Crime Dark 暖黑数据图 — 暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。 */
/* 语义变量与 --theme-* 别名双发;字体/圆角透传源令牌 */

:root,
[data-theme="tokyo-crime-dark"],
.theme-tokyo-crime-dark {
  color-scheme: dark;
  --bg: #16130e;
  --theme-bg: #16130e;
  --bg-deep: #0f0d09;
  --theme-bg-deep: #0f0d09;
  --surface: #211c14;
  --theme-surface: #211c14;
  --surface-2: #2c2417;
  --theme-surface-2: #2c2417;
  --border: #3a3128;
  --theme-border: #3a3128;
  --ink: #f5efe2;
  --theme-ink: #f5efe2;
  --ink-muted: #b8ab93;
  --theme-ink-muted: #b8ab93;
  --ink-dim: #8a7f6b;
  --theme-ink-dim: #8a7f6b;
  --accent: #fc4e2a;
  --theme-accent: #fc4e2a;
  --accent-2: #b30000;
  --theme-accent-2: #b30000;
  --on-accent: #16130e;
  --theme-on-accent: #16130e;
  --red: #e31a1c;
  --theme-red: #e31a1c;
  --green: #5d8a6a;
  --theme-green: #5d8a6a;
  --aqua: #6a9a8e;
  --theme-aqua: #6a9a8e;
  --blue: #7cc4ff;
  --theme-blue: #7cc4ff;
  --purple: #8a6a7a;
  --theme-purple: #8a6a7a;
  --link: #7cc4ff;
  --theme-link: #7cc4ff;
  --code-bg: #211c14;
  --theme-code-bg: #211c14;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --theme-shadow: 0 12px 32px rgba(0,0,0,.45);
  --nodata: #4a4238;
  --theme-nodata: #4a4238;
  --nopop: #55504a;
  --theme-nopop: #55504a;
  --hi: #3a2c14;
  --theme-hi: #3a2c14;
  --mapbg: #16130e;
  --theme-mapbg: #16130e;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 10px;
  --theme-radius-md: 10px;
  --radius-lg: 12px;
  --theme-radius-lg: 12px;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --theme-font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Tokyo Crime Dark 暖黑数据图 — 全部变体 + 基础 chrome */
/* 暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。 */
/* 含 :root:单主题整站直接链接本文件 */

:root,
[data-theme="tokyo-crime-dark"],
.theme-tokyo-crime-dark {
  color-scheme: dark;
  --bg: #16130e;
  --theme-bg: #16130e;
  --bg-deep: #0f0d09;
  --theme-bg-deep: #0f0d09;
  --surface: #211c14;
  --theme-surface: #211c14;
  --surface-2: #2c2417;
  --theme-surface-2: #2c2417;
  --border: #3a3128;
  --theme-border: #3a3128;
  --ink: #f5efe2;
  --theme-ink: #f5efe2;
  --ink-muted: #b8ab93;
  --theme-ink-muted: #b8ab93;
  --ink-dim: #8a7f6b;
  --theme-ink-dim: #8a7f6b;
  --accent: #fc4e2a;
  --theme-accent: #fc4e2a;
  --accent-2: #b30000;
  --theme-accent-2: #b30000;
  --on-accent: #16130e;
  --theme-on-accent: #16130e;
  --red: #e31a1c;
  --theme-red: #e31a1c;
  --green: #5d8a6a;
  --theme-green: #5d8a6a;
  --aqua: #6a9a8e;
  --theme-aqua: #6a9a8e;
  --blue: #7cc4ff;
  --theme-blue: #7cc4ff;
  --purple: #8a6a7a;
  --theme-purple: #8a6a7a;
  --link: #7cc4ff;
  --theme-link: #7cc4ff;
  --code-bg: #211c14;
  --theme-code-bg: #211c14;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --theme-shadow: 0 12px 32px rgba(0,0,0,.45);
  --nodata: #4a4238;
  --theme-nodata: #4a4238;
  --nopop: #55504a;
  --theme-nopop: #55504a;
  --hi: #3a2c14;
  --theme-hi: #3a2c14;
  --mapbg: #16130e;
  --theme-mapbg: #16130e;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 10px;
  --theme-radius-md: 10px;
  --radius-lg: 12px;
  --theme-radius-lg: 12px;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --theme-font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.6;
}

.theme-apply a,
[data-theme-apply] a {
  color: var(--link, var(--accent));
}

.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--code-bg, var(--surface2, var(--surface)));
  border-radius: var(--radius-sm, 4px);
}

.theme-apply .panel,
[data-theme-apply] .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.45));
}

.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm, 4px);
}

/* Tokyo Crime Dark 暖黑数据图 · 共存版:只出 [data-theme] / .theme-<id> 作用域,不含 :root
   多主题应用(站点自带主题切换器)用这一份,避免全局覆盖项目自己的 token;
   单主题直接应用请用 css/default.css。color-scheme 只在 [data-theme] 块里给。 */

[data-theme="tokyo-crime-dark"],
.theme-tokyo-crime-dark {
  color-scheme: dark;
  --bg: #16130e;
  --theme-bg: #16130e;
  --bg-deep: #0f0d09;
  --theme-bg-deep: #0f0d09;
  --surface: #211c14;
  --theme-surface: #211c14;
  --surface-2: #2c2417;
  --theme-surface-2: #2c2417;
  --border: #3a3128;
  --theme-border: #3a3128;
  --ink: #f5efe2;
  --theme-ink: #f5efe2;
  --ink-muted: #b8ab93;
  --theme-ink-muted: #b8ab93;
  --ink-dim: #8a7f6b;
  --theme-ink-dim: #8a7f6b;
  --accent: #fc4e2a;
  --theme-accent: #fc4e2a;
  --accent-2: #b30000;
  --theme-accent-2: #b30000;
  --on-accent: #16130e;
  --theme-on-accent: #16130e;
  --red: #e31a1c;
  --theme-red: #e31a1c;
  --green: #5d8a6a;
  --theme-green: #5d8a6a;
  --aqua: #6a9a8e;
  --theme-aqua: #6a9a8e;
  --blue: #7cc4ff;
  --theme-blue: #7cc4ff;
  --purple: #8a6a7a;
  --theme-purple: #8a6a7a;
  --link: #7cc4ff;
  --theme-link: #7cc4ff;
  --code-bg: #211c14;
  --theme-code-bg: #211c14;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --theme-shadow: 0 12px 32px rgba(0,0,0,.45);
  --nodata: #4a4238;
  --theme-nodata: #4a4238;
  --nopop: #55504a;
  --theme-nopop: #55504a;
  --hi: #3a2c14;
  --theme-hi: #3a2c14;
  --mapbg: #16130e;
  --theme-mapbg: #16130e;
  --radius-sm: 8px;
  --theme-radius-sm: 8px;
  --radius-md: 10px;
  --theme-radius-md: 10px;
  --radius-lg: 12px;
  --theme-radius-lg: 12px;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --theme-font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --theme-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --theme-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* 基础 chrome(opt-in):<body class="theme-apply"> 或 [data-theme-apply] 上底色与基础件 */
.theme-apply,
[data-theme-apply] {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.6;
}

.theme-apply a,
[data-theme-apply] a {
  color: var(--link, var(--accent));
}

.theme-apply code,
.theme-apply pre,
[data-theme-apply] code,
[data-theme-apply] pre {
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--code-bg, var(--surface2, var(--surface)));
  border-radius: var(--radius-sm, 4px);
}

.theme-apply .panel,
[data-theme-apply] .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.45));
}

.theme-apply .btn-primary,
[data-theme-apply] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm, 4px);
}

{
  "id": "tokyo-crime-dark",
  "name": "Tokyo Crime Dark 暖黑数据图",
  "mode": "dark",
  "signature": "暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。",
  "source": "themes/tokyo-crime-dark.json",
  "colors": {
    "bg": "#16130e",
    "bgDeep": "#0f0d09",
    "surface": "#211c14",
    "surface2": "#2c2417",
    "border": "#3a3128",
    "ink": "#f5efe2",
    "inkMuted": "#b8ab93",
    "inkDim": "#8a7f6b",
    "accent": "#fc4e2a",
    "accent2": "#b30000",
    "onAccent": "#16130e",
    "red": "#e31a1c",
    "green": "#5d8a6a",
    "aqua": "#6a9a8e",
    "blue": "#7cc4ff",
    "purple": "#8a6a7a",
    "link": "#7cc4ff",
    "codeBg": "#211c14",
    "shadow": "0 12px 32px rgba(0,0,0,.45)",
    "nodata": "#4a4238",
    "nopop": "#55504a",
    "hi": "#3a2c14",
    "mapbg": "#16130e"
  }
}

{
  "default": "tokyo-crime-dark",
  "themes": [
    {
      "id": "tokyo-crime-dark",
      "name": "Tokyo Crime Dark 暖黑数据图",
      "mode": "dark",
      "path": "tokens/semantic/tokyo-crime-dark.json",
      "default": true
    }
  ]
}

{
  "id": "tokyo-crime-dark",
  "name": "Tokyo Crime Dark 暖黑数据图",
  "mode": "dark",
  "signature": "暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。",
  "colors": {
    "bg": "#16130e",
    "bgDeep": "#0f0d09",
    "surface": "#211c14",
    "surface2": "#2c2417",
    "border": "#3a3128",
    "ink": "#f5efe2",
    "inkMuted": "#b8ab93",
    "inkDim": "#8a7f6b",
    "accent": "#fc4e2a",
    "accent2": "#b30000",
    "onAccent": "#16130e",
    "red": "#e31a1c",
    "green": "#5d8a6a",
    "aqua": "#6a9a8e",
    "blue": "#7cc4ff",
    "purple": "#8a6a7a",
    "link": "#7cc4ff",
    "codeBg": "#211c14",
    "shadow": "0 12px 32px rgba(0,0,0,.45)",
    "nodata": "#4a4238",
    "nopop": "#55504a",
    "hi": "#3a2c14",
    "mapbg": "#16130e"
  },
  "fonts": {
    "display": "\"Noto Serif SC\", \"Songti SC\", serif",
    "body": "\"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, sans-serif",
    "mono": "\"JetBrains Mono\", ui-monospace, monospace"
  },
  "radius": {
    "sm": "8px",
    "md": "10px",
    "lg": "12px"
  },
  "derived": {
    "bg": "bg",
    "bgDeep": "bgDeep",
    "surface": "surface",
    "surface2": "surface2",
    "border": "border",
    "ink": "ink",
    "inkMuted": "inkMuted",
    "inkDim": "inkDim",
    "accent": "accent",
    "accent2": "accent2",
    "onAccent": "onAccent",
    "red": "red",
    "green": "green",
    "aqua": "aqua",
    "blue": "blue",
    "purple": "purple",
    "link": "link",
    "codeBg": "codeBg"
  },
  "a11y": {
    "contrast_min": 4.5,
    "pairs": {
      "ink/bg": 16.17,
      "onAccent/accent": 5.52
    },
    "adjusted": false,
    "notes": []
  }
}

# Tokyo Crime Dark 暖黑数据图 · 用法与配对规则

`tokyo-crime-dark` · mode `dark` · 默认变体 `tokyo-crime-dark`

**signature**:暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。

- 原色表:`tokens/absolute.json`(源盘 `colors` 原样,不改名不近似)。
- 语义映射:`tokens/semantic/tokyo-crime-dark.json`(`derived` 记每个语义键取自哪个源键;`a11y` 记对比度实测)。
- 变量双发:裸语义名(`--bg`)与 `--theme-` 前缀别名(`--theme-bg`)同值,便于接既有项目。
- 你不需要发明 hex:缺哪个角色就用对应变量,不要拿别的色近似。

## 变体表

| id | mode | 何时用 |
|---|---|---|
| `tokyo-crime-dark` | `dark` | **默认**;暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。 |

## 变量表(语义名 ↔ 前缀别名)

| 语义键 | CSS 变量 | 别名 |
|---|---|---|
| `bg` | `--bg` | `--theme-bg` |
| `bgDeep` | `--bg-deep` | `--theme-bg-deep` |
| `surface` | `--surface` | `--theme-surface` |
| `surface2` | `--surface-2` | `--theme-surface-2` |
| `border` | `--border` | `--theme-border` |
| `ink` | `--ink` | `--theme-ink` |
| `inkMuted` | `--ink-muted` | `--theme-ink-muted` |
| `inkDim` | `--ink-dim` | `--theme-ink-dim` |
| `accent` | `--accent` | `--theme-accent` |
| `accent2` | `--accent-2` | `--theme-accent-2` |
| `onAccent` | `--on-accent` | `--theme-on-accent` |
| `red` | `--red` | `--theme-red` |
| `green` | `--green` | `--theme-green` |
| `aqua` | `--aqua` | `--theme-aqua` |
| `blue` | `--blue` | `--theme-blue` |
| `purple` | `--purple` | `--theme-purple` |
| `link` | `--link` | `--theme-link` |
| `codeBg` | `--code-bg` | `--theme-code-bg` |
| `shadow` | `--shadow` | `--theme-shadow` |
| `nodata` | `--nodata` | `--theme-nodata` |
| `nopop` | `--nopop` | `--theme-nopop` |
| `hi` | `--hi` | `--theme-hi` |
| `mapbg` | `--mapbg` | `--theme-mapbg` |

## 配对规则(谁配谁)

| 用途 | 变量 | 口径 |
|---|---|---|
| 正文 / 段落 | `--ink` | 页面主文字色,始终用于 `--bg` 之上 |
| 次要文字 | `--ink-muted` / `--ink-dim` | 说明、元信息、时间戳;`--ink-muted` 比 `--ink-dim` 更接近正文 |
| 卡面 / 面板 | `--surface` + `--border` | 卡底用 `--surface`,描边用 `--border`;需要抬升时 `--surface-2` |
| 主按钮 | `--accent` + `--on-accent` | 一个视区只放一个主 CTA;文字色必须用 `--on-accent`(实测 5.52:1) |
| 链接 | `--link` | 链接一律用 `--link`;**强调色(`--accent`)不与链接同色** —— 本主题 `--link` = `#7cc4ff` 与 `--accent` = `#fc4e2a` 不同值,可直接并置 |
| 危险 / 破坏性 | `--red` | 删除、错误、警报 |
| 成功 | `--green` | 通过、已完成 |
| 页面底 | `--bg` / `--bg-deep` | 大底用 `--bg`,更深的分层用 `--bg-deep` |

一行口径:正文 `--ink`,次要 `--ink-muted`/`--ink-dim`,卡面 `--surface`+`--border`,主按钮 `--accent`+`--on-accent`,链接 `--link`,危险 `--red`,成功 `--green`;强调色不做链接色。

## 字体配方(源 `fonts` 透传)

| 角色 | 变量 | 栈 |
|---|---|---|
| `display` | `--font-display` | "Noto Serif SC", "Songti SC", serif |
| `body` | `--font-body` | "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif |
| `mono` | `--font-mono` | "JetBrains Mono", ui-monospace, monospace |

- 标题用 `var(--font-display)`,正文 `var(--font-body)`,代码/数字 `var(--font-mono)`;字重与字号档位不在本包内,按下方 `do` 的约束落地。

## 圆角(源 `radius` 透传)

| 变量 | 值 |
|---|---|
| `--radius-sm` | 8px |
| `--radius-md` | 10px |
| `--radius-lg` | 12px |

## 推荐做法(源 `do`)

- 暖黑（#16130e 系）而非中性纯黑——配暖色带（YlOrRd/暖橙红）不发蓝、不发脏
- 顺序色带在深色底整体提亮 ~15%（逐通道 c+(255-c)*0.15），只深色生效；断点/档位/数据一字不改，保证跨主题同色=同危险度
- 深色底的地图分隔线用深棕 #3a3128，别用纯白——白线在暖黑上像网格噪点
- 无数据/无人口档单独给灰（#4a4238 / #55504a），别混进色带
- 顶栏按钮选中态反白改「强调色底 + 深字」（onAccent=bg），焦点环换成亮蓝 #7cc4ff 保证可见
- localStorage 记住选择 + 默认浅色；切换不重建数据/不改断点，只重设色
- 深色独立调色，不把浅色 token 直接反相

## 反模式(源 `dont`)

- 别用中性纯黑 #000/#111 配暖色带（冷暖打架，浅黄档发灰）
- 别为深色重算分档断点（会破坏跨主题/跨时间可比性）
- 别把地图描边留在纯白（暖黑底上白线过曝刺眼）
- 别在深色下沿用浅色的无数据浅灰 #eeeeee（会变成高亮块）

## 对比度实测(WCAG,自写公式)

| 组合 | 实测 | 门槛 |
|---|---|---|
| `ink` on `bg` | 16.17:1 | ≥ 4.5:1 |
| `onAccent` on `accent` | 5.52:1 | ≥ 4.5:1 |



## 应用片段

```css
/* 单主题:把 css/default.css 全文贴进项目,或在 <head> 里 link 它 */
/* 多主题共存:link css/themes.css,用 <html data-theme="tokyo-crime-dark"> 决定何时生效(无 :root,不覆盖项目 token) */
```

```html
<html data-theme="tokyo-crime-dark" class="theme-tokyo-crime-dark" lang="zh-CN">
  <link rel="stylesheet" href="css/default.css">
```

## 来源 / Provenance

- 本地验证：[本地路径已移除] choropleth 深色模式，QA 72/72 含 T1–T8 深色项）
- 配色来源：本项目浅色版（白底 + YlOrRd 9 级绝对标尺）的深色姊妹版，独立调色不搬浅色套色
- 方法：ColorBrewer YlOrRd 9 色 + 深色下 lighten(c, 0.15)（只深色生效，断点/档位不变，跨主题同色=同危险度）

---
name: tokyo-crime-dark
description: "Tokyo Crime Dark 暖黑数据图(dark 暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。)。触发:Tokyo Crime Dark 暖黑数据图 / tokyo-crime-dark / 暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。。不做整站重构。"

---

# tokyo-crime-dark

让任何网页/面板变成 **Tokyo Crime Dark 暖黑数据图** 的样子,不用 agent 自己编 hex。

暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。

## When to use

- 用户点名 Tokyo Crime Dark 暖黑数据图 / tokyo-crime-dark / 暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。
- 需要整套配色(bg / bg-deep / surface / ink / accent / 状态色)而不是单个色值
- 需要 暖黑（#16130e 系）而非中性纯黑——配暖色带（YlOrRd/暖橙红）不发蓝、不发脏
- 需要 顺序色带在深色底整体提亮 ~15%（逐通道 c+(255-c)*0.15），只深色生效；断点/档位/数据一字不改，保证跨主题同色=同危险度
- 需要 深色底的地图分隔线用深棕 #3a3128，别用纯白——白线在暖黑上像网格噪点
- 需要 无数据/无人口档单独给灰（#4a4238 / #55504a），别混进色带
- 需要 顶栏按钮选中态反白改「强调色底 + 深字」（onAccent=bg），焦点环换成亮蓝 #7cc4ff 保证可见
- 需要 localStorage 记住选择 + 默认浅色；切换不重建数据/不改断点，只重设色
- 需要 深色独立调色，不把浅色 token 直接反相

## When not to use

- 整站品牌设计系统(要自定义组件/字体体系)→ 用设计类 skill
- 别的主题族(用户点名其它风格)
- 别用中性纯黑 #000/#111 配暖色带（冷暖打架，浅黄档发灰）
- 别为深色重算分档断点（会破坏跨主题/跨时间可比性）
- 别把地图描边留在纯白（暖黑底上白线过曝刺眼）
- 别在深色下沿用浅色的无数据浅灰 #eeeeee（会变成高亮块）

## Default

**`tokyo-crime-dark`**(mode `dark`)

| role | hex |
|---|---|
| `bg` | `#16130e` |
| `bgDeep` | `#0f0d09` |
| `surface` | `#211c14` |
| `ink` | `#f5efe2` |
| `accent` | `#fc4e2a` |
| `link` | `#7cc4ff` |
| `red` | `#e31a1c` |

## Sub-themes (id → when)

| id | mode | contrast | pick when |
|---|---|---|---|
| `tokyo-crime-dark` | `dark` | — | **默认**;暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。 |

## Files

| path | use |
|---|---|
| `tokens/absolute.json` | 源盘原色表(原样,含未参与语义映射的色) |
| `tokens/index.json` | 变体目录 + default |
| `tokens/semantic/tokyo-crime-dark.json` | 语义映射 + `derived`(取源哪个键)+ `a11y`(对比度实测) |
| `css/default.css` | 默认变体一份,含 `:root`,最快 apply |
| `css/all.css` | 全部变体 + 基础 chrome,含 `:root` |
| `css/themes.css` | 共存版:同 all.css 但**无 `:root`**,只 `[data-theme]` / `.theme-<id>` 作用域 |
| `docs/usage.md` | 配对规则 / 字体配方 / 反模式(中文) |
| `preview/index.html` | 活预览(独立单文件) |

## Agent apply steps

1. **Pick variant** — 用户点名变体就用它;否则 `tokyo-crime-dark`。
2. **Read tokens** — `tokens/semantic/tokyo-crime-dark.json`(`colors` 是语义键,`derived` 说明它取自源盘哪个键)。
3. **写入 CSS 变量** — 项目已有 `--bg/--ink/--accent` 就沿用同名;否则整份贴,或同时写 `--theme-*` 别名。
4. **挂主题作用域** — `<html data-theme="tokyo-crime-dark" class="theme-tokyo-crime-dark">`;多主题站点用 `css/themes.css`。
5. **选文件** — 单主题 `css/default.css`;多主题 `css/all.css`(带 `:root`)或 `css/themes.css`(不带)。
6. **按角色套件**:
   - 页面底 → `--bg` / `--bg-deep`
   - 卡面面板 → `--surface` + `--border`
   - 正文 → `--ink`;次要 → `--ink-muted` / `--ink-dim`
   - 主按钮 → `--accent` + `--on-accent`(一屏一个 CTA)
   - 链接 → `--link`(**不**用 `--accent`,强调色不做链接色)
   - 危险 → `--red`;成功 → `--green`
7. **不要发明 hex** — 颜色只能来自 `tokens/absolute.json`;缺角色就跳过该变量。
8. **自检** — `python scripts/assert_tokens.py` 必须打印 `PASS assert_tokens tokyo-crime-dark`。

### Minimal `:root` snippet (`tokyo-crime-dark`)

```css
:root {
  color-scheme: dark;
  --bg: #16130e;
  --bg-deep: #0f0d09;
  --surface: #211c14;
  --surface-2: #2c2417;
  --border: #3a3128;
  --ink: #f5efe2;
  --ink-muted: #b8ab93;
  --ink-dim: #8a7f6b;
  --accent: #fc4e2a;
  --accent-2: #b30000;
  --on-accent: #16130e;
  --red: #e31a1c;
  --green: #5d8a6a;
  --aqua: #6a9a8e;
  --blue: #7cc4ff;
  --purple: #8a6a7a;
  --link: #7cc4ff;
  --code-bg: #211c14;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --nodata: #4a4238;
  --nopop: #55504a;
  --hi: #3a2c14;
  --mapbg: #16130e;
}
```

### HTML switch

```html
<html data-theme="tokyo-crime-dark" class="theme-tokyo-crime-dark">
  <link rel="stylesheet" href="css/default.css">
```

## Hard rules

- **Never** 别用中性纯黑 #000/#111 配暖色带（冷暖打架，浅黄档发灰）(源 `dont`)
- **Never** 别为深色重算分档断点（会破坏跨主题/跨时间可比性）(源 `dont`)
- **Never** 别把地图描边留在纯白（暖黑底上白线过曝刺眼）(源 `dont`)
- **Never** 别在深色下沿用浅色的无数据浅灰 #eeeeee（会变成高亮块）(源 `dont`)

## Notes

- 预览:`preview/index.html`,单文件可直接打开
- 来源与语义层修正:`docs/usage.md` 末节。