# bashi-website — 设计系统完善 + 暗色模式落地

> 像素君（UI Designer）· 第二轮打磨：把"死"的暗色 token 真正激活，并补全设计系统刻度尺 + 赛道色单源。

## 1. 设计令牌补全（`global.css`）
- **字体刻度尺**：在 `:root` 新增模块化 token —— `--fs-xs…4xl`、`--lh-tight/snug/normal/relaxed`、`--fw-regular…bold`、`--ls-tight…widest`。设计系统从此有统一"刻度尺"，组件可逐步迁移到令牌而非散值。
- **主题感知 surface 令牌**：`--surface-card` / `--text-strong` / `--header-bg` / `--accent`，浅色下指向既有值，暗色下自动切换。

## 2. 暗色模式（从摆设变成真功能）
之前 `--bg-dark` / `--text-on-dark` / `--shadow-dark-*` 都定义了，却**没有 `data-theme="dark"` 覆盖块、也没有切换开关**——等于死代码。本次：
- 新增 `[data-theme="dark"]` 覆盖块：暖调近黑表面（`--bg-primary:#16110E`、`--surface-card:#1E1813`）、暖白文字（`--text-primary:#F5EFE6`、`--text-strong:#FBF6EC`）、低透明度奶油描边、暗色阴影、`color-scheme: dark`。
- `body` 加 `background-color/color` 依赖令牌，整页随主题切换。
- **三态主题开关**：`src/hooks/useTheme.ts`（浅 / 深 / 跟随系统，localStorage 持久化 + 系统偏好实时监听）+ Header 顶栏按钮循环切换 `Sun / Moon / Monitor`（lucide 图标）。
- `index.html` 内联防闪烁脚本：首屏绘制前就设好 `data-theme` 与 `color-scheme`，**无 FOUC**。

## 3. 组件迁移到主题令牌
- 中性/深色底上的 `text-[var(--brand-black)]` → `text-[var(--text-strong)]`（覆盖 Home/Business/Innovation/Join/Contact/About/Footer/Privacy/NotFound/Header 的全部标题与导航文字）。
- `bg-white` 卡片 → `bg-[var(--surface-card)]`（Contact/Join/NotFound/Privacy）。
- 悬停底色 `hover:bg-[var(--brand-cream-light)]` → `hover:bg-[var(--accent)]`；静态奶油色高亮块（About/Join/Innovation 序号徽章、Contact Passion 卡）→ `bg-[var(--accent)]`。
- 英雄区/区块渐变遮罩：白底遮罩改为 `color-mix(in srgb, var(--bg-primary) NN%, transparent)`，奶油渐变改为 `var(--bg-secondary)`，均随主题淡入背景。
- Header 吸顶与移动菜单底色 → `var(--header-bg)`。
- **关键边界**：奶油实心按钮（Home 联系 CTA、Business CTA）保留 `text-[var(--brand-black)]`——浅奶油底配深字在两种主题都可读，若误改成浅字会在暗色下"浅字叠浅底"翻车（已修复一处该回归）。

## 4. 赛道色单源（`--track-*` 成为唯一来源）
- 新增 `src/lib/tracks.ts`：`TRACK_TOKEN` 把 social/career/payment/ai 映射到 `var(--track-*)`。
- `i18n` 的 `business.tracks[]` 加 `key` 字段、**删除**原先写死的粉彩 `color` 字段（即那套双源粉彩）。Home/Business 改用 `TRACK_TOKEN[track.key]`，卡片底色（`color-mix` 深色调）与圆点 accent 现在共享同一 token，永不漂移。

## 5. Footer 清理
- 残留 `📍` emoji → lucide `MapPin`；硬编码 `rgba(26,26,26,0.40)` 的标语文字 → `var(--text-muted)`（暗色下原本会不可见）。

## 验证
- `npx tsc --noEmit` → 0 错误；`npm run build` → 1821 模块；`[data-theme=dark]` 块与 `#16110e` 已进入 `dist` CSS；**全站 0 emoji**；所有路由 200；改动模块编译干净；主题接线（`baskbuddy-theme`、`data-theme`）在产物 JS 中可查。
- 说明：暗色**视觉**正确性经逐项推演确认（无 headless 浏览器截图）；请点击顶栏 Sun/Moon/Monitor 按钮实际体验切换。

## 仍可继续打磨的方向（可选）
- 把组件里的 `text-[15px]` 等散值逐步替换成本轮新增的 `--fs-*` 刻度（目前令牌已就位，属渐进式重构）。
- 补一套更完整的暗色对比度走查清单（针对 `.gradient-mesh` / `.text-gradient-warm` 等渐变类在暗色下的表现）。
- 部署级：确认托管平台的 SPA fallback（已有 `public/_redirects`，nginx/Vercel 规则可补）。