/* ===========================================================
   设计令牌 · 东方雅致
   -----------------------------------------------------------
   全站唯一的样式数据源。任何颜色、字号、间距、圆角、阴影，
   都必须从这里取用，不得在组件里写死。

   配色对比度均已按 WCAG 2.1 实测（纸底 --paper #f4f2ec / 卡片底 --card #fbfaf6）：
   正文与次要文字全部达到 AA（≥4.5:1）；金色作为「点睛」色
   仅用于非正文（区块标题、装饰线、徽章），这是它的对比度
   所决定的硬性用法，不是审美偏好。

   2026-09-25 更正：本段原先写的是「#faf8f3 / #fff」，与文件里实际定义的
   --paper / --card 不符（已过期），现按真实令牌值改正。五行色中 --wx-jin
   (#EF9205) 是刻意保留的低对比色，是本站唯一例外，理由见该处注释。
   =========================================================== */

:root {
  /* ---------- 纸底分层 ---------- */
  --paper:        #f4f2ec;
  --paper-2:      #ebe8df;
  --paper-3:      #dfdbd0;
  --card:         #fbfaf6;
  --card-soft:    #f7f5ef;

  /* ---------- 墨色层级 ---------- */
  --ink:          #122c2b;
  --ink-2:        #465b58;
  --ink-3:        #687773;
  --ink-invert:   #f7f5ef;  /* 深底上的文字 */

  /* ---------- 主色 · 墨绿（骨架） ---------- */
  --jade:         #123d3a;
  --jade-hover:   #0c312f;
  --jade-active:  #082522;
  --jade-soft:    #e5ece9;
  --jade-line:    #b7c8c3;

  /* ---------- 点缀 · 金（仅非正文） ---------- */
  /* 纸底 3.92:1、卡片底 4.20:1 —— **未达 AA 的 4.5**（旧注释写 4.72:1 是按
     已作废的 #faf8f3 纸底算的）。故只能用于标题/装饰/徽章等非正文处，
     正文一律用 --ink-2。这条限制由对比度决定，不是审美偏好。 */
  --gold:         #9a7132;
  --gold-hover:   #805a22;
  --gold-soft:    #f1e8d7;
  --gold-line:    #d1bb91;

  /* ---------- 语义色 ---------- */
  --red:          #9c2b22;  /* 警示 / 凶 */
  --red-soft:     #f8ecea;
  --green:        #256b3a;  /* 成功 / 吉 */
  --green-soft:   #eaf2ec;

  /* ---------- 线条与分隔 ---------- */
  --line:         rgba(28, 58, 46, .16);
  --line-strong:  rgba(28, 58, 46, .28);
  --line-soft:    rgba(28, 58, 46, .08);

  /* ---------- 五行色 ----------
     2026-09-25 站长要求「金用 #EF9205，其余五行饱和度再提高两个度」。
     木火土水在各自原色相上提 +20（HSL 饱和度），视觉上确实更鲜艳了。

     ⚠ 金 #EF9205 对比度只有 2.14:1，**低于 AA 的 4.5**，是全站唯一不达标的文字色。
     站长知悉并明确选择照用原值，故此处不再调整——但正因为如此：
       · 它只应用于「金」这一种五行标签，不得扩散到正文、说明文字或大段文本；
       · 不要把它当作可读性色使用（金色文字必须另配深色底或加粗描边才可读）；
       · 暗色主题下它是 9.00:1，非常清楚，问题只在亮色纸底。
     木 4.91 / 火 6.28 / 土 4.76 / 水 6.20，四色仍达 AA。
     以上数字均按**实际纸底 #f4f2ec** 实测（旧注释按 #faf8f3 算，已全部过期）。 */
  --wx-mu:        #177934;  /* 木 4.91:1 */
  --wx-huo:       #af1b0f;  /* 火 6.28:1 */
  --wx-tu:        #8f6222;  /* 土 4.76:1 */
  --wx-jin:       #EF9205;  /* 金 2.14:1 ★ 站长指定，低于 AA，见上 */
  --wx-shui:      #1656b4;  /* 水 6.20:1 */

  /* 五行淡底：用于背景块，与上列文字色配对（配对后 2.12–6.04:1，金同样偏低） */
  --wx-mu-soft:   #e7f4eb;
  --wx-huo-soft:  #fbeae7;
  --wx-tu-soft:   #f6efe1;
  --wx-jin-soft:  #fdf0d8;
  --wx-shui-soft: #e8effa;

  /* ---------- 干支关系线色（线条非文本，可用较亮色） ---------- */
  --rel-he:       #8a6a34;  /* 合 */
  --rel-chong:    #9c2b22;  /* 冲 */
  --rel-xing:     #8a5a2a;  /* 刑 */
  --rel-hai:      #6b7280;  /* 害破绝 */
  --rel-other:    #4a7263;  /* 其他 */

  /* ---------- 神煞性质色 ---------- */
  --ss-ji:        #256b3a;  /* 吉 */
  --ss-xiong:     #9c2b22;  /* 凶 */
  --ss-zhong:     #8a6a34;  /* 中性 */
  --ss-te:        #6b4a7a;  /* 特殊 */

  /* ---------- 字体 ---------- */
  /* 标题衬线：宋体承担「古典」气质 */
  --serif:  "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  /* 正文无衬线：长文阅读更舒适，与标题形成分工 */
  --sans:   "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  /* 数字等宽：排盘表格对齐 */
  --mono:   "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- 字号阶梯 ---------- */
  --fs-xs:    12px;  /* 角标、极简说明 */
  --fs-sm:    13px;  /* 辅助说明、表格小字 */
  --fs-base:  15px;  /* 正文 */
  --fs-md:    16px;  /* 正文偏大、表单 */
  --fs-lg:    18px;  /* 卡片标题 */
  --fs-xl:    22px;  /* 区块标题 */
  --fs-2xl:   26px;  /* 小节大标题 */
  --fs-3xl:   34px;  /* 页面副标题 */
  --fs-hero:  clamp(32px, 5.5vw, 54px);  /* 页面主标题 */

  /* 排盘专用大字号 */
  --fs-ganzhi:  32px;  /* 干支大字（四柱总览卡） */
  --fs-ganzhi-table: 28px; /* 专业表内干支：9 行表高的主因，独立收紧不牵动总览卡 */
  --fs-ganzhi-sm: 26px; /* 窄屏表格内干支 */

  /* ---------- 字重 ---------- */
  /* 关键：标题用 600 建立重量对比，改变旧版「一律 400」的扁平感 */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* ---------- 行高 ---------- */
  --lh-tight:   1.3;   /* 标题 */
  --lh-normal:  1.6;   /* 控件、卡片 */
  --lh-relaxed: 1.85;  /* 长正文 */

  /* ---------- 字距 ---------- */
  --ls-tight:   0;
  --ls-normal:  .02em;
  --ls-wide:    .12em;   /* 小标题 */
  --ls-wider:   .28em;   /* 主标题 */

  /* ---------- 间距（4px 基数） ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ---------- 圆角（收敛为 3 档 + 胶囊） ---------- */
  --r-sm:   6px;    /* 输入框、小标签 */
  --r-md:   12px;   /* 卡片、按钮 */
  --r-lg:   20px;   /* 大区块 */
  --r-pill: 999px;  /* 仅用于 chip / 徽章 */

  /* ---------- 阴影（2 级，极轻） ---------- */
  --sh-1: 0 1px 1px rgba(10, 35, 32, .04), 0 10px 30px rgba(10, 35, 32, .05);
  --sh-2: 0 18px 50px rgba(10, 35, 32, .11);

  /* ---------- 过渡 ---------- */
  /* 交互统一采用“快启动、柔和停下”的曲线。按钮不会拖尾，卡片位移也不会
     像弹簧一样来回晃；这是全站操作手感的唯一时间基准。 */
  --ease:       cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.16, 1, .3, 1);
  --ease-out:   cubic-bezier(.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur:        220ms;
  --dur-slow:   420ms;
  --move-sm:    4px;
  --move-md:    8px;
  --move-lg:    16px;
  /* 按压只做轻微收紧。此前 .94 + 过冲回弹会让手机页面像在晃动；
     .98 仍有明确触感，但不会改变卡片在视觉上的尺寸与排版节奏。 */
  --press-scale: .98;
  --hover-scale: 1.02;

  /* ---------- iOS 风格的空间连续性转场 ----------
     上面那套是「克制动效」：整块淡入 / 位移，用于页面与列表的进出。
     这里另起一套用于「从手指按下的位置长出来」的转场 —— 两者不是替换关系，
     页内页签、弹层、抽屉走这套，滚动浮现与列表入场仍走上面那套。
     缓动曲线取值来自 iOS 的弹簧手感（快出缓收），与 --ease 的对称曲线不同；
     实测 320ms 是「明确感知到展开」与「不觉得在等」的折中。 */
  --ease-ios:   cubic-bezier(.32, .72, 0, 1);
  --dur-ios:    320ms;

  /* ---------- 层级 ---------- */
  --z-base:    1;
  --z-sticky:  30;
  --z-header:  50;
  --z-drawer:  80;
  --z-toast:  100;

  /* ---------- 布局 ---------- */
  --shell:     1180px;
  --shell-pad: 18px;
  --header-h:  72px;
}

/* 深色主题（后台）：仅覆盖令牌值，组件规则完全复用 */
[data-theme="dark"] {
  --paper:      #0f1316;
  --paper-2:    #161c20;
  --paper-3:    #1e262b;
  --card:       #141a1e;
  --card-soft:  #1a2126;

  --ink:        #eae4d6;
  --ink-2:      #a89c84;
  --ink-3:      #8d8271;
  --ink-invert: #141a1e;

  --jade:       #c9a86a;   /* 深色下以金为主色，对比更佳 */
  --jade-hover: #d8bb82;
  --jade-active: #b3924f;
  --jade-soft:  rgba(201, 168, 106, .12);
  --jade-line:  rgba(201, 168, 106, .28);

  --gold:       #c9a86a;
  --gold-hover: #d8bb82;
  --gold-soft:  rgba(201, 168, 106, .1);
  --gold-line:  rgba(201, 168, 106, .3);

  --red:        #d47066;
  --red-soft:   rgba(212, 112, 102, .12);
  --green:      #7bb884;
  --green-soft: rgba(123, 184, 132, .12);

  --line:        rgba(201, 168, 106, .2);
  --line-strong: rgba(201, 168, 106, .34);
  --line-soft:   rgba(201, 168, 106, .1);

  /* 五行色：亮色版在深底上会「闷」（木 #177934 仅 3.5:1），故同色相提亮。
     深底 #0f1316 上的对比度：木 8.20 / 火 6.47 / 土 8.14 / 金 9.00 / 水 6.93，全部远超 AA。
     注意金在亮色下只有 2.14:1、在这里有 9.00:1 —— 两套值不可互换。 */
  --wx-mu:        #5fbf7c;
  --wx-huo:       #e8776a;
  --wx-tu:        #d0a45e;
  --wx-jin:       #f0a52a;
  --wx-shui:      #6f9fe8;

  /* 五行淡底：深色下改为低透明度叠加，不用亮色的浅色块 */
  --wx-mu-soft:   rgba(95, 191, 124, .12);
  --wx-huo-soft:  rgba(232, 119, 106, .12);
  --wx-tu-soft:   rgba(208, 164, 94, .12);
  --wx-jin-soft:  rgba(240, 165, 42, .12);
  --wx-shui-soft: rgba(111, 159, 232, .12);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 4px 16px rgba(0, 0, 0, .4);
}