ouuut Editorial · 和色六景(纸白 / 炭黑)

/* ouuut-editorial · default = 纸白(paper) + 和色六景(palette A)
   Link this file alone for the fastest apply. 完整系统(双模 + 四套强调色组)见 css/all.css。 */
:root,
[data-theme="paper"],
[data-theme="light"],
.theme-ouuut-editorial {
  color-scheme: light;

  /* 中性斜坡:深浅只翻这四个 + 小字参数 */
  --bg: #F5F3ED;
  --ink: #1A1A16;
  --muted: #5B5A53;
  --surface: rgba(26, 26, 22, .045);

  /* 小字强调一档(同色相提亮/压暗);色块与图形用 --accent 原色 */
  --accent-ink-mix: 85%;
  --accent-ink-target: #14140F;
  --accent-soft-mix: 10%;

  /* 和色六景:六章各取一色,同一亮度带 Y≈0.20 */
  --c-weather: #0C8B7A;    /* 青磁 */
  --c-quake: #A77109;      /* 山吹 */
  --c-crime: #CD5545;      /* 朱(主色 / 警示) */
  --c-cabinet: #3F7DCA;    /* 藍 */
  --c-housing: #678618;    /* 苔 */
  --c-population: #A165AE; /* 紫 */

  --accent-base: var(--c-crime);
  --accent: var(--accent-base);
  --accent-ink-base: color-mix(in oklab, var(--accent-base) var(--accent-ink-mix), var(--accent-ink-target));
  --accent-ink: var(--accent-ink-base);
  --accent-soft-base: color-mix(in srgb, var(--accent-base) var(--accent-soft-mix), transparent);
  --accent-soft: var(--accent-soft-base);

  /* 语义别名:跨包共存时用 --theme-* 引用,内部一律用短名 */
  --theme-bg: var(--bg);
  --theme-ink: var(--ink);
  --theme-muted: var(--muted);
  --theme-surface: var(--surface);
  --theme-accent: var(--accent);
  --theme-accent-ink: var(--accent-ink);

  --link: var(--accent-ink);
  --danger: var(--c-crime);
  --danger-ink: color-mix(in oklab, var(--c-crime) var(--accent-ink-mix), var(--accent-ink-target));
  --red: var(--c-crime);
  --green: var(--c-housing);
  --aqua: var(--c-weather);
  --blue: var(--c-cabinet);
  --purple: var(--c-population);

  --radius: 4px;
  --btn-radius: 2px;
}

/* ouuut-editorial · 全量:纸白 / 炭黑双模 + 和色六景 A/B/C/D + 章节提色
   用法:<html data-theme="paper|charcoal" data-palette="a|b|c|d" data-chapter="crime"> */

/* ---------- 纸白(默认) ---------- */
:root,
[data-theme="paper"],
[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F3ED;
  --ink: #1A1A16;
  --muted: #5B5A53;
  --surface: rgba(26, 26, 22, .045);
  --accent-ink-mix: 85%;
  --accent-ink-target: #14140F;
  --accent-soft-mix: 10%;
}

/* ---------- 炭黑 ---------- */
[data-theme="charcoal"],
[data-theme="dark"],
.theme-ouuut-editorial.dark {
  color-scheme: dark;
  --bg: #0E0E0C;
  --ink: #EDEBE4;
  --muted: #A3A199;
  --surface: rgba(237, 235, 228, .055);
  --accent-ink-mix: 86%;
  --accent-ink-target: #FFFDF5;
  --accent-soft-mix: 14%;
}

/* ---------- 强调色组(两模共用) ---------- */
:root,
[data-palette="a"],
.theme-ouuut-editorial {
  --c-weather: #0C8B7A;    /* 青磁 */
  --c-quake: #A77109;      /* 山吹 */
  --c-crime: #CD5545;      /* 朱 */
  --c-cabinet: #3F7DCA;    /* 藍 */
  --c-housing: #678618;    /* 苔 */
  --c-population: #A165AE; /* 紫 */
}

[data-palette="b"] {  /* 矿物大地 */
  --c-weather: #378697;
  --c-quake: #A07244;
  --c-crime: #A96B66;
  --c-cabinet: #8873A2;
  --c-housing: #53885E;
  --c-population: #867C42;
}

[data-palette="c"] {  /* 双色印刷 */
  --c-weather: #3F7DCA;
  --c-quake: #CF5343;
  --c-crime: #3F7DCA;
  --c-cabinet: #CF5343;
  --c-housing: #3F7DCA;
  --c-population: #CF5343;
}

[data-palette="d"] {  /* 三色分类:自然 / 社会 / 人 */
  --c-weather: #688527;
  --c-quake: #688527;
  --c-crime: #CB5848;
  --c-cabinet: #CB5848;
  --c-housing: #427DC7;
  --c-population: #427DC7;
}

/* ---------- 派生色与语义别名 ---------- */
:root,
[data-theme],
.theme-ouuut-editorial {
  --accent-base: var(--c-crime);
  --accent: var(--accent-base);
  --accent-ink-base: color-mix(in oklab, var(--accent-base) var(--accent-ink-mix), var(--accent-ink-target));
  --accent-ink: var(--accent-ink-base);
  --accent-soft-base: color-mix(in srgb, var(--accent-base) var(--accent-soft-mix), transparent);
  --accent-soft: var(--accent-soft-base);

  --theme-bg: var(--bg);
  --theme-ink: var(--ink);
  --theme-muted: var(--muted);
  --theme-surface: var(--surface);
  --theme-accent: var(--accent);
  --theme-accent-ink: var(--accent-ink);

  --link: var(--accent-ink);
  --danger: var(--c-crime);
  --danger-ink: color-mix(in oklab, var(--c-crime) var(--accent-ink-mix), var(--accent-ink-target));
  --red: var(--c-crime);
  --green: var(--c-housing);
  --aqua: var(--c-weather);
  --blue: var(--c-cabinet);
  --purple: var(--c-population);

  --radius: 4px;
  --btn-radius: 2px;
}

/* ---------- 章节页:把该章的颜色提为页面重点色 ---------- */
[data-chapter="weather"]    { --accent-base: var(--c-weather); }
[data-chapter="quake"]      { --accent-base: var(--c-quake); }
[data-chapter="crime"]      { --accent-base: var(--c-crime); }
[data-chapter="cabinet"]    { --accent-base: var(--c-cabinet); }
[data-chapter="housing"]    { --accent-base: var(--c-housing); }
[data-chapter="population"] { --accent-base: var(--c-population); }

/* ouuut-editorial · 共存版:只出 [data-theme] / [data-palette] / [data-chapter] 作用域,不含 :root
   多主题应用(站点自带主题切换器)用这一份;单主题直接应用请用 css/default.css。
   适用范围:与项目自己的 token 体系并存 —— 项目里用 `<html data-theme="paper">` 决定何时生效。 */

[data-theme="paper"] {
  color-scheme: light;
  --bg: #F5F3ED;
  --ink: #1A1A16;
  --muted: #5B5A53;
  --surface: rgba(26, 26, 22, .045);
  --accent-ink-mix: 85%;
  --accent-ink-target: #14140F;
  --accent-soft-mix: 10%;
}

[data-theme="charcoal"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0E0C;
  --ink: #EDEBE4;
  --muted: #A3A199;
  --surface: rgba(237, 235, 228, .055);
  --accent-ink-mix: 86%;
  --accent-ink-target: #FFFDF5;
  --accent-soft-mix: 14%;
}

[data-palette="a"] {
  --c-weather: #0C8B7A;
  --c-quake: #A77109;
  --c-crime: #CD5545;
  --c-cabinet: #3F7DCA;
  --c-housing: #678618;
  --c-population: #A165AE;
}

[data-palette="b"] {
  --c-weather: #378697;
  --c-quake: #A07244;
  --c-crime: #A96B66;
  --c-cabinet: #8873A2;
  --c-housing: #53885E;
  --c-population: #867C42;
}

[data-palette="c"] {
  --c-weather: #3F7DCA;
  --c-quake: #CF5343;
  --c-crime: #3F7DCA;
  --c-cabinet: #CF5343;
  --c-housing: #3F7DCA;
  --c-population: #CF5343;
}

[data-palette="d"] {
  --c-weather: #688527;
  --c-quake: #688527;
  --c-crime: #CB5848;
  --c-cabinet: #CB5848;
  --c-housing: #427DC7;
  --c-population: #427DC7;
}

[data-theme] {
  --accent-base: var(--c-crime);
  --accent: var(--accent-base);
  --accent-ink-base: color-mix(in oklab, var(--accent-base) var(--accent-ink-mix), var(--accent-ink-target));
  --accent-ink: var(--accent-ink-base);
  --accent-soft-base: color-mix(in srgb, var(--accent-base) var(--accent-soft-mix), transparent);
  --accent-soft: var(--accent-soft-base);
  --theme-bg: var(--bg);
  --theme-ink: var(--ink);
  --theme-muted: var(--muted);
  --theme-surface: var(--surface);
  --theme-accent: var(--accent);
  --theme-accent-ink: var(--accent-ink);
  --link: var(--accent-ink);
  --danger: var(--c-crime);
  --danger-ink: color-mix(in oklab, var(--c-crime) var(--accent-ink-mix), var(--accent-ink-target));
  --red: var(--c-crime);
  --green: var(--c-housing);
  --aqua: var(--c-weather);
  --blue: var(--c-cabinet);
  --purple: var(--c-population);
  --radius: 4px;
  --btn-radius: 2px;
}

[data-chapter="weather"]    { --accent-base: var(--c-weather); }
[data-chapter="quake"]      { --accent-base: var(--c-quake); }
[data-chapter="crime"]      { --accent-base: var(--c-crime); }
[data-chapter="cabinet"]    { --accent-base: var(--c-cabinet); }
[data-chapter="housing"]    { --accent-base: var(--c-housing); }
[data-chapter="population"] { --accent-base: var(--c-population); }

/* ouuut-editorial · 排版与动效刻度(与配色正交,可单独取用)
   族数 ≤2 用法:拉丁衬线/无衬线 + CJK 自制回退;字号不用 vw 外推中文。 */
:root,
.theme-ouuut-editorial {
  /* 字族:拉丁主 + CJK 分语言回退(禁斜体、禁下划线做强调) */
  --serif: 'Instrument Serif', 'Serif Fallback', 'Noto Serif SC', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', 'Noto Sans SC', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wordmark: 'Outfit', 'Geist', sans-serif;
  --zh-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
  --zh-sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --ja-serif: 'Noto Serif JP', 'Source Han Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --ja-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;

  /* 版式栅格 */
  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1360px;
  --gap: clamp(24px, 3vw, 48px);
  --sec-y: clamp(5rem, 11vw, 9.5rem);
  --nav-h: 72px;

  /* 字号档:CJK 用 em 上限,禁 ch 限宽 */
  --fs-eyebrow: 11px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-lead: clamp(18px, 1.8vw, 22px);
  --fs-h1-en: clamp(2.6rem, 6.2vw, 5.7rem);
  --fs-h1-ja: clamp(1.9rem, 5vw, 4.6rem);
  --fs-h1-zh: clamp(1.9rem, 5.6vw, 5.2rem);
  --fs-page: clamp(2rem, 4vw, 3.5rem);
  --fs-section: clamp(1.6rem, 3.4vw, 2.8rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.9rem);
  --lh-en: 1.65;
  --lh-cjk: 1.8;

  /* 动效刻度:常态 ≤500ms,主题切换单独一档 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .2s;
  --dur-base: .45s;
  --dur-enter: .68s;
  --motion-fast: var(--dur-fast);
  --motion-theme: .4s;
  --motion-enter: var(--dur-enter);
}

/* Metric-compatible 衬线回退:Instrument Serif 在同样字符串下约为 Georgia 的 72% 宽,
   不设 size-adjust 的话 webfont 落地瞬间英文 H1 会重排。 */
@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 72%;
}

{
  "id": "ouuut-editorial",
  "note": "原色表:中性斜坡(双模)+ 四套强调色组(和色六景 A/B/C/D)+ 小字提亮参数。所有强调色落在同一亮度带 Y≈0.20,故同一色值在两模下都能成立。",
  "neutrals": {
    "paper": { "bg": "#F5F3ED", "ink": "#1A1A16", "muted": "#5B5A53", "surface": "rgba(26, 26, 22, .045)" },
    "charcoal": { "bg": "#0E0E0C", "ink": "#EDEBE4", "muted": "#A3A199", "surface": "rgba(237, 235, 228, .055)" }
  },
  "accentInk": {
    "paper": { "mix": "85%", "target": "#14140F" },
    "charcoal": { "mix": "86%", "target": "#FFFDF5" },
    "note": "小字一档:color-mix(in oklab, <accent> <mix>, <target>) → 纸白侧 4.9:1 / 炭黑侧 5.8:1"
  },
  "accentSoft": { "paper": "10%", "charcoal": "14%", "note": "color-mix(in srgb, <accent> <mix>, transparent)" },
  "palettes": {
    "a": {
      "name": "和色六景",
      "note": "默认。六章各取一色,全部同亮度",
      "colors": { "weather": "#0C8B7A", "quake": "#A77109", "crime": "#CD5545", "cabinet": "#3F7DCA", "housing": "#678618", "population": "#A165AE" },
      "roles": { "weather": "青磁", "quake": "山吹", "crime": "朱(主色/警示)", "cabinet": "藍", "housing": "苔", "population": "紫" }
    },
    "b": {
      "name": "矿物大地",
      "note": "比 A 安静一档的土色",
      "colors": { "weather": "#378697", "quake": "#A07244", "crime": "#A96B66", "cabinet": "#8873A2", "housing": "#53885E", "population": "#867C42" },
      "roles": { "weather": "青灰", "quake": "黄土", "crime": "赭", "cabinet": "紫灰", "housing": "松", "population": "橄榄" }
    },
    "c": {
      "name": "双色印刷",
      "note": "两色跨六章交替",
      "colors": { "weather": "#3F7DCA", "quake": "#CF5343", "crime": "#3F7DCA", "cabinet": "#CF5343", "housing": "#3F7DCA", "population": "#CF5343" },
      "roles": { "weather": "藍", "quake": "朱" }
    },
    "d": {
      "name": "三色分类",
      "note": "一个域一色:自然 / 社会 / 人",
      "colors": { "weather": "#688527", "quake": "#688527", "crime": "#CB5848", "cabinet": "#CB5848", "housing": "#427DC7", "population": "#427DC7" },
      "roles": { "weather": "苔 · 自然", "crime": "朱 · 社会", "housing": "藍 · 人" }
    }
  }
}

{
  "default": "paper",
  "variants": [
    { "id": "paper", "name": "纸白", "mode": "light", "contrast": "medium", "path": "tokens/semantic/paper.json", "default": true, "aliases": ["light"] },
    { "id": "charcoal", "name": "炭黑", "mode": "dark", "contrast": "medium", "path": "tokens/semantic/charcoal.json", "default": false, "aliases": ["dark"] }
  ],
  "palettes": [
    { "id": "a", "name": "和色六景", "default": true },
    { "id": "b", "name": "矿物大地" },
    { "id": "c", "name": "双色印刷" },
    { "id": "d", "name": "三色分类" }
  ],
  "axes": {
    "theme": { "attr": "data-theme", "values": ["paper", "charcoal"], "aliases": { "light": "paper", "dark": "charcoal" }, "note": "只翻中性色,强调色两模共用" },
    "palette": { "attr": "data-palette", "values": ["a", "b", "c", "d"], "note": "四套强调色组,与主题正交" },
    "chapter": { "attr": "data-chapter", "values": ["weather", "quake", "crime", "cabinet", "housing", "population"], "note": "章节页把该章颜色提为页面重点色" }
  }
}

{
  "id": "paper",
  "name": "纸白",
  "mode": "light",
  "colors": {
    "bg": "#F5F3ED",
    "ink": "#1A1A16",
    "muted": "#5B5A53",
    "surface": "rgba(26, 26, 22, .045)",
    "accent": "#CD5545",
    "accentInkTarget": "#14140F",
    "accentInkMix": "85%",
    "accentSoftMix": "10%",
    "link": "#CD5545",
    "danger": "#CD5545",
    "red": "#CD5545",
    "green": "#678618",
    "aqua": "#0C8B7A",
    "blue": "#3F7DCA",
    "purple": "#A165AE",
    "chapters": { "weather": "#0C8B7A", "quake": "#A77109", "crime": "#CD5545", "cabinet": "#3F7DCA", "housing": "#678618", "population": "#A165AE" }
  },
  "fonts": {
    "serif": "'Instrument Serif', 'Serif Fallback', 'Noto Serif SC', 'Noto Serif JP', Georgia, 'Times New Roman', serif",
    "sans": "'Geist', 'Noto Sans SC', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif",
    "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
    "zhSerif": "'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif",
    "jaMincho": "'Noto Serif JP', 'Source Han Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif"
  },
  "radius": "4px",
  "notes": "零结构线:层级只靠 surface 块、留白与字号;小字强调用 --accent-ink(4.9:1),图形/色块用 --accent 原色"
}

{
  "id": "charcoal",
  "name": "炭黑",
  "mode": "dark",
  "colors": {
    "bg": "#0E0E0C",
    "ink": "#EDEBE4",
    "muted": "#A3A199",
    "surface": "rgba(237, 235, 228, .055)",
    "accent": "#CD5545",
    "accentInkTarget": "#FFFDF5",
    "accentInkMix": "86%",
    "accentSoftMix": "14%",
    "link": "#CD5545",
    "danger": "#CD5545",
    "red": "#CD5545",
    "green": "#678618",
    "aqua": "#0C8B7A",
    "blue": "#3F7DCA",
    "purple": "#A165AE",
    "chapters": { "weather": "#0C8B7A", "quake": "#A77109", "crime": "#CD5545", "cabinet": "#3F7DCA", "housing": "#678618", "population": "#A165AE" }
  },
  "fonts": {
    "serif": "'Instrument Serif', 'Serif Fallback', 'Noto Serif SC', 'Noto Serif JP', Georgia, 'Times New Roman', serif",
    "sans": "'Geist', 'Noto Sans SC', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif",
    "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
    "zhSerif": "'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif",
    "jaMincho": "'Noto Serif JP', 'Source Han Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif"
  },
  "radius": "4px",
  "notes": "强调色与纸白模完全相同,只换中性斜坡;章节色块可直接用在炭黑底上(全部 ≥4.57:1)"
}

# usage · ouuut-editorial 配对规则

> 这套配色的核心主张:**层级不靠线和阴影,靠 surface 块、留白和字号**;颜色只承担"分类"和"重点",不承担装饰。

## 1 谁配谁(组件 → token)

| UI 部位 | token | 说明 |
|---|---|---|
| 页面底 | `--bg` | 纸白 `#F5F3ED` / 炭黑 `#0E0E0C` |
| 卡面 / 分区块 | `--surface` | 半透明层,不给边框、不给阴影 |
| 正文 | `--ink` | 纸白 15.7:1 / 炭黑 16.2:1 |
| 次要信息、图注 | `--muted` | 6.24:1 / 7.47:1 |
| 主按钮、当前章节标记、强调色块 | `--accent` | 图形/色块用**原色** |
| 小字强调(≤18px 的彩色文字、链接) | `--accent-ink` | 同色相提亮/压暗一档,4.9:1 / 5.8:1 |
| 大面积淡底(徽标、提示条) | `--accent-soft` | `color-mix(accent 10–14%, transparent)` |
| 链接 | `--link` = `--accent-ink` | **不要**和主按钮同色同档 |
| 危险 / 警示 | `--danger`(朱) | 只用在文案与描边,避免大块实心红 |
| 成功点 / 通过 | `--green`(苔) | 12px 左右的小圆点即可 |

## 2 双模规则(硬约束)

1. **深浅只翻中性色**(`--bg` `--ink` `--muted` `--surface` + 小字参数),强调色两模完全相同。
2. 同一色值不可能同时满足黑白两侧的 4.5:1(纸白要 Y ≤ 0.160、炭黑要 Y ≥ 0.193)→ 所以强调色统一落在 **Y 0.199–0.203**,实测:
   - on 炭黑:4.57–4.65:1(**文字可用**)
   - on 纸白:3.75–3.81:1(**仅图形/大字**)
3. 因此**纸白模的小字彩色文本一律走 `--accent-ink`**,不许直接用 `--accent`。
4. 页面必须带**可见的深浅切换按钮**:44px 热区、纯图标(太阳 / 空心月亮)、无边框无胶囊、`aria-label` 写用途、选择写 `localStorage`、无 JS 时跟随系统、刷新保持。

## 3 四套强调色组(`data-palette`)

| id | 名称 | 什么时候用 |
|---|---|---|
| `a`(默认) | 和色六景 | 章节多、要色彩分辨力:六章各一色 |
| `b` | 矿物大地 | 要"安静一档":土色系,新闻/档案类 |
| `c` | 双色印刷 | 只要两墨、跨章交替;印刷感 |
| `d` | 三色分类 | 三个域各一色(自然 / 社会 / 人) |

章节页用 `data-chapter="<章名>"` 把该章颜色提为当页重点色;卡片需要独立重点色时在容器上覆写 `--accent-base`(不要改 `--accent`,避免自引用)。

## 4 反模式

- 用纯黑/纯白平面(`#000` / `#fff`)替代纸白与炭黑。
- 给卡片加边框或阴影来"分层"——本套用 surface 块与留白分层。
- 小字彩色文本直接用 `--accent`(纸白侧只有 3.8:1,不达 AA)。
- 一页里同时用三套以上的强调色;主色一个区段只出现一次。
- 给正文拉 `border-bottom` 当前下划线;CJK 不使用斜体。
- 深色模沿用系统灰(`#111827`、slate 系)当底——那不是炭黑。
- 用 `vw` 给中文标题外推字号上限(本包用 `clamp(rem, vw, rem)` 并给 CJK 与拉丁分别设档)。

## 5 取用

```bash
python <sai-assets>/scripts/apply.py ouuut-editorial --to src/styles
```

```html
<link rel="stylesheet" href="styles/ouuut-editorial/type.css">
<link rel="stylesheet" href="styles/ouuut-editorial/all.css">
<html data-theme="paper" data-palette="a">
```

消费后在项目 `design-lock.json` 记 `assets[]`:`pack=ouuut-editorial`、`version`、`sha`(见 `docs/USAGE-INTEGRATION.md`)。

---
name: ouuut-editorial
description: Apply the ouuut Editorial palette (和色六景 · 纸白/炭黑) to web pages, editorial sites, dashboards and report layouts. Use when the task needs a Japanese-colour chapter system, paper/charcoal dual theme, zero-structure-line editorial hierarchy, or AA-safe small type on a shared accent palette.
---

# ouuut-editorial

给任何网页装上"杂志社论"这套配色:**深浅只翻中性色,强调色两模共用**,六章各取一色,层级靠留白与字号而不是线框。

## When to use

- 内容型 / 杂志型 / 报告型站点,要纸白与炭黑双模
- 需要"一个色管一个域/章节"的分类色体系(`data-chapter`)
- 需要小字彩色文本达到 AA(用 `--accent-ink`,而不是原色)
- 需要零结构线(无边框、无阴影)的层级

## When not to use

- 霓虹 / 赛博 / 高饱和营销落地页
- 密集数据工具面板(用 gruvbox-dark 或工具类暗色主题)
- 需要厚阴影、玻璃拟态、渐变装饰的页面

## Default

`data-theme="paper"`(纸白)+ `data-palette="a"`(和色六景)

| role | value |
|------|-------|
| bg | `#F5F3ED`(炭黑 `#0E0E0C`) |
| ink | `#1A1A16`(炭黑 `#EDEBE4`) |
| muted | `#5B5A53`(炭黑 `#A3A199`) |
| accent / danger | `#CD5545` 朱 |
| chapter hues | 青磁 `#0C8B7A` · 山吹 `#A77109` · 朱 `#CD5545` · 藍 `#3F7DCA` · 苔 `#678618` · 紫 `#A165AE` |

## Variants and axes

| 轴 | 属性 | 取值 | 说明 |
|---|---|---|---|
| 主题 | `data-theme` | `paper`(默认) / `charcoal`(别名 `light` / `dark` 兼容) | 只翻中性色 |
| 强调色组 | `data-palette` | `a` 和色六景(默认) / `b` 矿物大地 / `c` 双色印刷 / `d` 三色分类 | 与主题正交 |
| 章节提色 | `data-chapter` | `weather` `quake` `crime` `cabinet` `housing` `population` | 把该章颜色提为当页重点色 |

## Files

| path | use |
|------|-----|
| `tokens/absolute.json` | 原色表(中性斜坡 + 四套色组 + 小字提亮参数) |
| `tokens/index.json` | 变体与三个轴的目录 |
| `tokens/semantic/<variant>.json` | 供 agent 读取的语义映射 |
| `css/default.css` | 只含默认(纸白 + A),最快 apply |
| `css/all.css` | 双模 + 四套色组 + 章节提色(含 `:root`,单主题直接应用) |
| `css/themes.css` | 同上但**只出 `[data-theme]` 作用域**:与项目自带主题切换器并存时用这份 |
| `css/type.css` | 字族 / 字号档 / 动效刻度(与配色正交) |
| `docs/usage.md` | **配对规则 + 双模硬约束 + 反模式** |
| `preview/index.html` | 活预览(含深浅切换与色组切换) |

## Agent apply steps

1. 读 `tokens/semantic/paper.json`(或 `charcoal.json`)拿到语义色;**禁止**自己编 hex。
2. 把 `css/type.css` + `css/all.css` 拷进项目样式目录(或按 `scripts/apply.py`)。
3. 在 `<html>` 上打轴:`data-theme="paper"`(默认可省)、`data-palette="a"`、章节页加 `data-chapter="<章名>"`。
4. 映射组件:`页面底→--bg`、`卡面→--surface`(不加边框/阴影)、`正文→--ink`、`次要→--muted`、`主按钮与色块→--accent`、**小字彩色文本与链接→--accent-ink**、`危险→--danger`、`成功点→--green`。
5. 必带**可见深浅切换按钮**:44px 热区、纯图标(浅色太阳 / 深色空心月亮)、无边框无胶囊、`aria-label`、选择写 `localStorage`、无 JS 跟随系统。
6. 自检:纸白/炭黑都不是纯白纯黑;卡面没有边框与阴影;彩色小字用的是 `--accent-ink`;一页强调色不超过三套。

## Hard rules

- 深浅**只翻中性色**,强调色两模完全一致(不要为深色模式另调一套强调色)。
- 纸白侧强调色只有 3.8:1(仅图形/大字);**小字必须走 `--accent-ink`**(纸白 4.9:1 / 炭黑 5.8:1)。
- 层级不用线和阴影:用 `--surface` 块、留白(`--sec-y`)和字号档。
- CJK 不用斜体、不用 `border-bottom` 当下划线、不用 `vw` 给中文标题外推字号上限。
- 消费后必须在项目 `design-lock.json` 记 `assets[]`(`pack`/`version`/`sha`)。