/* ============================================================
旋钮 —— 工作台全部可调数值集中在这里
------------------------------------------------------------
想微调外观**只改这个文件**，不用翻 app.css。
运行时也能改：界面上的「设置 → 外观」面板改的就是这些值
（存在浏览器本地，见 web/js/store.js）。
面板改的是**本机这一份**，这个文件改的是**所有设备的默认值**。
为什么要分两处：
布局这件事天然是「按设备」的 —— 27 寸显示器上舒服的导航宽度，
搬到 13 寸笔记本上会显得笨重。所以外观偏好存本地，
不跟着账号走。要跨设备统一的是数据（待办、笔记），不是面板尺寸。
============================================================ */
:root {
/* ---- 画布 ----
横向和纵向分开控制：这是「看内容」的工作台，
宽屏上左右留白通常要比上下多一点，一个值表达不了。
这两个值同时决定玻璃的总宽和总高 —— 调大 = 面板变小、壁纸露出来更多。 */
--wb-frame-pad-x: 56px;
--wb-frame-pad-y: 40px;
/* 玻璃的内高。缺口和两个角补丁都要按它算位置，抽出来免得同一个算式写三遍。
注意：这是**引用式**定义，会跟着 --wb-frame-pad-y 走（包括 JS 行内改的那份）。 */
--wb-frame-h: calc(var(--wb-vh) - 2 * var(--wb-frame-pad-y));
--wb-radius-outer: 0; /* 面板外圈圆角。0 = 直角（2026-10-09 定）
接缝处永远是直角，不跟这个值走 */
/* 内圈圆角的缩放系数 —— JS 按「圆角」旋钮算出来：scale = radius / 22。
为什么基准是 22：直角化之前外圈就是 22px、内圈 sm=8 / md=12。
所以系数 1 能**精确复原**原设计；系数 0（当前默认）= 全直角。 */
--wb-radius-scale: 0;
/* ---- 左栏 ---- */
--wb-nav-w: 168px; /* 导航栏宽度 */
--wb-nav-h-ratio: 0.72; /* 导航栏高度占玻璃总高的比例（1 = 齐高）
这个值就是「L 形」的缺口大小：
越小 → 左下露出的壁纸越多 → L 越明显 */
--wb-notch-radius: 0; /* 左栏下沿两个角的圆角（缺口的上左 + 上右）
0 = 硬直角（默认，2026-10-09 定） */
/* ---- 玻璃材质 ---- */
--wb-glass-alpha: 0.66; /* 浅色主题的玻璃不透明度 */
--wb-glass-bias: 0; /* 深色主题会把它加上去，见下面的 [data-theme='dark'] */
--wb-glass-blur: 30px; /* 磨砂模糊半径 */
--wb-glass-sat: 1.6; /* 饱和度补偿。纯模糊会显灰，提一点才像 macOS */
/* ---- 圆角（面板内部的按钮/卡片）----
跟随 --wb-radius-scale，和外圈圆角共用一个旋钮（方案 B，2026-10-09 定）：
scale = 0 → 全直角（当前默认）
scale = 1 → sm 8px / md 12px（复原直角化之前的设计）
面板内的其他小圆角（勾选框、色块等）也用同一个系数，见 app.css。 */
--wb-radius-sm: calc(8px * var(--wb-radius-scale));
--wb-radius-md: calc(12px * var(--wb-radius-scale));
/* 锁屏（登录页）专用，**不跟随** —— 用户明确说的是「登录后的」界面。 */
--wb-radius-lg: 16px;
/* ---- 内容 ---- */
--wb-main-pad-x: 32px;
--wb-main-pad-y: 26px;
/* ---- 壁纸自带的「玻璃加厚量」----
浅色和深色主题分开给，因为需求方向是相反的（见 [data-wp='desk'] 的说明）。
具体取值由每张壁纸自己声明，这里只是解析。 */
--wb-wall-bias-light: 0;
--wb-wall-bias-dark: 0;
/* 壁纸自带的饱和度补偿（照片壁纸需要比渐变更高的值，见 [data-wp='desk']） */
--wb-wall-sat: var(--wb-glass-sat);
/* ---- 尺寸 ---- */
--wb-vh: 100vh; /* iOS 上用 dvh 更准，下面覆盖 */
/* ⚠️ 正文字号。**不要改名回 `--wb-text`。**
它还叫 `--wb-text` 的时候，和主题块里的文字颜色变量**重名**了
（`[data-theme='light'] { --wb-text: #111114 }`，
选择器特异性与 `:root` 相同，靠源码顺序决胜 → 颜色赢）。
结果是 app.css 里那行
font: var(--wb-text) / 1.55 var(--wb-font-sans);
展开成 `font: #111114 / 1.55 ...` —— 语法非法，
**整条声明被浏览器丢弃**，body 悄悄退回浏览器默认字体和行高。
不报错、不警告，界面只是「看着还行」—— 藏在明处的那种 bug。
现在改叫 --wb-font-size：名字和用途一一对应，不可能再撞。
（全项目只有 app.css 一处用它，因为它是**基准字号**；
各控件自己的字号写在 app.css 里。） */
--wb-font-size: 13px;
/* ---- 字体 ----------------------------------------------------
正文用「梦源黑体 CN W4」（Dream Han Sans CN W4），来自 CDN。
字体 CSS 在 web/index.html 里用 引入，**不是 @import** ——
见那里的注释：@import 是串行阻塞的，link 能被预加载扫描器并行发现。
⚠️ 回退栈不能省。"Dream Han Sans CN W4" 有三个可能失效的环节：
① 第三方 CDN 挂了 / 被墙
② 用户网络慢，分片还没到（CDN 的 CSS 里是 font-display: swap，
所以这段时间会先用回退字体渲染 —— 这是对的，别改成 block）
③ 中文字体按 149 个分片按需加载，页面出现没预载的生僻字时
会先回退、再补
→ 所以后面这串系统字体栈是真在用的，不是摆设：
它在「字体没到」和「字体缺字」两种情况下都会顶上。 */
--wb-font-sans: 'Dream Han Sans CN W4',
-apple-system, BlinkMacSystemFont, 'Segoe UI',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
@supports (height: 100dvh) {
:root { --wb-vh: 100dvh; }
}
/* ============================================================
壁纸
------------------------------------------------------------
六张都定义在 [data-wp=''] 上，而不是写进 JS。
为什么：设置页的壁纸选择器要显示小色块预览。把渐变定义成选择器规则后，
色块只要自己带上 data-wp 属性就能直接复用同一个变量 ——
渐变字符串在整个项目里**只存在一份**，不会 JS 一份 CSS 一份地漂移。
⚠️ 六张**全部偏浅**，这是刻意的，不是审美偷懒：
玻璃是浅色的（半透明白），它压在任何壁纸上的结果都是
「壁纸亮度 × 0.34 + 白 × 0.66」。壁纸一深，玻璃就掉进中间调，
深色字和浅色字都不讨好 —— 实测深蓝壁纸下次要文字只有 3.6:1，
低于 WCAG AA 的 4.5:1。
浅壁纸 → 玻璃稳定落在高明度区 → 三档文字全部达标（实测 5.6 ~ 14.6:1）。
想要深色观感就用**深色主题**（那里玻璃本身变暗），不要靠深色壁纸。
用渐变而不是图片：零下载、首屏不等图片、断网也能跑。
将来要支持上传，把这里换成 url(...) 即可，其他代码不用动。
============================================================ */
/* 窗边（照片壁纸）—— 用 scripts/make-wallpaper.py 烘焙好的磨砂版。
------------------------------------------------------------
为什么磨砂要**烘焙进图片**，而不是运行时用 CSS filter：
L 形缺口是靠「盖一层同位置的壁纸副本」做出来的
（.wb-notch / .wb-notch-corner 三个元素各画一份同一张图）。
如果在每个元素上各加 filter: blur()，模糊核会被各自的盒子裁掉 ——
18×18 的小补丁和整屏壁纸糊出来的东西完全不一样，接缝立刻现形。
而且运行时 filter 会让元素变成 backdrop root，玻璃的 backdrop-filter
正依赖「能采样到下面这张壁纸」。烘焙 = 零运行时风险。
磨砂参数（blur 40px + 轻微去饱和）见 scripts/make-wallpaper.py。
实测效果：文件 347KB → 72KB，图像最亮 10% 分位的亮度 0.574 → 0.482
（局部对比度下降 = 磨砂的观感来源），但**整体亮度几乎不变**（0.179 → 0.161）。
⚠️ 玻璃加厚量是**实测出来的**，不是审美偏好：
这张照片偏暗（均值 RGB 91,95,95 / 感知亮度 0.179）。
半透明白玻璃压在暗底上会落进中间调 —— 默认 0.66 时次要文字只有 4.10:1，
低于 WCAG AA 的 4.5。
第一版给 0.10（合计 0.76），实测下来某项只有 **4.51:1**，几乎是贴着线过的 ——
因为照片里有比均值更暗的区域，而我的估算用的是整图均值。
现在给 0.14（合计 0.80），实测 5.0+ 才算稳。
深色主题方向**相反**：暗玻璃配暗壁纸本来就对比充足，
反过来要把主题那 +0.2 的加厚退掉大半，不然玻璃近乎全黑、壁纸全被盖住。 */
[data-wp='desk'] {
--wb-wallpaper-image: url('/assets/wallpapers/desk.jpg');
--wb-wall-bias-light: 0.08;
--wb-wall-bias-dark: -0.14;
/* 照片是灰绿色的（均值 91,95,95），透过来容易显脏。
多提一点饱和度，让那点暖色（台灯、木桌）透过来时还认得出。 */
--wb-wall-sat: 2.4;
}
/* 极光 —— 蓝 → 青 → 薄荷 */
[data-wp='aurora'] {
--wb-wallpaper-image: linear-gradient(160deg, #bcd6f7 0%, #a2c6f0 28%, #92dcd8 62%, #bce9d0 100%);
}
/* 晨曦 —— 蜜桃 → 粉 → 藕荷 */
[data-wp='dawn'] {
--wb-wallpaper-image: linear-gradient(160deg, #fce2c8 0%, #f9cbb4 30%, #f2bcd0 64%, #dcc0ea 100%);
}
/* 暮色 —— 藕荷 → 粉 → 杏 */
[data-wp='dusk'] {
--wb-wallpaper-image: linear-gradient(150deg, #ded3f2 0%, #ceb8ea 32%, #eebcd4 64%, #f9d6bc 100%);
}
/* 松林 —— 薄荷 → 青 → 淡蓝 */
[data-wp='forest'] {
--wb-wallpaper-image: linear-gradient(155deg, #d2ead9 0%, #b0dec6 34%, #9ad3d3 70%, #c3e2ec 100%);
}
/* 素石 —— 中性灰，最不抢戏的一张 */
[data-wp='stone'] {
--wb-wallpaper-image: linear-gradient(160deg, #eff1f5 0%, #e0e3e9 40%, #d0d5de 72%, #c4cad5 100%);
}
/* 海雾 —— 六张里最深的一张，仍然保持高明度 */
[data-wp='ocean'] {
--wb-wallpaper-image: linear-gradient(160deg, #a8c8e6 0%, #93bae0 34%, #86bfd8 68%, #aad3de 100%);
}
/* ============================================================
主题
------------------------------------------------------------
玻璃是「透过它看壁纸」，所以底色不能写死白色 ——
浅色是半透明白、深色是半透明黑，两者共用 --wb-glass-alpha。
文字三档不是随手挑的：按「玻璃最浅」和「玻璃最深」两种极端各算一次
WCAG 对比度，取两边都达标的交集。实测：
浅色主题（浅壁纸） 正文 14.6:1 · 次要 9.3:1 · 微弱 5.6:1
深色主题（浅壁纸） 正文 11.9:1 · 次要 6.9:1 · 微弱 4.7:1
—— 都过 AA 4.5:1。改动前这两组里「微弱」那档分别只有 3.9 和 2.5，
是肉眼能直接看出来的问题。
============================================================ */
:root,
[data-theme='light'] {
--wb-glass-rgb: 255 255 255;
--wb-glass-bias: 0;
--wb-text: #111114;
--wb-text-dim: #3a3a42;
/* ⚠️ 这个值是被「照片壁纸」逼出来的，不是随手调的。
照片（均值 RGB 91,95,95）比渐变暗得多，玻璃透过来的部分把底色压低了，
次要文字原本的 #5c5c66 在 0.66 不透明度下只有 4.10:1（不达标）。
要把玻璃加到 0.80 才够 —— 但那样面板就变成一块实心灰板，壁纸看不见了。
把这一档压深到 #4a4a54 之后，0.74 就能到 5.9:1，玻璃还能保住 26% 的透光。
浅壁纸那边不受影响（深字配浅底只会更清楚）。 */
--wb-text-faint: #4a4a54;
--wb-line: rgb(0 0 0 / 0.1);
--wb-hover: rgb(0 0 0 / 0.055);
--wb-active: rgb(0 0 0 / 0.095);
--wb-field: rgb(255 255 255 / 0.66);
--wb-field-line: rgb(0 0 0 / 0.13);
--wb-check-line: rgb(0 0 0 / 0.34);
--wb-accent: #0a6fd8;
--wb-accent-fg: #fff;
--wb-danger: #c11b12;
--wb-shadow: 0 1px 3px rgb(0 0 0 / 0.07);
}
[data-theme='dark'] {
--wb-glass-rgb: 22 22 26;
/* ⚠️ 深色主题把玻璃加厚 0.2。
不加的话，深色玻璃压在**浅色**壁纸上也只落到中间调（实测 lum≈0.10），
次要文字对比度只有 2.5:1 —— 比浅色主题还糟。
浅色主题靠「浅玻璃 + 深字」拉开距离，深色主题就得靠「够黑 + 浅字」。 */
--wb-glass-bias: 0.2;
--wb-text: #f5f5f9;
--wb-text-dim: #c9c9d2;
--wb-text-faint: #a9a9b3;
--wb-line: rgb(255 255 255 / 0.13);
--wb-hover: rgb(255 255 255 / 0.08);
--wb-active: rgb(255 255 255 / 0.15);
--wb-field: rgb(255 255 255 / 0.11);
--wb-field-line: rgb(255 255 255 / 0.18);
--wb-check-line: rgb(255 255 255 / 0.44);
--wb-accent: #4aa3ff;
--wb-accent-fg: #06121f;
--wb-danger: #ff6a60;
--wb-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}
/* ============================================================
把「壁纸加厚量」解析成当前主题该用的那份
------------------------------------------------------------
必须放在主题块**之后** ——
:root 和 [data-theme] 的特异性相同，靠源码顺序决胜。
为什么不让壁纸只声明一个数：
浅色主题要的是「浅玻璃」，深色壁纸会把它拖进中间调 → 得**加厚**；
深色主题要的是「暗玻璃」，深色壁纸本来就够暗 → 反而要**减薄**。
方向相反，一个数表达不了。
============================================================ */
:root { --wb-wall-bias: var(--wb-wall-bias-light, 0); }
[data-theme='dark'] { --wb-wall-bias: var(--wb-wall-bias-dark, 0); }