feat(ui): migrate design tokens to OKLCH system + prototype baseline (rant 2026-09-11, PR1)

[argszero]

Summary

PR1 of the front-end adaptation to the new high-fidelity prototype — the design-token layer migration only (no DOM/layout changes), which is the lowest-risk first step of the rollout order suggested by the host's rant.

Rant addressed (verbatim quote of the relevant section):

【六、建议实施顺序（分批 PR，避免一次巨型改动不可控）】

• PR1：设计 token 层迁移（style.css 的 :root / light 主题换成 OKLCH token，不改 DOM）→ 全站外观先换新，风险最低

and

【一、设计 token 体系（全站基础，最先做）】
原型用 OKLCH 重新定义了全部设计变量，替换现有硬编码 hex：

• 核心 token：--bg --surface --fg --muted --border --accent（+ --surface-2/3、--accent-soft、--fg-soft、--ok --warn --danger 及其 -soft 变体、--overlay）
• 派生方式统一用 color-mix(in oklch, ...)，不再写死中间色
• 第一步务必先把该文件复制进本仓库作为设计基线（建议 docs/prototype/aitokenpool-console.html）并随 PR 提交

Rant timestamp: 2026-09-11T16:23:43.625143+08:00 (project aitokenpool).

Changes

1. Prototype baseline committed (rant step 1)

docs/prototype/aitokenpool-console.html — the host's prototype is copied into the repository as the single design reference, so that the following PRs (and their reviews) do not depend on a path outside the repo (/Users/argszero/Downloads/t2/) that may be cleaned up.

2. OKLCH token layer (ui/css/style.css)

Both themes now define the prototype's token set:

Token	Dark (:root)	Light (:root[data-theme="light"])
--bg	oklch(17.67% 0.0114 260.64)	oklch(97.28% 0.0057 264.53)
--surface	oklch(24.17% 0.0194 258.36)	oklch(100% 0 0)
--fg	oklch(93.83% 0.0109 256.70)	oklch(25.55% 0.0267 262.58)
--muted	oklch(72.37% 0.0288 255.13)	oklch(49.45% 0.0418 262.59)
--border	oklch(31.93% 0.0296 260.54)	oklch(89.47% 0.0174 256.29)
--accent	oklch(77.62% 0.1116 188.54)	oklch(62.02% 0.1042 188.19)

Plus the derived tokens --surface-2/-3, --accent-soft, --fg-soft, --accent-ink, --ok/--warn/--danger and their -soft variants, --overlay, the font stack (--font-body / --font-mono / --font-serif), the radius scale (--r / --r-sm / --r-lg), --sidebar-w: 250px and --shadow — all identical to the prototype's definitions (verified token-by-token against the prototype source).

3. No more hardcoded intermediate colors

Every literal #hex / rgba() in component rules was replaced with a token-derived color-mix(in oklch, ...) expression (badges, login-view ambience, logo gradient, tour ring, toast, chat bubbles, …). The only remaining literals are a #000 alpha mask and the inset white/black highlight shadows on the logo, where a token expression would be meaningless.

4. Legacy aliases reverse-solved for zero visual delta

The old token names (--text, --text-dim, --bg-soft, --bg-card, --bg-hover, --text-mute, --accent-text, --danger-text, --card-hover-border, --card-shadow, --table-*, --spin-track, --overlay, --radius*, --font, --mono) are kept as aliases pointing at the new tokens, so this PR needs no changes to selectors, DOM or JS. Alias mix ratios were solved numerically against the previous hex palette so the rendered page is pixel-equivalent (e.g. --bg-hover → color-mix(in oklch, var(--surface) 48%, var(--border)) = #222a36, the exact previous value).

5. Cache-bust

ui/index.html: ?v=20260825-5 → ?v=20260911-1 (5 references).

What is intentionally NOT in this PR

Per the rant's rollout order, the remaining acceptance items land in later PRs: login page two-column redesign + sidebar rework (PR2), shared component layer (PR3), dashboard/market/sharing (PR4), wallet/transactions (PR5), settings/admin/ops (PR6).

Verification

• cargo test — 148/148 passed
• cargo fmt --check — clean
• cargo clippy --all-targets -- -D warnings — clean
• node --check on ui/js/{api,app,data,i18n}.js — OK
• CSS self-check: 44 tokens defined / 41 referenced, 0 undefined var() references, balanced braces and parentheses
• Token-by-token diff against docs/prototype/aitokenpool-console.html: all 26 prototype tokens match exactly