/* ============================================================================
   設計 token —— 宣紙水墨(單一亮色主題)

   色票逐字取自 super-reversi2 `packages/client/src/styles/base.css` 的
   `.theme-paper` 變數組。**只有兩顆刻意偏離來源**,理由在下面各自的註解裡:
   長文閱讀站的文字量遠大於遊戲 UI,可讀性優先於逐 byte 一致。

   所有對比度數字都是實算的(WCAG 2.x 相對亮度公式),不是估的。
   三種宣紙表面:card #f2ead6 / card-elev #e6d9bc / bg #e7dcc3。
   ========================================================================= */

:root {
  color-scheme: light;

  /* ── 表面 ────────────────────────────────────────────── */
  --bg: #e7dcc3;
  --bg-grad: radial-gradient(1100px 700px at 50% -10%, #f5eeda 0%, #e7dcc3 60%);
  --card: #f2ead6;
  --card-elev: #e6d9bc;
  --line: #c3b394;
  /* ⚠️ 偏離來源:原值 #9c7c40 對 card-elev / bg 只有 2.80 / 2.87,不到 1.4.11 的 3:1。
     它在本主題是引言塊的左側標記線 —— 看不清楚就失去作用。#907038 是 3.29 / 3.38。 */
  --line-gold: #907038;

  /* ── 文字 ────────────────────────────────────────────── */
  --text: #2a2118;          /* 13.18 / 11.30 / 11.60 */

  /* ⚠️ 偏離來源:原 `--dim` 是 #6e6046,對 card-elev 只有 **4.38**(AA 要 4.5)。
     遊戲裡它只出現在 card 上(5.11 過關),但部落格的次要文字會落在 elev 底的
     時間軸列與程式碼區塊旁。#665941 同色相壓深一階 ⇒ 4.89 / 5.02 / 5.70,三面全過。 */
  --dim: #665941;           /* 5.70 / 4.89 / 5.02 */

  /* ── 玉青 ────────────────────────────────────────────── */
  /* --accent 保留來源原值,**只當填色與框線**(非文字 ⇒ 適用 1.4.11 的 3:1) */
  --accent: #1f6e58;
  /* ⚠️ 偏離來源:玉青**當文字**時原值對 card-elev 只有 4.38。壓深一階後三面全過。 */
  --accent-text: #1c6350;   /* 5.94 / 5.09 / 5.23 */
  --accent-ink: #f6f0dd;
  --accent-glow: #1f6e5833;

  /* ── 金 ──────────────────────────────────────────────── */
  /* 🔴 --gold 是 **框線專用**:4.19 / 3.59 / 3.69 —— 過 1.4.11 的 3:1,但離文字的 4.5 差很遠。
     super-reversi2 `menu.css:200-217` 就是為了這件事把宣紙底的 ghost-btn 字色單獨改掉。
     金色**文字**一律用 --gold-text(#6b5220:6.14 / 5.26 / 5.41)。
     來源的 --gold-bright(#a5813a)在宣紙上是 3.02 / 2.59 / 2.66 ⇒ **本主題完全不用它**。 */
  --gold: #8a6a2f;
  --gold-text: #6b5220;
  --gold-hairline: #8a6a2f4d;

  /* ── 硃砂 ────────────────────────────────────────────── */
  --red: #a83226;           /* 5.56 / 4.77 / 4.90 */

  /* ── 狀態印色(status.js 的 color 語意名 → 實際色) ─────
     每一級要三種形態:fg 文字、bd 框線、bg 淡染底。
     fg 全部 ≥4.77 對最差的表面(card-elev)。 */
  --st-jade-fg: #1c6350;      --st-jade-bd: #1f6e58;      --st-jade-bg: #1f6e5814;
  --st-bronze-fg: #6b5220;    --st-bronze-bd: #8a6a2f;    --st-bronze-bg: #8a6a2f16;
  --st-ink-fg: #2a2118;       --st-ink-bd: #6e6046;       --st-ink-bg: #2a211810;
  /* ⚠️ 硃砂的 fg 比 --red(#a83226)深一階。原因是徽章**自己帶淡染底** ——
     8% 的硃砂疊在 card-elev 上把底色也拉紅,#a83226 對它只剩 4.27。
     #96291e 對三種表面 + 自己的淡染底是 5.10~5.91,全過。
     bd 維持 --red 原值(框線只要 3:1)。 */
  --st-cinnabar-fg: #96291e;  --st-cinnabar-bd: #a83226;  --st-cinnabar-bg: #a8322614;
  --st-seal-fg: #2a2118;      --st-seal-bd: #8a6a2f;      --st-seal-bg: #8a6a2f1f;
  --st-muted-fg: #665941;     --st-muted-bd: #c3b394;     --st-muted-bg: #c3b39422;

  /* ── 字型 ────────────────────────────────────────────── */
  /* 零字型下載:全走系統堆疊。刻意**不**沿用 super-reversi2 的 sr2-brush.woff2 ——
     那是 1,299 字的遊戲字面量 subset,長文會大量缺字回退,混排比不用還糟。 */
  --font-display: 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', 'SimSun', serif;
  --font-body: system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  /* ── 排版度量 ────────────────────────────────────────── */
  /* 42rem ≈ 40 全形字/行 —— CJK 的舒適行寬。行距 1.85 比拉丁文常見的 1.6 鬆,
     因為漢字沒有 x-height 落差,行距太緊會糊成一片。 */
  --measure: 42rem;
  --shell: 64rem;           /* 首頁/列表的外框寬,比文章寬 */
  --shell-wide: 78rem;      /* 有側欄 TOC 時 */
  --fs-body: 1.0625rem;     /* 17px */
  --lh-body: 1.85;
  --lh-tight: 1.4;

  /* ── 形狀 ────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-card: 0 1px 2px #2a211810, 0 6px 18px #2a211814;
  --shadow-raise: 0 2px 6px #2a211818, 0 12px 28px #2a21181f;

  /* ── 節奏 ────────────────────────────────────────────── */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 14px;
  --gap-lg: 24px;
  --gap-xl: 40px;
}
