/* ============================================================
   学途 · 多智能体教学辅助系统 — 设计令牌

   来源：项目管理系统 V3 的 src/styles/tokens.css（安静 skin 部分）
   移植原则：
   1. 安静皮肤的值【直接作为 :root 默认】。学途恒定使用安静皮肤，
      不挂在 [data-skin="quiet"] 下 —— 这样即使 data-palette 因任何
      原因没设上，令牌也永远有值，不会出现「令牌全空 → 裸 HTML」。
   2. 三维机制保留：data-skin（恒为 quiet）× data-palette（配色）×
      data-theme（明/暗）。加一套配色只需加一个选择器块。
   3. 变量名一律用规范令牌名。旧名（--primary/--card/--text-primary…）
      已在 style.css 里批量替换掉，不再保留别名 —— 少一层间接。

   视觉纪律（照搬 PMS，改样式时请遵守）：
   ① 颜色克制：品牌色只用于主按钮 / active / 链接 / 进度条填充；
      大面积色块一律用 brand-soft 这类极浅变体；正文不用彩色字。
   ② 三档圆角：--r-sm(输入/小按钮) / --r(卡片/面板/弹窗) / --r-pill(胶囊)
   ③ 阴影只有两级且都很轻，卡片始终 1px solid var(--line) 描边 ——
      靠描边表达边界，不靠阴影「浮起来」。
   ④ 间距全走 --s* 梯度，不写魔法数字。
   ⑤ 图标统一尺寸档 + 颜色跟随 currentColor。
   ⑥ 几乎零 emoji。
   ⑦ --kai 楷体只用于一句感性文案和空状态。
   ⑧ 暗色是「柔和暮色」不是真暗色，卡片仍近白，正文始终深色。
   ============================================================ */

:root {
  /* ---- 品牌色 ---- */
  --brand: #277b92;
  --brand-2: #6ba6be;
  --brand-hover: #1d6679;
  --brand-soft: #e3f0f4;
  --brand-tint: #e3f0f4;
  --brand-deep: #1f6c82;
  --on-brand: #ffffff;

  /* ---- 文字 ---- */
  --ink: #2f3437;
  --ink-2: #4a5256;
  --ink-3: #666f73;
  --muted: #4a5256;
  --faint: #666f73;

  /* ---- 描边 ---- */
  --line: #e4eae8;
  --line-2: #d3dcd9;

  /* ---- 面 ---- */
  --panel: #ffffff;
  --canvas: #f7f9f8;
  --bg: #f7f9f8;
  --surface: #ffffff;
  --sunk: #eff3f2;

  /* ---- 中式分类色（安静皮肤的调色板基座）---- */
  --qing: #6ba6be;
  --zhu: #7e9e6a;
  --xiang: #ddb44a;
  --ou: #c79baf;
  --dai: #7b6e9b;
  --crest: #1e3e6e;

  /* ---- 通用语义色（成对：主色 + -soft 极浅底）---- */
  --green: #4d7346;   --green-soft: #e9f1e6;
  --amber: #8a6416;   --amber-soft: #faf1dc;
  --red: #a6474c;     --red-soft: #f7e9e9;
  --purple: #7b6e9b;  --purple-soft: #edeaf2;
  --blue: #6ba6be;    --blue-soft: #e3f0f4;

  /* ============================================================
     学途专属语义色 —— 学习场景
     （PMS 的 pass/doing/back 是评审三元组，学途没有评审流程，故替换）
     成对模式保持：主色用于文字/描边，-t 用于极浅底
     ============================================================ */

  /* 学习任务 / 计划状态 */
  --s-done: var(--green);     --s-done-t: var(--green-soft);    /* 已完成 */
  --s-doing: var(--amber);    --s-doing-t: var(--amber-soft);   /* 进行中 */
  --s-todo: var(--ink-3);     --s-todo-t: var(--sunk);          /* 待开始 */
  --s-overdue: var(--red);    --s-overdue-t: var(--red-soft);   /* 逾期 / 薄弱点 */
  --s-paused: var(--purple);  --s-paused-t: var(--purple-soft); /* 已取消 / 暂停 */
  --s-idle: var(--blue);      --s-idle-t: var(--blue-soft);     /* 排队 / 生成中 */

  /* 掌握度三档（进度条 / 评分）*/
  --m-high: var(--green);  --m-high-t: var(--green-soft);
  --m-mid: var(--amber);   --m-mid-t: var(--amber-soft);
  --m-low: var(--red);     --m-low-t: var(--red-soft);

  /* 六维评估轴色 —— 直接复用中式分类色（色相分散、饱和度统一，
     正好适合雷达图六轴），第六维用品牌副色补齐 */
  --d1: var(--qing);      /* 知识掌握 */
  --d2: var(--zhu);       /* 认知成长 */
  --d3: var(--xiang);     /* 学习投入 */
  --d4: var(--ou);        /* 知识留存 */
  --d5: var(--dai);       /* 弱项改善 */
  --d6: var(--brand-2);   /* 目标达成 */

  /* ---- 阴影（只有两级，都很轻）---- */
  --shadow: 0 1px 3px rgba(47, 52, 55, 0.05), 0 8px 24px -18px rgba(47, 52, 55, 0.28);
  --sh: 0 1px 3px rgba(47, 52, 55, 0.05), 0 8px 24px -18px rgba(47, 52, 55, 0.28);

  /* ---- 布局尺寸 ---- */
  --sidebar: 264px;
  --topbar: 64px;

  /* ---- 圆角三档 ---- */
  --r: 18px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* ---- 间距梯度（4 的倍数，无魔法数字）---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s14: 56px; --s18: 72px;

  /* ---- 字号 ---- */
  --t-xs: 13px;  --t-sm: 14px;  --t-base: 16px; --t-md: 17.5px;
  --t-lg: 19px;  --t-xl: 27px;  --t-2xl: 30px;

  /* ---- 字体 ----
     沿用 PMS 的字栈，保持与改造前一致的渲染。
     （注：Windows 上 "Noto Sans SC" 通常未安装，实际会回落到微软雅黑。
       若想让西文走 Segoe UI 可以把它提到首位，但那属于排版改动，
       应作为独立一次变更，不要夹在结构性重构里。）*/
  --cjk: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
         "Microsoft YaHei", system-ui, sans-serif;
  /* 楷体：只用于一句感性文案 / 空状态标题 */
  --kai: "LXGW WenKai", "LXGW WenKai Screen", "STKaiti", "KaiTi", serif;

  /* ---- 过渡（学途原有，保留）---- */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   配色板 —— 只覆写品牌系列。
   亮色模式下 --canvas / --ink / --line 由 :root 统一提供，
   不再由配色决定 —— 这样修掉了旧版「切配色只有主色变、
   底色还是暖奶油」的不一致。
   ============================================================ */

html[data-palette="qing"] {   /* 天青 —— 学途品牌色，默认 */
  --brand: #277b92;
  --brand-2: #6ba6be;
  --brand-hover: #1d6679;
  --brand-tint: #e3f0f4;
  --brand-soft: #e3f0f4;
  --brand-deep: #1f6c82;
}

html[data-palette="zhu"] {    /* 竹青 */
  --brand: #4b6a3b;
  --brand-2: #7e9e6a;
  --brand-hover: #3d5730;
  --brand-tint: #e9f0e4;
  --brand-soft: #e9f0e4;
  --brand-deep: #3d5730;
}

html[data-palette="xiang"] {  /* 缃色 */
  --brand: #856012;
  --brand-2: #ddb44a;
  --brand-hover: #6e4f0e;
  --brand-tint: #faf1dc;
  --brand-soft: #faf1dc;
  --brand-deep: #6e4f0e;
}

html[data-palette="ou"] {     /* 藕荷 */
  --brand: #8a5670;
  --brand-2: #c79baf;
  --brand-hover: #73485d;
  --brand-tint: #f5eaef;
  --brand-soft: #f5eaef;
  --brand-deep: #73485d;
}

html[data-palette="dai"] {    /* 黛紫 */
  --brand: #544874;
  --brand-2: #7b6e9b;
  --brand-hover: #453a61;
  --brand-tint: #edeaf2;
  --brand-soft: #edeaf2;
  --brand-deep: #453a61;
}


/* ============================================================
   柔和暮色 —— 不是真暗色。
   画布略压暗、卡片仍近白、正文（--ink）保持深色可读。
   全站 colorScheme 锁 light（见 js 的 initAppearance），
   原生控件（滚动条 / 下拉）始终浅色。
   ============================================================ */
html[data-theme="dark"] {
  --bg: #e8eeec;
  --canvas: #e8eeec;
  --surface: #f7faf9;
  --panel: #f7faf9;
  --sunk: #dce6e3;
  --line: #cdd8d4;
  --line-2: #bcc9c4;
}

/* 认证页（登录/注册）固定品牌色，不受用户外观设置影响 ——
   登录页是第三方视角的第一印象，应稳定呈现品牌色，
   而不是因为用户上次选了藕荷就变成粉色登录页。 */
html[data-auth-page="1"] {
  --brand: #277b92;
  --brand-2: #6ba6be;
  --brand-hover: #1d6679;
  --brand-tint: #e3f0f4;
  --brand-soft: #e3f0f4;
  --brand-deep: #1f6c82;
  --canvas: #f7f9f8;
  --bg: #f7f9f8;
  --surface: #ffffff;
  --panel: #ffffff;
  --ink: #2f3437;
}

html, body {
  transition: background-color 0.35s ease, color 0.35s ease;
}