/* ============================================================
   tokens.css — 唯一设计事实源 (Single Source of Truth)
   ------------------------------------------------------------
   方向：暖中性浅色画布 · 单一低饱和「石板靛」强调色 · Apple Liquid Glass
   参考：Vercel(Geist) / Linear / Cursor 的「灰阶 + 单色 + 发丝边 + 柔阴影」
   ------------------------------------------------------------
   载入顺序在 app/scenes/acts 之后 → 这里的 :root 覆盖旧定义，旧变量名
   全部重映射到新调色板（--blue / --ch / --green… 自动换色，无需逐处改）。
   组件请只引用本文件的 token，禁止再硬编码 hex / px 字号 / 圆角 / cubic-bezier。
   ============================================================ */
:root {
  /* ─────────────────────────────────────────────
     ① 中性阶 — 暖灰，承载 90% 界面（不用纯白/纯黑）
     ───────────────────────────────────────────── */
  --bg:          #fbfbfa;   /* 页面底 · 暖近白 */
  --surface:     #ffffff;   /* 卡片/面板底 */
  --surface-2:   #f6f6f4;   /* 次级面 / hover / 输入底 */
  --surface-3:   #efefec;   /* 更深的内嵌面 */

  --ink:         #1c1c1e;   /* 主文字 */
  --ink-2:       #56565c;   /* 次文字 */
  --ink-3:       #84848b;   /* 弱文字 / 说明 */
  --ink-4:       #a6a6ad;   /* 极弱 / 占位 */

  --line:        rgba(20,20,24,.08);   /* 发丝边 — 永不上色 */
  --line-2:      rgba(20,20,24,.13);   /* 强发丝边 */

  /* ─────────────────────────────────────────────
     ② 强调色 — 恰好一个，低饱和「石板靛」（避开纯蓝纯绿）
        状态/语义色全部降饱和，只用于小色点·小图标，绝不做色块/边条
     ───────────────────────────────────────────── */
  --accent:      #5b6478;   /* 石板靛 — 主操作 / 链接 / 高亮线 */
  --accent-600:  #474e5f;   /* 深一阶 — hover / 强调文字 */
  --accent-050:  #eef0f3;   /* 极浅底色 — 软背景 / chip */
  --accent-glow: rgba(91,100,120,.20);

  --pos:         #6e857a;   /* 正向 / 完成 — 低饱和鼠尾草绿 */
  --warn:        #a8895c;   /* 提示 / 旗舰 — 暖金 */
  --neg:         #b06a5c;   /* 异常 — 陶土红 */

  /* tier 分层（Agent / 路径 / 关键信息统一用这套，已降饱和）*/
  --tier-cloud:  #7b73a8;   /* 云端 · 重型 — 雾紫 */
  --tier-local:  #5e8a72;   /* 本机 · 私有 — 雾绿 */
  --tier-value:  #5b6478;   /* 性价比 — 同强调 */
  --tier-flag:   #a8895c;   /* 关键 · 旗舰 — 暖金 */

  /* —— chapter accent：单一强调色策略下，各章保持同色（背景 aurora 仍随之微动）—— */
  --ch: var(--accent);

  /* ─────────────────────────────────────────────
     ③ 圆角 — 两种语言：内容卡 vs 浮动控件(胶囊)
     ───────────────────────────────────────────── */
  --r-chip:  8px;     /* 小标签 / chip / 小图标块 */
  --r-card:  14px;    /* 卡片 / 面板 默认 */
  --r-lg:    20px;    /* 大面板 / 玻璃步骤卡 */
  --r-pill:  999px;   /* 胶囊：按钮 / 导航 / 气泡尾巴外的控件 */
  /* 旧名重映射 */
  --r-sm:  var(--r-chip);
  --r-md:  var(--r-card);
  --r-xl:  var(--r-lg);

  /* ─────────────────────────────────────────────
     ④ Liquid Glass 材质 — 浮动控件 / 导航 / CTA / composer 专用
        浅底上最通透：低 blur + 适度 saturate + inset 高光描边 + 柔外阴影
     ───────────────────────────────────────────── */
  --glass-bg:    rgba(255,255,255,.58);
  --glass-bd:    rgba(255,255,255,.7);
  --glass-blur:  blur(20px) saturate(1.7);
  /* 内高光 = 玻璃曲面镜面：顶缘强 specular + 整圈细描边 + 左上斜面 bevel + 底缘极淡暗收。
     四层叠加让边缘像被光打过的真实曲面玻璃（Apple Liquid Glass 的核心观感）。 */
  --glass-edge:  inset 0 1px 0 rgba(255,255,255,.78),
                 inset 0 0 0 1px rgba(255,255,255,.18),
                 inset 1.5px 1.5px 0 rgba(255,255,255,.42),
                 inset 0 -1px 1px rgba(18,20,28,.05);
  --glass-sh:    0 8px 30px rgba(18,20,28,.10), var(--glass-edge);

  --glass-bg-dark: rgba(28,28,32,.55);
  --glass-bd-dark: rgba(255,255,255,.14);

  /* ─────────────────────────────────────────────
     ⑤ 阴影阶 — 柔，用来撑层级（不靠彩色）
     ───────────────────────────────────────────── */
  --sh-1:    0 1px 2px rgba(18,20,28,.04), 0 4px 12px rgba(18,20,28,.05);
  --sh-2:    0 2px 6px rgba(18,20,28,.05), 0 12px 32px rgba(18,20,28,.08);
  --sh-3:    0 8px 24px rgba(18,20,28,.09), 0 28px 64px rgba(18,20,28,.12);
  /* Cursor 式「悬浮截图」阴影：两层柔扩散 + 1px 环 */
  --sh-float: 0 28px 70px rgba(18,20,28,.13), 0 14px 32px rgba(18,20,28,.08), 0 0 0 1px rgba(18,20,28,.05);

  /* ─────────────────────────────────────────────
     ⑥ 字体 — 无衬线变量字体 · 4 个角色，每个一套完整规格
        分级靠 字号 + 负字距 + 字重，不靠彩色/边条
     ───────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC",
          "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* display — 封面/大标题 */
  --t-display: clamp(40px, 5.6vw, 72px);
  --tr-display: -.034em;  --lh-display: 1.08;
  /* h1 / 标题 */
  --t-h1: clamp(30px, 3.8vw, 48px);
  --tr-h1: -.026em;       --lh-h1: 1.1;
  /* h2 / 区块标题 */
  --t-h2: clamp(24px, 2.6vw, 34px);
  --tr-h2: -.02em;        --lh-h2: 1.15;
  /* h3 / 小标题 */
  --t-h3: clamp(19px, 1.8vw, 23px);
  --tr-h3: -.015em;       --lh-h3: 1.25;
  /* lead / 副描述 */
  --t-lead: clamp(18px, 1.6vw, 22px);
  --tr-lead: -.01em;      --lh-lead: 1.5;
  /* body / 正文 */
  --t-body: 16px;         --tr-body: -.006em;  --lh-body: 1.55;
  /* chat / 手机模拟器消息 */
  --t-chat: 14px;         --tr-chat: 0;         --lh-chat: 1.43;
  /* small / 辅助 */
  --t-small: 13.5px;      --tr-small: 0;       --lh-small: 1.45;
  /* caption / 点缀 */
  --t-caption: 12px;      --tr-caption: .01em; --lh-caption: 1.4;

  /* —— 旧名重映射（保持 app.css 既有引用不破）—— */
  --t-hero:  var(--t-display);
  --t-title: var(--t-h1);
  --t-sub:   var(--t-lead);
  --t-micro: var(--t-caption);

  /* ─────────────────────────────────────────────
     ⑦ 间距节奏（4px 基）
     ───────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 36px; --sp-7: 56px; --sp-8: 80px;

  /* ─────────────────────────────────────────────
     ⑧ 动效 — 两条曲线 + 统一时长（全站只用这几个）
        进场/揭示：reveal（快入慢稳，轻微 overshoot）
        交互/移动：ui（抽屉式 ease-out，禁用 ease-in）
     ───────────────────────────────────────────── */
  --ease-reveal: cubic-bezier(.23, 1, .32, 1);
  --ease-ui:     cubic-bezier(.32, .72, 0, 1);
  --spring:      cubic-bezier(.34, 1.32, .64, 1);
  /* 描边「生长」专用：匀速偏后段轻收，不前冲（用于连线/手绘箭头的 dash 描边）*/
  --ease-draw:   cubic-bezier(.4, 0, .25, 1);

  --dur-micro:  160ms;
  --dur-ui:     220ms;
  --dur-reveal: 480ms;
  --dur-scene:  560ms;

  /* —— 旧名重映射 —— */
  --ease:      var(--ease-reveal);
  --ease-soft: var(--ease-ui);

  /* ─────────────────────────────────────────────
     ⑨ 旧调色板变量重映射（--blue / --green… 一律转新色）
        ⚠️ 不要在组件里继续用这些旧名，新代码请用上面的语义 token
     ───────────────────────────────────────────── */
  --blue:      var(--accent);
  --blue-600:  var(--accent-600);
  --blue-050:  var(--accent-050);
  --blue-glow: var(--accent-glow);
  --green:     var(--pos);
  --amber:     var(--warn);
  --red:       var(--neg);
  --ink-1:     var(--ink);
  --bg-soft:   var(--surface-2);
  --bg-soft-2: var(--surface);
}

/* ============================================================
   背景：极轻 aurora（单色石板靛）+ 细噪点 — 替代纯白
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent-glow); }

body::before {
  content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(44% 54% at 14% 18%, color-mix(in srgb, var(--ch) 16%, transparent), transparent 70%),
    radial-gradient(42% 48% at 86% 24%, color-mix(in srgb, var(--ch) 11%, transparent), transparent 72%),
    radial-gradient(56% 56% at 64% 96%, color-mix(in srgb, var(--ch) 10%, transparent), transparent 72%);
  filter: blur(30px) saturate(1.02);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -2.4%, 0) scale(1.05); }
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   ⓪ 文字角色工具类 — 标题/正文/标签统一引用，杜绝硬编码字号
   ============================================================ */
.t-display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 600; }
.t-h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 600; }
.t-h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 600; }
.t-h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 600; }
.t-lead { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); font-weight: 400; color: var(--ink-2); }
.t-body { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.t-small { font-size: var(--t-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); }
.t-caption { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--tr-caption); color: var(--ink-3); }

/* ============================================================
   Liquid Glass utilities — 卡片/控件/导航/composer 复用
   ============================================================ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-sh);
}
.glass-dark {
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd-dark);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}

/* 胶囊玻璃控件基类（按钮 / chip 等浮动控件统一从这里长出来）*/
.glass-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-sh);
  color: var(--ink);
  letter-spacing: -.01em;
  transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
}
.glass-pill:hover  { transform: translateY(-1px) scale(1.015); }
.glass-pill:active { transform: scale(.98); }

/* ============================================================
   可达性
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-pill { background: rgba(255,255,255,.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}