/* ═══════════════════════════════════════════════════════════════════
   薄荷雾 · Mint Haze 设计系统 —— 令牌单一真相源（Single Source of Truth）
   ═══════════════════════════════════════════════════════════════════
   2026-10-30 从 styles/app.css 的 :root 块整体迁出（单D · 双源/无源收口）。

   🔴 纪律（由 tools/verify-css-tokens.cjs 强制）：
     ① 令牌**只能**在本文件定义；styles/app.css / app-2.css 不得再出现 :root{...} 令牌定义。
     ② 任何组件色必须走 var(--token)，禁止在样式表里写死十六进制（收口进度见 verify-hardcode-primary.cjs）。
     ③ 本文件必须在 app.css **之前**加载（index.html 引序由判据守卫）。

   ⚠️ 历史坑：曾出现过「设计令牌另有一份、线上未加载」的双源漂移（--side-w 76px vs 140px、
      --primary-grad 三色 vs 两色），导致改一处不生效。现只保留这一份。
      styles/main.css 是 Next.js 模板遗留（--background/--foreground/--spacing-*），
      **与产品令牌零重叠、未被任何页面引用**，属死文件，不参与令牌体系（判据已显式排除）。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ===== 薄荷雾 · Mint Haze 设计系统 ===== */

  /* 背景 — 明亮通透 */
  --bg-app: #F2F8F4;
  --bg-grad: linear-gradient(180deg, #FFFFFF 0%, #F2F8F4 60%, #EDF6F2 100%);
  --surface: #FFFFFF;
  --surface-2: #F7FAF9;
  --surface-3: #EEF5F2;

  /* 文字 — 近黑，层级温和 */
  --ink-900: #1D1D1F;
  --ink-700: #3A3A3C;
  --ink-500: #6E6E73;
  --ink-400: #8E8E93;
  --ink-300: #AEAEB2;
  --ink-200: #D4D4D8;
  --ink-100: #ECECEF;

  /* 线 */
  --line: rgba(0,0,0,0.06);
  --line-strong: rgba(0,0,0,0.1);

  /* 主色 — 薄荷绿 */
  --primary: #3FB89B;
  /* --primary-600：主色文字档。⚠️ 2026-11-01 起它**不再当白底文字色用**
     （旧值 #2F9E83 在白底只有 3.31，正文级 AA 不达标）⇒ 白底文字改用 --primary-text。
     它仍作「浅底上的强调文字 / 背景 / 边框」用（30 处 color 用 + 7 处背景用）。 */
  --primary-600: #2F9E83;
  /* --primary-700：承载白字的**交互面**档（按钮 / AI 气泡 / 步骤条 / 发送键）。
     ⚠️ 2026-11-01 调档：#247A66(5.18) → #287F66(**4.86**) —— 比原来更亮、更清爽，
     且仍**严格达 WCAG AA 正文 4.5**（实测这是 AA 前提下的最亮上限；再浅 #2A8A70 只有 4.23 ❌）。
     ⚠️ 这 72 处承载白字的面，字号多为 11–15px（正文级，非大字级）⇒ 阈值只能用 4.5，不能用 3.0。 */
  --primary-700: #287F66;
  --primary-grad: linear-gradient(135deg, #6FE0C8 0%, #3FB89B 100%);
  --primary-grad-soft: linear-gradient(135deg, rgba(111,224,200,0.16), rgba(63,184,155,0.16));
  /* 深渐变（2026-10-29 主色拆面 · 2026-11-01 调档）——专供「承载白字的大色块品牌面」：
     logo / 横幅 / 封面 / 头像 / 用户聊天气泡。
     ⚠️ 原 --primary-grad 浅端 #6FE0C8 白字对比仅 1.59、深端 #3FB89B 仅 2.46，均不达 WCAG 组件级 3.0；
     现两端 #287F66(4.86) / #216D58(6.19) 均达 AA 正文 4.5。仅无文字的纯装饰面可继续用原渐变。 */
  --primary-grad-deep: linear-gradient(135deg, #287F66 0%, #216D58 100%);
  /* 主色补档（2026-10-29 令牌塌陷修复）——色相不变，仅补被引用但未定义的档位 */
  --primary-200: #B8F2E5;   /* 浅边框/分隔 */
  --primary-300: #6FE0C8;   /* 常规边框（与 --primary-grad 首色同源） */
  --primary-800: #216D58;   /* hover / 深档 · 白字 6.19 */

  /* 🔴 --primary-text：**白底上的主色文字**专用档（2026-11-01 新增）
     为什么要有它：--primary-600 旧值 #2F9E83 在白底只有 **3.31**，正文级 AA(4.5) 不达标
     （既存问题，非本次改动引入）。但它 30 处当浅底文字色用（chip / 侧栏激活 / 提示文字），
     那里底色是浅绿，白底阈值不能直接套。
     做法：**新增一个专档**给白底文字用，值 #267A63 ——
       白底 5.19 ✅ / 浅绿底 #F2F8F4 4.82 ✅ / 浅绿底 #E8F6F2 4.67 ✅（三种底色全达 AA）
     ⇒ 白底上的主色文字一律走它；浅绿底上的仍走 --primary-600。 */
  --primary-text: #267A63;

  /* 强调 — 暖珊瑚 */
  --accent: #FF9F68;
  --accent-600: #F0854A;
  --accent-grad: linear-gradient(135deg, #FFC9AE 0%, #FF9F68 100%);

  /* 语义色 */
  --ok: #4CD4A0;       --ok-soft: #E3F7EF;
  --warn: #E0A33C;     --warn-soft: #FBF1DC;
  --danger: #FF7A6B;   --danger-soft: #FFE9E5;
  --info: #5AC8FA;     --info-soft: #E6F5FE;

  /* 语义色补档（2026-10-29 令牌塌陷修复）
     ⚠️ 分级约定：200=浅面/边框 · 400=分隔线 · 500=图标/图形（非文字）
                  600=正文色 · 700=深正文 · 800=最深正文
     ⚠️ 医疗色语义（IEC 60601-1-8）：红=危急 · 黄=警告 · 青=低优先 · 绿=正常
     ⚠️ 文字档已按 WCAG AA 实测：600 档白底 ≥4.5，soft 底同档 ≥4.6 */
  --ok-200: #D6F7EA;
  --ok-400: #7FE0B8;
  --ok-500: #2FA36B;     /* 图形用，非文字 */
  --ok-600: #1A8551;     /* 文字 · 白底 4.65 */
  --ok-700: #176B46;     /* 文字 · 白底 6.51 · soft 底 5.83 */
  --ok-800: #0E5232;

  --warn-400: #F2CE93;
  --warn-500: #BA7517;   /* 图形用，非文字 */
  --warn-600: #9A6B12;   /* 文字 · 白底 4.68 */
  --warn-700: #8A5A12;   /* 文字 · 白底 5.91 · soft 底 5.27 */
  --warn-800: #6B450C;

  --danger-400: #FF9B8E;
  --danger-500: #E0685A;   /* 图形用，非文字 */
  --danger-600: #C0392B;   /* 文字 · 白底 5.44 */
  --danger-700: #A32D2D;   /* 文字 · 白底 7.07 · soft 底 6.07 */
  --danger-800: #7F2323;

  --amber-500: #BA7517;    /* warn-500 的等值别名 */
  --amber-700: #854F0B;

  /* 墨阶补档（2026-10-29 令牌塌陷修复） */
  --ink-600: #555555;     /* 次级正文 · 白底 7.46 */
  --ink-800: #2A2A2E;     /* 标题档 · 白底 14.29 */

  /* 边框/线/背景补档（2026-10-29 令牌塌陷修复） */
  --line-light: #EDF3F0;
  --line-200: #E3EDE7;
  --color-border-100: #F0F2F5;
  --color-border-200: #E8ECEE;
  --color-danger-50: #FFF1F0;
  --color-danger-200: #FFCCC7;
  --color-bg-secondary: #F7F8FA;
  --bg-hover: #F5F5F5;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;

  /* 作用域泄漏修复（2026-10-29 令牌塌陷修复 · 第二分支）
     根因：这批令牌原先只定义在 .v3-app / .profile-page 作用域块内，
     但被 .page-customers / #pdf-export-container 等**不在该作用域内**的规则引用。
     CSS 变量沿 DOM 继承，挂在 document.body 上的 #pdf-export-container
     拿不到 .v3-app 里定义的变量 ⇒ 真机实测 PDF 导出的因果图三色分级
     （--lvl-up/mid/down）与恶性循环弧线（--loop）全部塌成黑/无。
     ⇒ 统一提升到 :root，作用域块里的同值定义保留（不冲突）。 */
  --primary-soft: #E8F6F2;
  --primary-soft-2: #F0FAF7;
  --accent-soft: #FFF0E6;
  --lvl-up: #7C5CD6;      /* 紫 · 上游/起点 */
  --lvl-mid: #D98E2B;     /* 琥珀 · 中游 */
  --lvl-down: #2FA8DC;    /* 蓝 · 下游 */
  --loop: #FF7A6B;        /* 红 · 恶性循环 */
  --pf-c: #3FB89B;        /* 主色 chip */

  /* 字体 — Apple 感 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --num: "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif;

  /* 字号 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px;
  --fs-4xl: 46px; --fs-hero: 72px;

  /* 圆角 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* 阴影 — Apple 式扩散柔光 */
  --sh-sm: 0 1px 2px rgba(20,48,43,0.04), 0 1px 3px rgba(20,48,43,0.03);
  --sh-md: 0 4px 18px rgba(20,48,43,0.07), 0 2px 6px rgba(20,48,43,0.04);
  --sh-lg: 0 14px 44px rgba(20,48,43,0.09), 0 4px 12px rgba(20,48,43,0.04);
  --sh-glow: 0 8px 28px rgba(63,184,155,0.22);

  /* 过渡 */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 140ms var(--ease);
  --t-norm: 260ms var(--ease);

  /* 布局 */
  --nav-h: 60px;
  --side-w: 140px;

  /* ===== 兼容别名（映射到新系统）===== */
  /* --color-* 体系 */
  --color-primary-900: #1A5C50;
  --color-primary-700: #287F66;   /* 2026-11-01 调档 · 白字 4.86 ✅ */
  --color-primary: #3FB89B;
  --color-primary-400: #5ECFAE;
  --color-primary-300: #8AEDD5;
  --color-primary-light: #D6F5EC;
  --color-primary-lighter: #EDFAF5;
  --color-primary-gradient: linear-gradient(135deg, #8AEDD5 0%, #3FB89B 50%, #2A9479 100%);
  --color-primary-gradient-dark: linear-gradient(135deg, #2F9E83 0%, #3FB89B 100%);
  --color-primary-soft: rgba(63, 184, 155, 0.08);

  --color-accent: #FF9F68;
  --color-accent-dark: #F0854A;
  --color-accent-light: #FFF0E6;
  --color-accent-gradient: linear-gradient(135deg, #FF9F68 0%, #FFC9AE 100%);

  --color-bg: #F2F8F4;
  --color-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F2F8F4 60%, #EDF6F2 100%);
  --color-surface: #F7FAF9;
  --color-canvas: #EEF5F2;
  --color-card: #FFFFFF;
  --bg-elev: #FFFFFF;

  --color-text-primary: #1D1D1F;
  --color-text-secondary: #3A3A3C;
  --color-text-tertiary: #6E6E73;
  --color-text-quaternary: #8E8E93;

  --color-border: #AEAEB2;
  --color-border-light: rgba(0,0,0,0.06);
  --color-border-strong: rgba(0,0,0,0.1);

  --color-success: #4CD4A0;
  --color-success-light: #E3F7EF;
  --color-warning: #E0A33C;
  --color-warning-light: #FBF1DC;
  --color-danger: #FF7A6B;
  --color-danger-light: #FFE9E5;
  --color-info: #5AC8FA;
  --color-info-light: #E6F5FE;

  /* 阴影 — 薄荷调 */
  --shadow-xs: 0 1px 2px rgba(20, 48, 43, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 48, 43, 0.05), 0 2px 4px rgba(20, 48, 43, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 48, 43, 0.06), 0 2px 4px rgba(20, 48, 43, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 48, 43, 0.08), 0 4px 12px rgba(20, 48, 43, 0.04);
  --shadow-xl: 0 24px 64px rgba(20, 48, 43, 0.10), 0 8px 24px rgba(20, 48, 43, 0.05);
  --shadow-brand: 0 2px 12px rgba(63, 184, 155, 0.20);
  --shadow-brand-lg: 0 4px 20px rgba(63, 184, 155, 0.28);
  --shadow-card-hover: 0 12px 32px rgba(20, 48, 43, 0.08), 0 4px 12px rgba(20, 48, 43, 0.04);
  --shadow-inner: inset 0 0 0 1px rgba(20, 48, 43, 0.05);

  /* 圆角 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* 字体 */
  --font-han: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-num: "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* 间距 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  /* ===== 短名变量 ===== */
  --primary-900: #1A5C50;
  --primary-700: #287F66;
  --primary-500: #3FB89B;
  --primary-400: #5ECFAE;
  --primary-100: #D6F5EC;
  --primary-50: #EDFAF5;
  --accent-500: #FF9F68;
  --accent-100: #FFF0E6;
  --bg-app: #F2F8F4;
  --bg-card: #F7FAF9;
  --danger: #FF7A6B;
  --warn: #E0A33C;
  --ok: #4CD4A0;
  --info: #5AC8FA;
  --ink-900: #1D1D1F;
  --ink-700: #3A3A3C;
  --ink-500: #6E6E73;
  --ink-400: #8E8E93;
  --ink-200: #D4D4D8;
  --ink-100: #ECECEF;

  /* 主按钮渐变 */
  --btn-primary-gradient: linear-gradient(135deg, #8AEDD5, #3FB89B, #2A9479);
  --btn-primary-shadow: 0 4px 12px rgba(63,184,155,0.25);
  /* 卡片阴影 */
  --card-shadow: 0 4px 12px rgba(20,48,43,0.06);
  --card-shadow-hover: 0 12px 32px rgba(20,48,43,0.08);
  /* 输入框聚焦 */
  --input-focus-ring: 0 0 0 3px rgba(63,184,155,0.1);
  /* ═══ 通道令牌（2026-10-30 补）——供 rgba() 收口使用 ═══
     用法：rgba(var(--primary-rgb), .12)
     目的：把散落各处的 rgba(63,184,155,α) 硬编码收敛到令牌，改主色时一处生效。 */
  --primary-rgb: 63, 184, 155;
  --primary-600-rgb: 47, 158, 131;
  --primary-700-rgb: 40, 127, 102;
  --primary-800-rgb: 33, 109, 88;
  --accent-rgb: 255, 159, 104;
  --ok-rgb: 76, 212, 160;
  --danger-rgb: 255, 122, 107;
  --warn-rgb: 224, 163, 60;

  /* ═══ 孤值补建令牌（2026-10-30）═══
     这批色值此前散落在 app.css / js 里硬编码，tokens.css 无对应定义 ⇒ 改主色/改语义色时
     改不到它们（"改主色相只需改 tokens.css 一处"这句话对它们不成立）。
     本次**值一字未改**，只把"同一个值"命名并集中 ⇒ 视觉零变化，后续可一处改。

     ⚠️ 命名依据是**实际用法**（不是猜测的语义）：
       --line-subtle   #ECEEEA  卡片/面板边框灰（border: 1px solid）+ 进度条底槽
       --surface-warm  #FAF7F0  暖白底（知识库卡片 hover / cli hover），配 var(--color-surface,…) 兜底
       --primary-deep  #2A6F6E  深一档主色（智诊因果表 chosen 列 / ipc 段标题 / hover 文字）
       --warn-text     #A1622B  警告语义**文字**色（配 var(--warn-soft) 背景）
                       ⚠️ 与 --warn-600(#9A6B12) **不是同一个值**！不可互换。
       --ink-deep      #1F3B33  深墨绿标题/正文强调（方案 v3 卡片标题、ipc 段落标题）
       --primary-150   #D6F5EC  浅绿底（stage-upload hover 等）＝ 已有的 --primary-100 同值
                       ⚠️ 与 --primary-100(#D6F5EC) **同值**，保留 --primary-100 即可，
                          下面这个别名只为兼容旧写法，实际引用建议统一用 --primary-100
     保留这些名字是为了让旧代码的 var(--x, #兜底) 兜底值与新令牌对齐，
     避免出现「令牌叫 A、兜底值却是 B」的历史遗留（见 --primary-deep 与 --primary 的历史错位）。 */
  --line-subtle: #ECEEEA;
  --surface-warm: #FAF7F0;
  --primary-deep: #2A6F6E;
  --primary-deep-2: #3F7F6B;
  --warn-text: #A1622B;
  --ink-deep: #1F3B33;
  --primary-150: #D6F5EC;


}