/* ============================================================
   心航之网 · 设计 Token —— 本文件由 tokens.json 生成，请勿手改。
   改 token 请改 tokens.json，然后重跑 generate.py。
   版本 1.0.0 · 2026-09-12
   规范来源：心航之网-三端视觉token与设计规范.md
   ============================================================ */
:root {
  /* ---------- 色阶（给设计用）---------- */
  --xh-brand-50: #F8FCF6;                                  /* 最浅（≈页面底，面板请用 --xh-panel，否则与地面分不开） */
  --xh-brand-100: #E2EFDE;                                 /* 淡底 / 选中态底 */
  --xh-brand-200: #C2DCBA;                                 /* 分隔装饰 */
  --xh-brand-300: #9BC491;                                 /* 浅强调 */
  --xh-brand-400: #74AB69;                                 /* 悬停态 */
  --xh-brand-500: #419038;                                 /* 主色（品牌绿） */
  --xh-brand-600: #327C2A;                                 /* 实底按钮（白字达标） */
  --xh-brand-700: #286522;                                 /* 按下态 */
  --xh-brand-800: #1F4E1A;                                 /* 深色语境 */
  --xh-brand-900: #163612;                                 /* 最深 */

  /* ---------- 语义色（代码只准用这一层）---------- */
  --xh-bg: #F1FAF0;                                        /* 页面底色（雾绿） */
  --xh-surface: #FFFFFF;                                   /* 卡片/纯面 */
  --xh-panel: #E9EFE9;                                     /* 淡底面板（灰绿） */
  --xh-ink-1: #263424;                                     /* 12.3:1 对底色 · 正文 */
  --xh-ink-2: #4D634A;                                     /* 6.2:1 对底色 · 次级正文 */
  --xh-ink-3: #63815F;                                     /* 4.1:1 对底色 ⚠️ · 仅 ≥16px 或非关键信息（时间戳、占位符、备案号） */
  --xh-primary: #419038;                                   /* 3.7:1 对底色 ⚠️ · 仅大字 / 图标 / 边框 / 图形。不可做正文色。 */
  --xh-primary-deep: #327C2A;                              /* 5.5:1 对白底 · 实底按钮、需要可读性的强调文字 */
  --xh-danger: #B23A2E;                                    /* 5.6:1 对底色 · 危机提示、删除 */
  --xh-calm: #487D6C;                                      /* 平静 / 成功（青绿）· 仅填充 */
  --xh-warn: #A86F1F;                                      /* 4.0:1 对底色 ⚠️ · 提醒（原 #ffd166 的替代） */
  --xh-data-1: #B23A2E;                                    /* 5.6:1 对底色 · 性格 P · 心情「愤怒」· 危机 */
  --xh-data-2: #3F6480;                                    /* 5.9:1 对底色 · 性格 E · 心情「难过」· 信息 */
  --xh-data-3: #45726B;                                    /* 5.1:1 对底色 · 性格 N · 心情「平静」· 成功 */
  --xh-data-4: #96631A;                                    /* 4.8:1 对底色 · 性格 L · 提醒 */
  --xh-data-5: #6B4A7A;                                    /* 6.8:1 对底色 · 心情「焦虑」 */
  --xh-calm-deep: #356657;                                 /* 6.2:1 对底色 · 白字压其上的选中态底、悬停态（白字 6.6:1） */
  --xh-calm-soft: #7CAC9B;                                 /* 2.4:1 对底色 ⚠️ · 仅图形：进度条渐变尾、浅描边。不可压正文。 */
  --xh-scrim: rgba(38,52,36,.5);                           /* 弹层遮罩 */
  --xh-scrim-strong: rgba(38,52,36,.9);                    /* 弹层遮罩·深 */
  --xh-pastel-1: #DBE3C3;                                  /* 马卡龙·嫩芽绿（卡上 ink-1 9.9:1） */
  --xh-pastel-2: #BCE9DC;                                  /* 马卡龙·青瓷（卡上 ink-1 9.9:1） */
  --xh-pastel-3: #BBE6F9;                                  /* 马卡龙·雾蓝（卡上 ink-1 9.9:1） */
  --xh-pastel-4: #DFDCFD;                                  /* 马卡龙·藕荷（卡上 ink-1 9.9:1） */
  --xh-pastel-5: #FFD5E3;                                  /* 马卡龙·藕粉（卡上 ink-1 9.9:1） */
  --xh-pastel-6: #FDD8C6;                                  /* 马卡龙·杏黄（卡上 ink-1 9.9:1） */

  /* ---------- 边框（带主色相位，不是灰的）---------- */
  --xh-line-1: rgba(65,144,56,.14);   /* 主边框（窄，彩色相位） */
  --xh-line-2: rgba(38,52,36,.08);   /* 弱分隔线 */

  /* ---------- 阴影（暖褐，不是黑）---------- */
  --xh-elev-1: 0 1px 2px rgba(45,79,39,.06);  /* 贴合：列表项、chip */
  --xh-elev-2: 0 6px 20px rgba(45,79,39,.09); /* 浮起：卡片 */
  --xh-elev-3: 0 16px 48px rgba(45,79,39,.14); /* 模态：对话框、弹层 */

  /* ---------- 毛玻璃（两级，不得叠用）---------- */
  --xh-glass-fill: linear-gradient(152deg, rgba(255,255,255,.62) 0%, rgba(252,254,251,.24) 16%, rgba(255,255,255,.48) 36%, rgba(242,247,240,.20) 56%, rgba(255,255,255,.42) 76%, rgba(235,243,233,.26) 100%); /* 填充：压低白度，让底的暖色透上来 */
  --xh-glass-thin-backdrop: blur(12px) saturate(180%);     /* 小控件：chip、悬浮按钮、分段控件 */
  --xh-glass-thick-backdrop: blur(22px) saturate(190%);    /* 大面板：顶栏、对话框、弹层 */

  /* ---------- 圆角（三级，编码层级）---------- */
  --xh-radius-sm: 10px;                                    /* chip、标签、小按钮 */
  --xh-radius-md: 16px;                                    /* 卡片、输入框 */
  --xh-radius-lg: 22px;                                    /* 对话框、模态、底部抽屉 */
  --xh-radius-full: 999px;                                 /* 头像位、指示点 */

  /* ---------- 字体 ---------- */
  --xh-font-ui:   -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --xh-font-hand: "QingsongHandwriting9", var(--xh-font-ui);
  /* 手写体单字重 —— 任何 bold 都会触发合成伪粗。层次只能靠字号/字距/颜色。 */

  /* ---------- 字号阶梯（tracking 随字号变化，leading 反比）---------- */
  --xh-type-display-size: 34px;
  --xh-type-display-lh: 1.25;
  --xh-type-display-ls: -0.01em;                           /* 首页问候语 */
  --xh-type-display-weight: 400;
  --xh-type-quote-size: 22px;
  --xh-type-quote-lh: 1.5;
  --xh-type-quote-ls: 0;                                   /* 名言正文 */
  --xh-type-quote-weight: 400;
  --xh-type-title-size: 22px;
  --xh-type-title-lh: 1.35;
  --xh-type-title-ls: -0.005em;                            /* 栏目标题 */
  --xh-type-title-weight: 700;
  --xh-type-body-size: 16px;
  --xh-type-body-lh: 1.75;
  --xh-type-body-ls: 0;                                    /* 正文 */
  --xh-type-body-weight: 400;
  --xh-type-label-size: 14px;
  --xh-type-label-lh: 1.5;
  --xh-type-label-ls: 0.01em;                              /* 控件标签 */
  --xh-type-label-weight: 500;
  --xh-type-caption-size: 12px;
  --xh-type-caption-lh: 1.5;
  --xh-type-caption-ls: 0.02em;                            /* 时间、备案号、辅助 */
  --xh-type-caption-weight: 400;

  --xh-type-display-font: var(--xh-font-hand);
  --xh-type-quote-font: var(--xh-font-hand);
  --xh-type-title-font: var(--xh-font-ui);
  --xh-type-body-font: var(--xh-font-ui);
  --xh-type-label-font: var(--xh-font-ui);
  --xh-type-caption-font: var(--xh-font-ui);

  /* ---------- 动效 ---------- */
  /* CSS 无弹簧，这两个是给 JS 弹簧库读的原始参数（Apple 口径） */
  --xh-spring-standard-damping: 1.0;
  --xh-spring-standard-response: 0.35;                     /* 默认。无过冲，优雅落定 */
  --xh-spring-momentum-damping: 0.8;
  --xh-spring-momentum-response: 0.35;                     /* 仅在甩动/拖拽释放后使用 */
  --xh-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* CSS 近似，可中断性不如真弹簧 */
  --xh-dur-fast: 160ms;                                    /* 微反馈 */
  --xh-dur-base: 260ms;                                    /* 常规过渡 */
  --xh-dur-slow: 420ms;                                    /* 大面板进出 */
  --xh-stagger:   45ms;   /* 对话框逐字浮现 */
  --xh-breathe-period: 8s;   /* 0.125Hz，避开 0.2Hz 前庭敏感频段 */
  --xh-quote-period: 5s;   /* 名言轮播周期（内容节奏，非动效时长）*/
  --xh-projection-deceleration: 0.998;   /* 惯性投影：不是就近吸附，而是按速度投影落点再取最近目标。 */

  /* ---------- 兼容层：接管站点现有变量（§9.3）---------- */
  /* 现有变量保留不删，只把值重指向新 token。
     ⚠️ 加载顺序已实测（2026-09-12，Edge 计算样式）：
        本文件放在页面内联 <style> **之前** → 内联 :root 赢，兼容层失效；
        放在**之后** → 本文件赢。同为 :root、同特异性，后写的胜出。
     批次 2 采用的是**重指向页面自己的 :root 值**（改成 var(--xh-*)），
     两侧指向同一 token，于是与加载顺序无关。 */
  --primary-color: var(--xh-primary);
  --secondary-color: var(--xh-brand-200);
  --accent-color: var(--xh-warn);
  --text-color: var(--xh-ink-1);
  --light-bg: var(--xh-bg);
  --warm-bg: var(--xh-bg);
  --light-text: var(--xh-ink-2);
  --shadow: var(--xh-elev-2);
}

/* ------------------------------------------------------------
   毛玻璃材质 .xh-glass —— 彩色描边高光 + 跟随光向的光斑

   ① 填充压低白度 + saturate 拉高，这两件必须一起做：
      只降白度 → 变成「半透明白」；只拉饱和 → 变成一片发白的雾。
   ② 描边用 mask 复合做 1px 渐变环，不是 border ——
      border 无法沿圆角做渐变，也做不出方向性的衰减。
   ③ 光向 --xh-sheen-a 与光斑位置 --xh-sheen-x/y 每帧都变，
      所以是局部变量不是 token。插值交给 CSS 自己跑（见下面 @property）——
      未注册的自定义属性只是字符串，transition 对它静默无效。
   ------------------------------------------------------------ */
@property --xh-sheen-a { syntax: '<angle>';      inherits: false; initial-value: 145deg; }
@property --xh-sheen-x { syntax: '<percentage>'; inherits: false; initial-value: 26%; }
@property --xh-sheen-y { syntax: '<percentage>'; inherits: false; initial-value: 12%; }

.xh-glass {
  --xh-sheen-a: 145deg;   /* 默认左上打光 —— 全世界的通用约定，别改成 0。 */
  --xh-sheen-x: 26%;
  --xh-sheen-y: 12%;
  position: relative;
  background: var(--xh-glass-fill);
  -webkit-backdrop-filter: var(--xh-glass-thick-backdrop);
  backdrop-filter: var(--xh-glass-thick-backdrop);
  /* 四层：接触影 / 贴合影 / 中景 / 远景。单层阴影永远像贴纸。 */
  box-shadow: 0 0 4px rgba(45,79,39,.18), 0 1px 1px rgba(45,79,39,.05), 0 4px 12px rgba(45,79,39,.08), 0 20px 48px rgba(45,79,39,.18);
  /* 过渡柔和：光向与光斑都在这里插值，指针再抖，看到的都是缓动后的结果 */
  transition: --xh-sheen-a 620ms cubic-bezier(.32,.72,0,1), --xh-sheen-x 620ms cubic-bezier(.32,.72,0,1), --xh-sheen-y 620ms cubic-bezier(.32,.72,0,1);
}
/* 彩色描边高光：mask 复合出的 1px 环。亮端暖白 → 中段主色 → 暗端近透明 */
.xh-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--xh-sheen-a), rgba(151,191,140,.50) 0%, rgba(137,180,127,.44) 16%, rgba(118,166,108,.36) 36%, rgba(94,146,84,.31) 56%, rgba(73,127,64,.28) 76%, rgba(48,83,42,.30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
/* 跟随光向的光斑。alpha 上限 .40 —— 它压在正文上，不许压掉可读性 */
.xh-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: radial-gradient(190% 150% at var(--xh-sheen-x) var(--xh-sheen-y), rgba(255,255,255,.46) 0%, rgba(255,255,255,.34) 14%, rgba(255,255,255,.20) 32%, rgba(255,255,255,.09) 54%, rgba(255,255,255,.025) 74%, rgba(255,255,255,0) 94%), radial-gradient(140% 110% at var(--xh-sheen-x) var(--xh-sheen-y), rgba(65,144,56,.10) 0%, rgba(65,144,56,.058) 30%, rgba(65,144,56,.018) 58%, rgba(65,144,56,0) 88%);
}
/* 内容抬到两层伪元素之上。⚠️ 只加 position:relative，不带偏移，
   所以不改变布局位置；但页面里若已有 position:absolute 的子元素，
   同特异性下后写的胜出 —— 这类子元素需要单独确认。 */
.xh-glass > * { position: relative; z-index: 3; }

/* 模糊档位。默认 thick（大面板：顶栏、页签、对话框）。
   列表里重复出现的小卡片用 --thin —— 这不是审美选择，是合成开销：
   一屏 20 张卡 × blur(22px) 的 backdrop-filter 在低端机上会掉帧。 */
.xh-glass--thin {
  -webkit-backdrop-filter: var(--xh-glass-thin-backdrop);
  backdrop-filter: var(--xh-glass-thin-backdrop);
}

/* 手写体作用域：只有「Doro 在说话」和「哲人在说话」用它。
   font-synthesis:none 是必须的 —— 清松手写体 9 只有一款字重，
   任何 bold 都会触发浏览器合成伪粗，笔画糊成一团。 */
.xh-hand {
  font-family: var(--xh-font-hand);
  font-weight: 400;
  font-synthesis: none;
}

/* 线性图标 —— 设计文档 §八：1.5px 描边，Lucide 风格。
   图标是内联 <svg>，不是字体也不是 sprite：零额外请求。

   ⚠️ 这里刻意**不写 color**。
      .tool-icon / .audio-icon / .knowledge-icon 三个槽位已声明
      color: var(--primary-color)，而 .xh-icon 是作用在 <svg> 自身的
      类选择器 —— 一旦声明 color，就会盖掉父级继承来的 primary，
      三个槽位的图标全部失色。不写则 currentColor 自动继承：
      卡片槽位拿到 primary，正文内联图标跟随所在文本色。
      后来者不要「顺手补一条 color」。 */
.xh-icon {
  display: inline-block;
  width: 1em; height: 1em;   /* 跟随槽位的 font-size */
  vertical-align: -0.125em;   /* 与文字行光学居中 */
  flex: none;   /* 在 flex 容器里不被压扁 */
  fill: none;
  stroke: currentColor;   /* 颜色全靠继承，见上面的说明 */
  stroke-width: 1.5;   /* CSS 覆盖 SVG 上的 stroke-width="2" 属性 */
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 已激活态：点赞这类「实心才表示选中」的图标。Lucide 的 heart 是描边图，
   填充靠这一条补。描边留着 —— 去掉描边会让实心块比同排的描边图标更重。 */
.xh-icon--on { fill: currentColor; }

/* ---------- 减少动效：三个独立信号，都要响应 ---------- */
/* 减少动效 ≠ 没有反馈。是换成非前庭刺激的等价物，不是取消。 */
@media (prefers-reduced-motion: reduce) {
  /* 位移 / 弹簧 / 视差 → 短交叉淡入；保留透明度与颜色变化（它们帮助理解） */
  :root { --xh-dur-fast: 100ms; --xh-dur-base: 140ms; --xh-dur-slow: 200ms; --xh-stagger: 0ms; }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    /* 玻璃改实底。填充现在是渐变，这里直接换成不透明纯白 ——
       自定义属性可以是任意值，不必和原值同类型。 */
    --xh-glass-fill: rgba(255,255,255,.96);
    --xh-glass-thin-backdrop:  none;
    --xh-glass-thick-backdrop: none;
  }
}
@media (prefers-contrast: more) {
  :root {
    --xh-line-1: rgba(58,46,40,.55);
    --xh-line-2: rgba(58,46,40,.35);
  }
}