fix(webui): 深色模式真的落地了 —— 之前 .dark 是「有意留空」的

用户报「深色模式可读性差」。实测（1280×800，读页面计算值）拿到两个数字：
  · .glass-card 合成成 rgb(237,237,237) 白卡，而其上 --c-gray-900 文字是
    rgb(243,245,248) ⇒ **1.07:1 的白底白字**
  · .nav-rail 合成成 rgb(188,189,190) 浅灰条，未选中文字只有 4.03:1

根因写在 index.css 自己的注释里：`.dark { /* 有意留空 */ }`。当年留空的理由
是「组件没有 dark: 变体，只换令牌会半深不浅」——**方向反了**：组件写的是语义
色阶（bg-white / text-gray-900），灰阶反转后本来就会自适应；真正没适配的是
**手写 CSS 里那几处硬编码白色**（.glass-card 的 0.92、--nav-bg 令牌），
它们不在 --c-* 色板里，所以「色板变量已全覆盖」的判据一直是绿的。

改动：
1. .glass-card / .nav-* 全部改走令牌，主题之间只差 alpha；
   深色给 --glass-card-a: 0.06 + --nav-bg: 30 35 44/0.72。
   遵守既有契约（background.test「玻璃是白色材料」）：**基材恒为白**，
   只降 alpha，绝不换成深色层。
2. CalendarView 的非本月农历小字 text-gray-300 → gray-400/500。
   gray-300 在这套调色板里是**分隔线档**（全仓 68 处 border-gray-300、
   当文字只有 5 处），深色下它是 61,68,81，落在深卡上 1.49:1；
   而 gray-400 在深色 4.66:1、浅色白卡 2.54:1，两端都更好。
3. 判据：theme.test 补 3 条（手写 CSS 不许有绕过主题的硬编码白色表面 /
   深色卡片 alpha 必须降低 / **按实际 alpha 合成后**正文须 ≥4.5:1，
   即把 1.07:1 那个事故写成可计算的断言）。background.test 那条
   「.dark 里不许出现 --nav-*」**方向反转**为「必须有且底暗字亮」——
   它原来守的是「还没有深色主题」这个前提，其注释本就写明
   「真做深色主题时这条要一起改」。

验证（不是"改了就算"）：
· 自建探针遍历 **9 个页面**（三个通信子页签 / 邮件详情 / 日历 / 联系人 /
  我的 / 写信 / 地址补全弹层）：修复前通信 14 处、日历 74 处、
  联系人 13 处低于 WCAG AA；修复后 **9/9 页面 0 处**。
· 三条新判据逐条**变异自检**（还原修复即变红，且失败信息自带药方）；
  浅色三个取色值与改动前**逐字节一致**（导航 0.72 白玻璃、卡片 0.92 白）⇒ 零回归。
· theme.test 34 通过 / background.test 44 通过 / tsc 干净。
· 已按 deploy/redeploy-gateway.sh 部署到 systemd 实例，后置清单自动项全绿，
  并在生产实例上复量 9 个页面（同为 0 处）+ 端到端发信（状态 read，非仅入库）。

#深色模式 #可读性 #WCAG

client/electron/src/index.css

@@ -263,6 +263,13 @@
    * 三档从实到透：正文面(--bg-glass) > 嵌套卡(--bg-glass-inner) > 控件(--bg-glass-control)。
    */
   --bg-glass-control: 0.5;
+  --glass-card-a: 0.92;
+  --glass-card-hover-a: 0.99;
+  --glass-card-wall-a: 0.78;
+  --glass-card-wall-hover-a: 0.88;
+  /* 卡片边框：浅色用深色细线，深色用亮线（见 .dark，深色下层次靠边框不靠阴影）。 */
+  --hairline-fg: 15 23 42 / 0.07;
+  --hairline-fg-strong: 15 23 42 / 0.12;
   /* 面板的朦胧感（与壁纸自身的 --bg-blur 分开：那层给照片打底，这层给面板） */
   --bg-blur-panel: 10px;
   /* 浮动面板之间的缝隙：壁纸从缝隙里露出来，是圆角化玻璃化的关键 */
@@ -1410,6 +1417,7 @@ html.view-switch .pane-rise {
  *  我上一轮为了"白字对比度"把它做成深玻璃，那是**用错误的方式解决对比度**，
  *  真正的割裂就在这儿。深色底只应该是深色主题下的样子。
  *
+/*
  *  所以导航底色/文字都走令牌：
  *    - 浅色主题：白玻璃（0.72）+ 深字；
  *    - 深色主题（.dark）：深玻璃（0.72）+ 亮字。
@@ -1439,15 +1447,46 @@ html.view-switch .pane-rise {
  * 而不是先把导航单独压深。
  */
 /*
- * 深色主题：**这一块有意留空**。
+ * 深色主题 —— **2026-09-17 落地**（用户报「深色模式可读性差」）。
  *
- * 两件事必须一起做，否则就是"半深不浅"（我在导航上已经栽过一次）：
- *   1. 组件侧补齐 `dark:` 变体（现在一个都没有 —— 这是真正的深色主题工作）；
- *   2. 玻璃只降 `--glass-base` 的 alpha（保持白色基材），绝不去换基材颜色。
- * 在 1 完成之前，2 单独生效只会让"面变深、字还是深色"，读不了。
+ * 这里原先是有意留空的，理由是「组件侧没有 dark: 变体，只换令牌会半深不浅」。
+ * 实测证明那个担心方向反了：组件写的是**语义色阶**（`bg-white` / `text-gray-900`），
+ * 灰阶反转后它们自动适配；真正没适配的是**手写 CSS 里那几处硬编码白色**。
+ *
+ * 实测（深色、1280×800，读页面计算值）：
+ *   .nav-rail   合成 rgb(188,189,190) 浅灰条；--nav-fg-muted 文字只有 4.03:1
+ *   .glass-card 合成 rgb(237,237,237) 白卡；--c-gray-900 文字 1.07:1（白底白字）
+ * 也就是「深色下整片白」—— 这正是可读性差的来源。
+ *
+ * 修法遵守既有契约（background.test.mjs「玻璃是白色材料」）：**基材不改**
+ * （--glass-base 仍只有一处定义、仍是白），主题之间只差 **alpha** ——
+ * 深色下把白的 alpha 压到 0.06，让深底透上来；文字令牌本来就已反转。
  */
 .dark {
-  /* 有意留空 */
+  /*
+   * 导航：深玻璃 + 亮字。
+   *
+   * 这里曾有一条判据禁止 `.dark` 出现 `--nav-*`（背景是**当时还没有深色主题**
+   * ⇒ 只压深导航就会「导航黑、正文白」，比全浅更割裂）。那条判据的注释写明
+   * 「真做深色主题时，这条要连同 dark: 变体一起改」—— 本行即那个时刻，
+   * 判据已同步改成断言这套深色令牌**存在且对比度达标**。
+   */
+  --nav-bg: 30 35 44 / 0.72;
+  --nav-fg: 236 240 246;
+  --nav-fg-muted: 148 158 175;
+  --nav-hover-bg: 255 255 255 / 0.08;
+  --nav-active-bg: 30 58 95;
+  --nav-active-fg: 154 191 250;
+  --nav-border: 255 255 255 / 0.08;
+
+  /* 卡片面：白基材只降 alpha（0.92 → 0.06），深底便透上来。 */
+  --glass-card-a: 0.06;
+  --glass-card-hover-a: 0.1;
+  --glass-card-wall-a: 0.1;
+  --glass-card-wall-hover-a: 0.14;
+  /* 深色下靠「边框亮于底」而不是阴影来分层。 */
+  --hairline-fg: 255 255 255 / 0.09;
+  --hairline-fg-strong: 255 255 255 / 0.16;
 }
 
 .nav-rail {
@@ -1524,29 +1563,37 @@ html[data-bg='on'] .comm-pane > .bg-white {
 
 .glass-card {
   border-radius: var(--radius-card);
-  border: 1px solid rgb(15 23 42 / 0.07);
-  background-color: rgb(255 255 255 / 0.92);
+  border: 1px solid rgb(var(--hairline-fg));
+  /*
+   * 基材**恒为白**，主题之间只差 alpha（--glass-card-a）。
+   *
+   * 这里原先写死 `rgb(255 255 255 / 0.92)` —— 深色下它就是一块白卡，
+   * 而文字走的是反转后的近白令牌 ⇒ 实测 1.07:1 的白底白字。
+   * 写死白色的地方，深色主题一律改不成 —— 走令牌才有得改。
+   */
+  background-color: rgb(var(--glass-base) / var(--glass-card-a));
   transition: background-color 150ms, border-color 150ms;
 }
 
 .glass-card:hover {
-  background-color: rgb(255 255 255 / 0.99);
-  border-color: rgb(15 23 42 / 0.12);
+  background-color: rgb(var(--glass-base) / var(--glass-card-hover-a));
+  border-color: rgb(var(--hairline-fg-strong));
 }
 
 html[data-bg='on'] .glass-card {
-  background-color: rgb(var(--glass-base) / 0.78);
-  border-color: rgb(var(--glass-base) / 0.5);
+  background-color: rgb(var(--glass-base) / var(--glass-card-wall-a));
+  border-color: rgb(var(--hairline-fg));
 }
 
 html[data-bg='on'] .glass-card:hover {
-  background-color: rgb(var(--glass-base) / 0.88);
+  background-color: rgb(var(--glass-base) / var(--glass-card-wall-hover-a));
 }
 
 /*
  * （这里曾有 `.dark .glass-card { background: rgba(255,255,255,0.06) }`。
- *  它是按"深色主题已经存在"写的 —— 而实际上组件还没有 dark 变体，
- *  这条只会让卡片在浅色页面上几乎消失。等真深色主题落地再一起打开。）
+ *  它当年被撤掉的理由是「组件还没有 dark 变体，这条只会让卡片在浅色页面上
+ *  几乎消失」—— 2026-09-17 实测确认组件侧其实是自洽的（灰阶已反转），
+ *  缺的正是这一档 alpha，于是它现在以 `--glass-card-a` 的形态回来了。）
  */