/* ==========================================================================
   微迹 Weetrack — 设计令牌
   --------------------------------------------------------------------------
   【2026-10-03 照一木记账（yimubill.com）重定基调】

   用户原话：「现在整个网站的颜色风格还是过于诡异和单调」
   然后给了参考站，要求照它的配色来。

   【原来为什么"诡异又单调"】
   旧基调是一套**莫兰迪灰调**：暖米色底（#f4f2ee）+ 灰玫瑰主色（#b8737a）
   + 砖红/鼠尾草绿/板岩蓝。每个颜色的**饱和度都压在 15%~25%**——
   所以整站看上去是一片发灰的暖褐，没有任何一处跳出来，
   这就是"单调"；而暖米底配灰玫瑰（一个偏粉的暗红）用在记账这种
   数字密集的界面上，读起来发闷、像是旧纸张褪色，这就是"诡异"。

   【参考站实测到的色（截图逐像素采的，不是估的）】
   底色/面板   #f3f4f6   中性冷灰（不是暖米色）
   卡片        #ffffff   纯白
   主色        #48ab93   青绿（选中页签、账户名、图表里的"收入"）
   支出        #fb5655   鲜红
   收入        #0081ff   鲜蓝（汇总里的收入数字）
   图表         #ffc912 黄 · #ff8e37 橙 · #0081ff 蓝 · #e91e63 粉
                #48ab93 绿 · #81d4fa 浅蓝 · #c5e1a5 浅绿 · #ffcc80 浅橙
   文字        #374151 / #6b7280 / #9ca3af（中性灰阶）
   药丸底色    #e4f2ef 绿 · #fff3f3 红 · #e7ffff 青 · #ffffe3 黄

   【关键差别就一条：饱和度】
   参考站的功能色饱和度在 75%~100%，我原来是 15%~25%。
   把饱和度提上来、底色从"暖米"换成"中性冷灰"，
   "单调"和"诡异"两个问题就同时解决了 ——
   底色neutral之后，那些鲜艳的功能色才有对比、才跳得出来。
   ========================================================================== */

:root {
  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI",
    "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---------- 底色与表面（中性冷灰 + 纯白卡片） ---------- */
  --app-bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f0f1f3;
  --surface-sunken: #e5e7eb;
  --overlay: rgba(17, 24, 39, 0.45);

  /* ---------- 线条（中性灰阶） ---------- */
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --line-soft: #f3f4f6;

  /* ---------- 文字（中性灰阶，不用暖灰） ---------- */
  --text: #1a1a1a;
  --text-2: #4b5563;
  --text-3: #888888;
  --text-inverse: #ffffff;
  /* 【--text-1：一个用了 20 次却从没定义过的变量（2026-10-06 补上）】
     全站 5 个文件里有 20 处 `color: var(--text-1)`，而这个变量
     **从来没有在任何地方定义过** —— 于是那 20 条声明全部是无效的，
     浏览器直接丢掉，文字就退回继承来的颜色。

     后果最明显的就是邮箱列表：`.mail-from`（发件人）本来该是最深的
     一级文字色，实际却掉回了容器继承的浅灰，所以
     "标题和内容都看不全、糊成一片" —— 用户报的就是这个。

     为什么是别名而不是改那 20 处：`--text-1` 这个命名
     （1/2/3 的层级）本来就更清楚，而且别处已经在用；
     定义成 `--text` 的别名，语义一致、深浅主题都自动跟着走。 */
  --text-1: var(--text);

  /* ---------- 主题色：青绿 ---------- */
  --brand: #3d9d84;
  --brand-soft: #e4f2ef;
  --brand-deep: #2f7f6b;
  /* 【--brand-strong / --brand-line：补定义（2026-10-06）】
     这两个名字在别的样式表里用了 5 处，但从来没定义过。
     它们**都带了兜底值**（var(--brand-strong, #55643f)），
     所以不补也能显示 —— 兜底那个色是旧的橄榄绿，
     和现在的青绿主色完全不是一套，看着就是"某个地方颜色不对"。
     补成主色的同族，深浅主题都会跟着走。 */
  --brand-strong: var(--brand-deep);
  --brand-line: color-mix(in srgb, var(--brand) 35%, var(--line));
  /* 压在实心主色上的内容色（勾号、按钮字）—— 见主题段的说明 */
  --on-brand: #ffffff;
  /* 压在实心强调色上的内容色（--accent 同理，夜间提亮了就要换深字） */
  --on-accent: #ffffff;
  --accent: #0081ff;
  --accent-soft: #e6f2ff;

  /* ---------- 功能色（饱和度提上来，这是"单调"的解药） ---------- */
  --green: #48ab93;
  --green-soft: #e4f2ef;
  --blue: #0081ff;
  --blue-soft: #e6f2ff;
  --amber: #ff8e37;
  --amber-soft: #fff2e6;
  --rose: #e91e63;
  --rose-soft: #fde8ef;
  --violet: #7c6bd6;
  --violet-soft: #f0edfb;
  --red: #fb5655;
  --red-soft: #ffecec;
  --slate: #6b7280;
  --slate-soft: #f3f4f6;
  /* 【日期色】参考站的"2024年10月11日"是紫色 #8b5cf6，
     是它很容易认出来的一个特征，照搬。 */
  --date-color: #8b5cf6;

  /* ---------- 待办卡片色板（跟着提饱和） ---------- */
  --tone-gray-bg: #f3f4f6;
  --tone-gray-bd: #e5e7eb;
  --tone-gray-chip: #e5e7eb;
  --tone-green-bg: #e4f2ef;
  --tone-green-bd: #c9e5de;
  --tone-green-chip: #b8ddd4;
  --tone-blue-bg: #e6f2ff;
  --tone-blue-bd: #cce4ff;
  --tone-blue-chip: #b8dbff;
  --tone-amber-bg: #fff2e6;
  --tone-amber-bd: #ffe0c7;
  --tone-amber-chip: #ffd4b0;
  --tone-rose-bg: #fde8ef;
  --tone-rose-bd: #fbd0de;
  --tone-rose-chip: #f9bcd1;
  --tone-violet-bg: #f0edfb;
  --tone-violet-bd: #dfd8f5;
  --tone-violet-chip: #cec4ee;
  /* 【压在色调底上的文字色】—— 白天用深色（浅底上能看清） */
  --tone-gray-fg: #3f4753;
  --tone-green-fg: #1f6b57;
  --tone-blue-fg: #1d4ed8;
  --tone-amber-fg: #8a5a12;
  --tone-rose-fg: #a11d4e;
  --tone-violet-fg: #5b45b8;

  /* ---------- 圆角 ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- 阴影（中性冷灰，原来是暖褐色） ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 6px 20px -6px rgba(17, 24, 39, 0.12);
  --shadow-lg: 0 18px 44px -14px rgba(17, 24, 39, 0.20);
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -18px rgba(17, 24, 39, 0.18);
  /* 【--shadow-1 / --shadow-2：旧的序号命名，补成别名（2026-10-06）】
     现在的影子是 xs/sm/md/lg 这套；这两个是更早的"1/2"叫法，
     全站还有 2 处在用。注意 **--shadow-2 那一处没写兜底**
     （`box-shadow: var(--shadow-2)`），所以它一直是**完全失效**的 ——
     那个卡片实际上一点阴影都没有，只是没人注意到。
     按语义对应：1 → sm，2 → md。 */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  /* 【--line-2 / --warn-bg / --warn-line / --soft / --palette-w：同类补齐】
     这些也都在别处用了、且带了兜底，兜底值是旧配色（暖米/橄榄绿）。
     补上定义之后，它们就跟着现在的主题走了。 */
  --line-2: var(--line-strong);
  --warn-bg: var(--amber-soft);
  --warn-line: var(--tone-amber-bd);
  --soft: var(--surface-2);
  /* 组件库侧栏宽度。原来只在 board.css 里 var(--palette-w, 268px)，
     定义放这里，以后想调就一处。 */
  --palette-w: 268px;

  /* ---------- 尺寸 ---------- */
  --sidebar-w: 190px;
  --side-col-w: 300px;
  --page-pad: 26px;
  --gap: 18px;

  /* ---------- 侧栏（深色） ---------- */
  /* 主色换成青绿之后，侧栏的"选中态"也用它 ——
     原来那个 rgba(255,255,255,.12) 是一片灰，看不出选中了哪一项。 */
  --nav-bg: #1f2937;
  --nav-bg-2: #273244;
  --nav-text: #9ca3af;
  --nav-text-active: #ffffff;
  --nav-active-bg: rgba(72, 171, 147, 0.24);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-muted: #6b7280;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.22s;
}

/* ==========================================================================
   主题
   --------------------------------------------------------------------------
   用户 2026-10-03 提的：「现在对整个网站做颜色主题，先做几个纯色主题」

   【什么叫"纯色主题"】
   不是只换一个点缀色（原来的 mist / ink 就只改了 --brand 和 --app-bg，
   结果三个主题看着几乎一样）。而是**整页的基调色**都跟着换：
   底色、卡片面、边线、文字、主色 —— 一整套。

   【为什么要覆盖这么多变量才"看起来真的换了"】
   页面的观感主要由 `--app-bg`（最底层）+ `--surface`（卡片）
   + `--text`（文字）三者决定。只改 --brand 的话，
   用户看到的还是同一片米色纸，只是按钮换了个颜色 ——
   那不算主题。

   【配色怎么定的】
   每个主题选一个**色相**，然后把底色/面/线/文字都往那个色相上偏一点点：
     · 底色和面**同色相、只差明度** → 层次自然，不会花
     · 文字用同色相的深色（不是纯黑）→ 和底色是一家人
     · 主色用**同色相但更饱和**的那一档 → 有重点又和谐
   饱和度一律压得很低（4%~12%）：这是个人工作台，不是宣传页。

   【和深色主题的关系】
   `data-mode="dark"` 那一套（在 admin-theme.css / 别处）管明暗，
   这里管色相。两者是**正交**的 —— 主题只调色相基调，
   不碰"深色模式"那套逻辑。所以下面这些值在浅色下都成立。
   ========================================================================== */

/* ==========================================================================
   主题：只有两个 —— 白天 / 夜间
   --------------------------------------------------------------------------
   用户 2026-10-03：「暂时把现在的主题都删了，就做两个主题，白天和夜间」

   原来那 8 个（纸感/雾蓝/苔绿/藕荷/暖沙/石墨/薄荷灰/靛青）都删了。
   删之前先说明一件事，免得以后又踩：
   **原来那个 `ink`（墨夜）本来是深色主题** —— daymark.css / vault.css /
   pages.css 里都还留着 `[data-theme='ink']` 的"深底上换亮色"规则。
   我中途把它改成了浅色的"靛青"，于是那些规则全部失效
   （它们一直在等一个深色主题）。现在正好：**夜间主题接上这套规则**，
   把那几个选择器改成 `[data-theme='night']` 就行。

   键名用 `day` / `night`：见名知意，也不会和旧数据里的
   paper/mist/ink… 混淆（旧值读不到就自动落到白天，不会出错）。
   ========================================================================== */

/* ---------- 白天（默认）---------- */
:root,
:root[data-theme="day"] {
  --theme-name: 白天;
}

/* ---------- 夜间 ----------
   深色不是把浅色"反过来"就完事，几条规矩：
     · 底色**不用纯黑**（#000 配白字对比过强、看久了很累），
       用 #14171a 这种带一点冷调的近黑
     · 卡片比底色**亮一档**（#1c2126）—— 深色下"抬高"靠变亮，
       浅色下靠阴影，这是两套不同的层级语言
     · 主色/收支色都要**提亮**（#3d9d84 → #4fb79c）：
       浅底上够用的饱和度，搬到深底上会糊成一片
     · 文字不用纯白（#e6e9ed）：纯白在深底上会"发光"，刺眼 */
:root[data-theme="night"] {
  --theme-name: 夜间;

  --app-bg: #14171a;
  --surface: #1c2126;
  --surface-2: #22272d;
  --surface-3: #272d34;
  --surface-sunken: #101315;
  --overlay: rgba(0, 0, 0, 0.62);

  --line: #2c333a;
  --line-strong: #3a424b;
  --line-soft: #22272d;

  --text: #e6e9ed;
  --text-2: #a3acb8;
  --text-3: #78828f;
  --text-inverse: #14171a;

  --brand: #4fb79c;
  --brand-soft: #1e3a34;
  --brand-deep: #6fd0b4;
  /* 夜间主色是**亮**的，压在上面的勾号/字必须是深色 */
  --on-brand: #0e1a17;
  --on-accent: #0b1a2b;
  --accent: #4d9fff;
  --accent-soft: #17304d;

  --green: #4fb79c;
  --green-soft: #1e3a34;
  --blue: #4d9fff;
  --blue-soft: #17304d;
  --amber: #ffa055;
  --amber-soft: #3d2a17;
  --rose: #ff5c8a;
  --rose-soft: #3d1a26;
  --violet: #a78bfa;
  --violet-soft: #2a2340;
  --red: #ff6b6a;
  --red-soft: #3d1f1f;
  --slate: #8b95a1;
  --slate-soft: #262c33;
  /* 日期在深底上也要提亮，否则那个紫会糊掉 */
  --date-color: #a78bfa;

  --tone-gray-bg: #22272d;
  --tone-gray-bd: #2c333a;
  --tone-gray-chip: #333a42;
  --tone-green-bg: #1e3a34;
  --tone-green-bd: #275044;
  --tone-green-chip: #2f5f52;
  --tone-blue-bg: #17304d;
  --tone-blue-bd: #1f4066;
  --tone-blue-chip: #274f7d;
  --tone-amber-bg: #3d2a17;
  --tone-amber-bd: #523a20;
  --tone-amber-chip: #66492a;
  --tone-rose-bg: #3d1a26;
  --tone-rose-bd: #542333;
  --tone-rose-chip: #6b2c40;
  --tone-violet-bg: #2a2340;
  --tone-violet-bd: #392f55;
  --tone-violet-chip: #483b6b;
  /* 夜间反过来：底是深的，字要浅 */
  --tone-gray-fg: #c3cbd6;
  --tone-green-fg: #7fd4bd;
  --tone-blue-fg: #8ec2ff;
  --tone-amber-fg: #ffc78a;
  --tone-rose-fg: #ff9ec4;
  --tone-violet-fg: #c4b1ff;

  /* 深底上的阴影要更重才看得出层次（而且颜色要更黑，不能用灰） */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.58);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px -18px rgba(0, 0, 0, 0.5);

  --nav-bg: #101315;
  --nav-bg-2: #171b1f;
  --nav-text: #8b95a1;
  --nav-text-active: #ffffff;
  --nav-active-bg: rgba(79, 183, 156, 0.22);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-muted: #5f6873;
}