/* ═══════════════════════════════════════════════════════════════════════
   人生探微 · 设计变量
   ─────────────────────────────────────────────────────────────────────
   方向：古典纸墨。宣纸底 + 松烟墨 + 朱砂一点。
   全站只有朱砂一个强调色；五行色（青赤黄白黑）只服务于盘面数据可视化，
   不做界面装饰——这条是原站 index.html 就定下的规则，沿用。

   深色（原「近黑 + 金」）保留为可选：加 html.dark 即切换。
   默认不加深色，所以没有存过主题的用户会看到纸墨。
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 纸：三层表面 ────────────────────────────────────────────────
     色相刻意偏黄绿（约 75°）而不是奶油黄（约 47°）。
     奶油底是 AI 设计最容易滑进去的默认值；而真实的宣纸／竹纸本来
     就带一点绿调，所以这个选择既避开套路，也更接近实物。 */
  /* ★ 拉开层次 ★
     之前纸和卡片只差一点点（#E7E9E1 vs #F2F4EE），整页看着"平"、发闷。
     现在卡片提到近白，纸底不动（这个色相是老板认可过的），
     层级一眼分得出来。 */
  --paper:        #E7E9E1;   /* 页面底 */
  --paper-2:      #D6DACB;   /* 次级面 / 凹陷区：比纸明显深一档 */
  --surface:      #FBFCF8;   /* 卡片主面：近白，从纸底上"浮"出来 */
  --surface-2:    #EDF0E7;   /* 卡片内嵌 */
  --surface-hi:   #FFFFFF;   /* 浮层 / 弹窗：纯白，压过一切 */

  /* ── 墨：三级文字，全部通过 WCAG AA ──────────────────────────────
     纸底是浅底，"淡墨"不可能真的淡——这是浅色主题的物理约束，
     先服从可读性。数值是对 --paper 的对比度。 */
  --ink:          #1A1712;   /* 正文 / 标题     16.2:1 */
  --ink-mid:      #453D33;   /* 次要文字         8.7:1（原 6.0） */
  --ink-faint:    #57503F;   /* 提示 / 禁用      6.5:1（原 5.0） */
  /* 朱砂底上的文字。刻意用中性近白，不用纸色 #E7E9E1——
     纸色带绿调，压在红底上会发闷、显脏，看起来像没调准的灰。 */
  --ink-invert:   #FCFBF8;

  /* ── 朱砂：全站唯一强调色 ────────────────────────────────────────
     一路压深到这里：更亮的 #A8322A 压在中浅灰上只有 4.3:1（过不了 AA），
     #9C2E26 够合规但整页偏"平"；#8E241C 既合规又有分量，
     也更接近传统朱砂的沉稳。 */
  --cinnabar:     #8E241C;   /* 压深一档，纸底 7.1:1 */
  --cinnabar-deep:#7A1D16;   /* 需要更强对比时用（如大标题上的强调） */
  --cinnabar-soft:rgba(142,36,28,.14);
  --cinnabar-line:rgba(142,36,28,.34);

  /* ── 线：发丝边 ─────────────────────────────────────────────────
     原站早有结论："悬停只提亮描边，不再上浮 + 发光。上浮发光是炫技，
     看多了显得廉价。" 这套变量就是那条结论的延续。 */
  --line:         rgba(26,23,18,.20);   /* 描边加重：原 .14 太淡，卡片边几乎看不见 */
  --line-2:       rgba(26,23,18,.34);
  --line-3:       rgba(26,23,18,.52);

  /* ── 五行：只用于盘面数据 ────────────────────────────────────────
     照纸底重新调过明度，原值是照深底选的，直接搬过来会太亮。 */
  --wx-wood:  #4F7A63;   /* 木 */
  --wx-fire:  #9C2E26;   /* 火 */
  --wx-earth: #8A6A3B;   /* 土 */
  --wx-metal: #6E6A62;   /* 金 */
  --wx-water: #3C5169;   /* 水 */

  /* ── 语义色 ──────────────────────────────────────────────────────
     原站用了 --jade / --fire 等名字，语义和用法对不上。这里按用途命名。
     ★ 比五行色更深 ★
       最初这两个直接借用了 --wx-wood / --wx-earth 的值，但那两个是
       **数据色**（画在色条上，不承载文字），拿来当文字放在纸底上
       只有 4.0:1 和 4.1:1，差一点点过不了 AA。语义色是要写字的，
       所以单独压深一档。 */
  --ok:    #3F6B52;   /* 纸底 5.0:1 */
  --warn:  #765A31;   /* 纸底 5.2:1 */
  --err:   #8E241C;   /* 与朱砂同色 */

  /* ── 字号：七档 ──────────────────────────────────────────────────
     原站用了 46 种字号、其中 11px 和 12px 是最高频的两个。
     这里收敛成七档，正文下限 14px，功能文字下限 12px。 */
  --t-xs:  12px;   /* 标签 / 脚注 */
  --t-sm:  14px;   /* 次要正文 */
  --t-md:  16px;   /* 正文 */
  --t-lg:  20px;   /* 小标题 */
  --t-xl:  26px;   /* 标题 */
  --t-2xl: 34px;   /* 大标题 */
  --t-3xl: 46px;   /* 首屏标题（仅桌面） */

  --lh-tight: 1.3;   /* 标题 */
  --lh-body:  1.75;  /* 中文正文：行高要松，否则密不透风 */

  /* ── 字体：两套栈 ────────────────────────────────────────────────
     ★ 全是系统字体，页面不引任何在线字体源——Google Fonts 在国内不可达，
       而完整的中文衬线动辄数 MB，不能整份自托管。
       已知缺口：安卓多数机型不带中文衬线，会落到通用 serif（实际多半还是黑体）。
       要安卓也稳出宋体，得自托管一份按字表子集化的 Noto Serif SC（OFL 可商用）。 */
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── 间距：4 的倍数 ──────────────────────────────────────────────
     原站的 padding 是拍脑袋写的，同一类元素能差出 10px。 */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-7:  32px;  --s-8:  40px;
  --s-9:  56px;  --s-10: 72px;

  /* ── 正文栏宽 ────────────────────────────────────────────────────
     ★ 全站只此一个值 ★
     原先各页自己写：agent/chat/report 写 760、share-xhs 写 680、
     还有几页写 720，daily/me 干脆不限宽——翻页时正文栏左右乱跳。
     720 是 .doc（服务条款/免责声明）和 212 个内容页在用的值，定为基准。
     index.html 是排盘应用外壳（表单 + 盘面并排），走 .wrap 的 1180，不用这个。 */
  --content-w: 720px;

  /* ── 圆角：三级，同心 ────────────────────────────────────────────
     原站散落 33 种 border-radius。同心规则：外圆角 = 内圆角 + 内边距。
     真需要别的值时，从这三档派生，别再新增字面量。
     取值比常规大一号——大圆角是"亲切、活泼"的一半来源。 */
  --r-1: 8px;    /* 小控件 / 标签 */
  --r-2: 14px;   /* 输入框 / 按钮 */
  --r-3: 22px;   /* 卡片 / 面板 */
  --r-pill: 999px;

  /* ── 动效 ────────────────────────────────────────────────────────
     只动 transform / opacity 这类合成层属性，不动 width/height/top/left。
     禁止 transition: all——它会把不相关的属性一起带上，且不可预测。

     ★ 弹簧回弹是刻意保留的 ★
       impeccable 的检测器把回弹缓动判为"过时且廉价"（bounce-easing 规则）。
       那条规则**不适用**：老板要的就是抖音那种有物理反馈的弹跳，
       这正是回弹缓动的用武之地。检测器报它时手动豁免，不要去改。
       （2026-09-18 同一条规则害我在德语项目删掉全站弹簧，被评价"太丑了"。） */
  --dur-tap:   .22s;   /* 按下反馈（比原来长，弹得出来） */
  --dur-state: .24s;   /* hover / focus */
  --dur-view:  .42s;   /* 视图切换 */
  --dur-reveal:.55s;   /* 入场 */
  --ease-out:  cubic-bezier(.32,.72,0,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  /* 回弹：末端过冲再回落，就是"弹"的来源 */
  --ease-spring:      cubic-bezier(.34,1.56,.64,1);
  --ease-spring-soft: cubic-bezier(.22,1.28,.36,1);
  --ease-pop:         cubic-bezier(.2,1.9,.3,1);
  /* 真·弹簧：多点采样，比三次贝塞尔更像物理弹簧。支持度足够，
     不支持的浏览器会自动回落到上一行的 cubic-bezier。 */
  --ease-spring-real: linear(
    0, .006, .024, .052, .089, .133, .182, .235, .29, .345,
    .398, .449, .496, .538, .575, .607, .634, .657, .676, .691,
    .703, .712, .719, .724, .727, .729, .73, .73, .73, .729,
    .728, .727, .726, .725, .724, .723, 1, 1
  );
  --press:     scale(.94);   /* 按下缩得比原来深，回弹才有对比 */

  /* ── 层级：一套刻度，取代原站的 9999 / 10000 ─────────────────────
     原站 z-index 用了 17 个值，含 9000/9001/9999/10000，且 #user-menu-mask
     与底部标签栏同为 9000，谁在上面取决于文档顺序。这里定死刻度。 */
  --z-base:    1;
  --z-sticky:  100;   /* 吸顶栏 */
  --z-dropdown:200;
  --z-scrim:   900;   /* 遮罩 */
  --z-sheet:   910;   /* 底部面板 / 抽屉 */
  --z-modal:   920;   /* 弹窗 */
  --z-toast:   930;   /* 提示 */
  --z-tabbar:  880;   /* 底部标签栏：低于遮罩，弹窗能盖住它 */

  /* ── 触控 ────────────────────────────────────────────────────────
     手机为主，热区不小于 44×44（苹果 HIG）；桌面密集区不低于 40。 */
  --hit: 44px;

  /* ── 底栏高度（含安全区，实际用时再拼 env()）──────────────────── */
  --tabbar-h: 60px;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════
   可选深色：原「近黑 + 金」那一套
   ─────────────────────────────────────────────────────────────────────
   只换值、不换名，所以所有 var() 引用自动跟随。
   旧用户 localStorage 里存过 'dark' 的仍然进深色，存过 'light' 的落到默认。
   ═══════════════════════════════════════════════════════════════════════ */
html.dark {
  color-scheme: dark;

  --paper:      #0d0b13;
  --paper-2:    #131118;
  --surface:    #131118;
  --surface-2:  #1a1722;
  --surface-hi: #1c1926;

  --ink:        #F2EFE8;
  --ink-mid:    rgba(242,239,232,.62);
  --ink-faint:  rgba(242,239,232,.46);
  --ink-invert: #1F1B16;

  --cinnabar:      #E2C07B;   /* 深色下强调色回到金 */
  --cinnabar-deep: #F5DFA3;
  --cinnabar-soft: rgba(226,192,123,.12);
  --cinnabar-line: rgba(226,192,123,.28);

  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.18);
  --line-3: rgba(255,255,255,.32);

  --wx-wood:  #5A9E8F;
  --wx-fire:  #C4554D;
  --wx-earth: #C9A96E;
  --wx-metal: #B9B4A8;
  --wx-water: #6B8DBF;

  --ok:   #5A9E8F;
  --warn: #C9A96E;
  --err:  #C4554D;
}