/* ============================================================
   设计令牌 · L2 语义层(Design Tokens · Semantic Layer)
   ------------------------------------------------------------
   三层令牌架构里的中间层。上下游关系:

     L1 原始值层   css/themes/<主题>.css   写具体色值,变量带 --t- 前缀
          ↓ 映射(本文件)
     L2 语义层     本文件                   只做语义命名,值全部来自 L1
          ↓ 消费
     L3 组件层     base/layout/components/chat.css   零主题信息、零 hex

   规则(写新样式时必须遵守):
   1. 组件 CSS 只能引用本文件里的语义名,禁止直接引用 --t-* ,
      也禁止出现任何 hex / rgb / rgba 字面量;
   2. 每个映射都带 fallback,L1 缺失或主题名写错时退回暖光阅读的值,
      不会出现「变量为空导致样式静默失效」;
   3. 日夜切换由 L1 的 [data-theme='light'|'dark'] 负责,本文件不区分模式;
   4. 换主题只改 <html data-theme-name>,本文件与组件层一行都不用动。

   两个维度:
     <html data-theme-name="claude" data-theme="light">
                        ↑ 主题                ↑ 模式
   ============================================================ */

/* ============================================================
   断点口径(唯一权威定义,禁止出现第五个断点)

     480px   小手机 / 普通手机分界
     768px   手机 / 平板分界
    1024px   平板 / 桌面分界。底部 Tab 栏在此以下出现,侧栏在此以上常驻
    1280px   宽屏。内容区最大宽度加大

   CSS 变量不能用在媒体查询里,所以实际写死数值。
   max-width 一律用 479 / 767 / 1023,与 min-width 的 480 / 768 / 1024 错开 1px
   —— 若两边都写 768,屏宽正好 768 时两条规则同时命中,行为不确定。

   归并前散落 6 个值(560 / 640 / 720 / 768 / 1024 / 1440),
   第二期批次 4 统一。改动断点必须同步 test/mobileShell.test.js 的断言。
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---------- 字体 ---------- */
  --font-display: var(--t-font-display, 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', Georgia, 'Times New Roman', serif);
  --font-body: var(--t-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
  --font-mono: var(--t-font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);

  /* ---------- 字号阶梯 ---------- */
  --fs-display: var(--t-fs-display, 32px);
  --fs-h1: var(--t-fs-h1, 26px);
  --fs-h2: var(--t-fs-h2, 21px);
  --fs-h3: var(--t-fs-h3, 18px);
  --fs-body: var(--t-fs-body, 15px);
  --fs-sm: var(--t-fs-sm, 14px);
  --fs-xs: var(--t-fs-xs, 13px);
  --fs-xxs: var(--t-fs-xxs, 12px);
  /* 界面标题。顶栏标题、卡片标题、对话标题、面板标题、弹窗标题这类
     「界面标签」用它,与文章标题(--fs-h1/h2/h3)分开。

     它们不是内容层级,而是界面元素的名字,比正文略小 + 字重区分就够。
     用户 2026-09-05 反馈原来太大(顶栏标题 24px 会导致标题竖排显示不全)。

     单独立一个语义位而不是直接写 --fs-sm:将来若要单独调界面标题,
     改这一处即可,不必再翻遍组件层。 */
  --fs-ui-title: var(--fs-sm);

  /* ---------- 字重 ---------- */
  /* 组件层目前还有直写 500/600 的地方,迁移到这三个位是后续期数的事;
     先把语义位建好,主题已经可以声明自己的字重口径。 */
  --fw-body: var(--t-fw-body, 400);
  --fw-mid: var(--t-fw-mid, 500);
  --fw-strong: var(--t-fw-strong, 600);

  /* ---------- 字距 ---------- */
  --track-display: var(--t-track-display, 0);
  --track-title: var(--t-track-title, 0);
  --track-body: var(--t-track-body, 0);

  /* ---------- 行高 ---------- */
  --lh-tight: var(--t-lh-tight, 1.2);
  --lh-snug: var(--t-lh-snug, 1.4);
  --lh-body: var(--t-lh-body, 1.6);
  --lh-loose: var(--t-lh-loose, 1.75);

  /* ---------- 间距(8 点栅格) ---------- */
  /* 间距属于布局而非主题:主题不允许改布局密度,所以不进 L1。 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---------- 圆角 ---------- */
  --radius-xs: var(--t-r-xs, 4px);
  --radius-sm: var(--t-r-sm, 6px);
  /* --radius-md 改造前被 .gc-warn 引用却没有定义,圆角静默为 0。这里补上。 */
  --radius-md: var(--t-r-md, 10px);
  --radius: var(--t-r, 8px);
  --radius-lg: var(--t-r-lg, 12px);
  --radius-xl: var(--t-r-xl, 16px);
  --radius-pill: var(--t-r-pill, 9999px);

  /* ---------- 动效 ---------- */
  --dur-fast: var(--t-dur-fast, 120ms);
  --dur: var(--t-dur, 180ms);
  --dur-slow: var(--t-dur-slow, 280ms);
  --ease: var(--t-ease, cubic-bezier(.4, 0, .2, 1));
  --ease-out: var(--t-ease-out, cubic-bezier(.16, 1, .3, 1));
  --ease-spring: var(--t-ease-spring, cubic-bezier(.34, 1.4, .64, 1));
  /* 按压缩放比。1 = 不缩放(暖光阅读的口径)。 */
  --press: var(--t-press, 1);

  /* ---------- 布局 ---------- */
  /* 侧栏宽度与字号强相关,允许主题微调;其余三个是硬布局,不进 L1。 */
  /* 一级 Tab 栏宽度。写死在 L2 不进 L1 —— 它是布局尺度,
     主题不允许改布局密度(批次 1 定的分层约定)。 */
  --rail-w: 84px;
  /* 底部 Tab 栏高度。写死在 L2 —— 布局尺度不进 L1,主题只改颜色/字体/圆角/阴影/动效。
     56px 是 iOS/Android 通行值,且大于 48px 的最小触控目标。 */
  --tabbar-h: 56px;
  /* 键盘高度。由 app.js 的 visualViewport 监听写入,无键盘时为 0。
     只在 :root 上被 JS 覆盖,CSS 里当常量用。 */
  --kb-height: 0px;
  /* 二级面板宽度。两层合计 64 + 200 = 264px,
     与改造前单层侧栏的 264px 持平 —— 内容区不会因为分两层而变窄。
     这一项允许主题微调(与字号强相关),所以仍读 L1。 */
  --sidebar-w: var(--t-sidebar-w, 200px);
  --view-max: 1120px;
  --chat-max: 800px;
  /* 顶栏高度。三处共用:一级栏 brand、二级面板 head、主区顶栏 ——
     一起变矮才对齐。60 → 48px(用户 2026-09-05 反馈顶栏太高)。
     48px 仍大于 44px 的最小触控目标。 */
  --topbar-h: 48px;

  /* ---------- 主题可调的组件级尺度 ---------- */
  --btn-weight: var(--t-btn-weight, 500);
  --nav-radius: var(--t-nav-radius, var(--radius));

  /* ---------- 画布与表面 ---------- */
  --canvas: var(--t-canvas, #faf9f5);
  --surface-1: var(--t-surface-1, #ffffff);
  --surface-2: var(--t-surface-2, #f5f0e8);
  --surface-3: var(--t-surface-3, #efe9de);
  --surface-4: var(--t-surface-4, #e8e0d2);
  /* 反色块:代码块、深色卡片 */
  --surface-invert: var(--t-invert, #181715);
  --surface-invert-2: var(--t-invert-2, #1f1e1b);
  --on-invert: var(--t-on-invert, #faf9f5);
  --on-invert-soft: var(--t-on-invert-soft, #a09d96);

  /* ---------- 导航条底色 ---------- */
  /* 0.48.0 移除磨砂(用户 2026-09-06 要求「简洁」)。
     改造前这里是 --glass-surface(rgb 三元组 + alpha 的半透明)
     加 --glass-blur(backdrop-filter),由 L1 的 --t-glass-rgb /
     --t-glass-alpha / --t-glass-blur 三个变量驱动。

     现在只留一个实色语义位:
       - 半透明 + 模糊在低端安卓上是主要掉帧源,去掉后底栏永远不掉帧;
       - 不再需要 @supports not (backdrop-filter) 的兜底块
         (五套 L1 里那三段已一并删除);
       - 底栏与主区底色不同(用 --t-bar-bg 而非 --canvas),
         层级仍然分明 —— 磨砂原本要表达的「浮起」靠这个色差 + 上边框保留。 */
  --glass-surface: rgb(var(--t-glass-rgb, 245 245 247) / var(--t-glass-alpha, .8));
  --glass-blur: var(--t-glass-blur, saturate(180%) blur(20px));
  --bar-surface: var(--glass-surface);

  /* ---------- 边框 ---------- */
  --hairline: var(--t-hairline, #e6dfd8);
  --hairline-soft: var(--t-hairline-soft, #ebe6df);
  --hairline-strong: var(--t-hairline-strong, #d8cfc4);

  /* ---------- 文字 ---------- */
  --ink: var(--t-ink, #141413);
  /* --ink-title 改造前被 .popover-title 引用却没有定义,字色静默继承父级。
     语义上它就是「标题墨色」,与 --ink 同值。 */
  --ink-title: var(--t-ink, #141413);
  --ink-body: var(--t-ink-body, #3d3d3a);
  --ink-muted: var(--t-ink-muted, #6c6a64);
  --ink-subtle: var(--t-ink-subtle, #8e8b82);

  /* ---------- 主色 ---------- */
  --primary: var(--t-primary, #cc785c);
  --primary-hover: var(--t-primary-hover, #d98a70);
  --primary-active: var(--t-primary-active, #a9583e);
  --primary-soft: var(--t-primary-soft, #f6e9e2);
  --on-primary: var(--t-on-primary, #ffffff);
  --focus-ring: var(--t-focus, rgba(204, 120, 92, .32));

  /* ---------- 语义色 ---------- */
  --ok: var(--t-ok, #5db872);
  --ok-soft: var(--t-ok-soft, #e8f5ea);
  --warn: var(--t-warn, #d4a017);
  --warn-soft: var(--t-warn-soft, #fbf2dc);
  --danger: var(--t-danger, #c64545);
  --danger-soft: var(--t-danger-soft, #fbe9e9);
  --info: var(--t-info, #5db8a6);
  --info-soft: var(--t-info-soft, #e6f4f1);

  /* ---------- 遮罩 ---------- */
  --scrim: var(--t-scrim, rgba(20, 20, 19, .38));
  /* 灯箱遮罩比普通弹窗更重:看图时要压掉背景干扰。
     改造前是 components.css 里的 rgba(0,0,0,.72) 硬编码,现在收进令牌。 */
  --scrim-heavy: rgb(0 0 0 / .72);

  /* ---------- 阴影 ---------- */
  /* 0.48.0 删掉了 --shadow-0:五套 L1 里它一律是 none,组件层也从未引用,
     属于设计稿 02 第 1 节点名的「定义未用」冗余。要「无阴影」直接写
     box-shadow: none 更直白,不必绕一个永远等于 none 的变量。 */
  --shadow-1: var(--t-shadow-1, 0 1px 3px rgba(20, 20, 19, .08));
  --shadow-2: var(--t-shadow-2, 0 6px 20px rgba(20, 20, 19, .10));
  --shadow-3: var(--t-shadow-3, 0 16px 44px rgba(20, 20, 19, .16));

  /* ---------- 角色扮演文本渲染 ---------- */
  --rp-speech: var(--t-rp-speech, #a9583e);
  --rp-inner: var(--t-rp-inner, #8e8b82);
  --rp-action: var(--t-rp-action, #6c6a64);
  --rp-system-bg: var(--t-rp-system-bg, #f5f0e8);
  --rp-system-fg: var(--t-rp-system-fg, #6c6a64);
  /* 0.48.0 删掉了 --rp-think-bg:思考块(.reasoning)实际用的是 --surface-2,
     这个位从定义之日起就没有任何引用,同为设计稿点名的冗余项。 */

  /* ---------- 群聊旁白胶囊 ---------- */
  /* 0.48.0 起是实色(移除磨砂的一部分):改造前是半透明白 + blur(2px),
     靠「透出下面的内容」表达浮起。现在直接引用 --surface-2 ——
     它本身就随日夜与主题切换,所以文件末尾不再需要按模式各写一个值。

     浮起感由「与画布不同的底色 + 居中窄胶囊 + 小圆角」表达,
     不再依赖透明度。 */
  --narration-bg: var(--surface-2);

  /* ---------- 输入区快捷气泡的微阴影 ---------- */
  /* 改造前是 chat.css 里 .chip-toggle/.chip-info 的 rgba(0,0,0,.04),
     比 --shadow-1 更轻一档,只为把气泡从输入区背景上抬起一点点。 */
  --shadow-chip: 0 1px 2px rgb(0 0 0 / .04);

  /* ---------- 标签气泡:8 组稳定配色(按标签文本哈希取色) ---------- */
  --tag-1-bg: var(--t-tag1, #f6e9e2); --tag-1-fg: var(--t-tag1f, #a9583e);
  --tag-2-bg: var(--t-tag2, #e6f4f1); --tag-2-fg: var(--t-tag2f, #2f7f70);
  --tag-3-bg: var(--t-tag3, #eae6f6); --tag-3-fg: var(--t-tag3f, #5d4a9c);
  --tag-4-bg: var(--t-tag4, #fbf2dc); --tag-4-fg: var(--t-tag4f, #8a6a12);
  --tag-5-bg: var(--t-tag5, #e8f0f8); --tag-5-fg: var(--t-tag5f, #35618f);
  --tag-6-bg: var(--t-tag6, #f8e8f0); --tag-6-fg: var(--t-tag6f, #94427a);
  --tag-7-bg: var(--t-tag7, #e9f2e6); --tag-7-fg: var(--t-tag7f, #4a7a3c);
  --tag-8-bg: var(--t-tag8, #f0ece6); --tag-8-fg: var(--t-tag8f, #6c6a64);
}

/* ============================================================
   color-scheme 与夜间专属的语义覆盖
   ------------------------------------------------------------
   L1 已经按 [data-theme='dark'] 换掉了全部色值,这里只剩一件
   L1 表达不了的事:color-scheme 要跟着模式走
   (它影响原生滚动条与表单控件的配色,不是自定义属性)。

   0.48.0 之前这里还按模式切换 --narration-bg 的两个半透明白值;
   移除磨砂后它直接引用 --surface-2,随模式自动变,不必在这里重复。
   ============================================================ */
:root,
:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}