/* =============================================================
   design-tokens.css — 设计变量总表（**只汇总现有值，不新增**）
   -------------------------------------------------------------
   来源：本目录两份手写 CSS 的实测值
     · web-wx.css   —— 桌面端视觉层（变量前缀 --wx-*）
     · weui-fix.css —— 手机端补丁层（变量前缀 --ui-*，映射 WeUI 的 --weui-*）
     · mp.weixin.qq.com 公众平台后台前端样式表（变量前缀 --dt-desk-*，见第六节）
   命名：参考 WeUI 的语义化命名（BRAND / LINK / FG-n 文字 / BG-n 背景）。

   ⚠️ 定位说明（重要）
   1. 本文件是「值的字典」：只定义变量，**不产生任何具体样式**。
      挂载它不会有视觉变化（现有样式表尚未引用这些变量）。
   2. 字号 / 圆角 / 间距两端取值不同（桌面 web-wx / 手机 weui-fix）：
      变量写**桌面端值**，差异在注释里标注「手机 …」。
   3. 暂不替换现有 CSS 里的散落硬编码值 —— 那是独立的接入工作，
      将来可逐条把 `#07c160` → `var(--dt-brand)` 这样替换。
   4. 前缀用 --dt-，刻意避开 --wx-* / --ui-* / --weui-*，防止撞名。
   ============================================================= */

:root {

  /* ==========================================================
     一、颜色
     ========================================================== */

  /* ---------- 品牌与链接 ---------- */
  --dt-brand:        #07c160;   /* 品牌绿：主操作 / 成功（= WeUI BRAND） */
  --dt-brand-active: #06ad56;   /* 品牌绿按下态 */
  --dt-brand-soft:   #e8f8ee;   /* 品牌绿浅底：选中态 / 强调背景 */
  --dt-link:         #576b95;   /* 链接 / 次要操作（= WeUI LINK，微信蓝灰） */

  /* ---------- 文字（参考 WeUI 的 FG-0 ~ FG-3 分级） ---------- */
  --dt-fg-0:   #191919;   /* 主要文字：正文、标题（= 桌面 --wx-text / 手机 --ui-text） */
  --dt-fg-1:   #888888;   /* 次要文字：描述、说明（= 桌面 --wx-text-2 / 手机 --ui-muted） */
  --dt-fg-2:   #b2b2b2;   /* 辅助文字：弱提示、禁用文字（= 桌面 --wx-text-3） */
  --dt-fg-nav: #4b4b4b;   /* 导航 / 标签页链接文字（.navbar、.nav-tabs） */
  --dt-fg-tag: #7f7f7f;   /* 标签文字（分类标签未选中态） */

  /* ---------- 背景（参考 WeUI 的 BG-0 / BG-1 层级） ---------- */
  --dt-bg-0: #f7f7f7;   /* 页面底色（= 桌面 --wx-bg） */
  --dt-bg-1: #ffffff;   /* 卡片 / 面板：通栏白底（= 桌面 --wx-white） */
  --dt-bg-2: #fafafa;   /* 浅灰填充：表头、已在名单的卡片、斑马纹 */
  --dt-bg-3: #f2f2f2;   /* 更浅灰：按下态（:active）、标签未选中底 */

  /* ---------- 分隔线 ---------- */
  --dt-line:       #e7e7eb;   /* 常规分隔线（= 桌面 --wx-line / 手机 --ui-line） */
  --dt-line-light: #ededed;   /* 浅分隔线：表格行、列表项之间（= 桌面 --wx-line-2） */
  --dt-line-input: #d9d9d9;   /* 输入框 / 输入组边框 */

  /* ---------- 功能色（对齐 WeUI 的 RED / ORANGE / BLUE） ---------- */
  --dt-success: #07c160;   /* 成功（与品牌绿同值） */
  --dt-warning: #fa9d3b;   /* 警告（= WeUI ORANGE） */
  --dt-danger:  #fa5151;   /* 危险 / 删除 / 错误（= WeUI RED） */
  --dt-info:    #10aeff;   /* 信息 / 提示（= WeUI BLUE） */

  /* ---------- 状态淡底（收拢原先散落的四组值） ---------- */
  --dt-soft-success: #e6f7ec;   /* 浅绿底：成功标签、选中标签 */
  --dt-soft-warning: #fff7e6;   /* 浅橙底：待处理 */
  --dt-soft-danger:  #fff1f0;   /* 浅红底：错误、待移出 */
  --dt-soft-info:    #eaf6fe;   /* 浅蓝底：信息类提示 */

  /* ---------- 禁用态 ---------- */
  --dt-disabled-bg: #c8c9cc;   /* 禁用按钮填充（另有更浅的 #e5e5e5 用于 :disabled） */

  /* ==========================================================
     二、字号
     ⚠️ 桌面正文 14px、手机正文 17px（WeUI 标准）——两端基础不同
     ========================================================== */
  --dt-text-2xs: 10px;   /* 手机端底部菜单栏标签（桌面不用） */
  --dt-text-xs:  11px;   /* 角标、身份标签（讲师 / 管理员） */
  --dt-text-sm:  12px;   /* 小字说明：表格、时间、表单提示（两端通用） */
  --dt-text-md:  13px;   /* 次要文字（桌面）/ 次级说明（手机） */
  --dt-text-base:14px;   /* 正文（桌面基准）（手机正文见 2xl） */
  --dt-text-lg:  15px;   /* 卡片标题、媒体盒标题（两端通用） */
  --dt-text-xl:  16px;   /* 小标题、手机端导航（桌面弹窗标题） */
  --dt-text-2xl: 17px;   /* 手机端正文（WeUI 标准 17px） */
  --dt-text-3xl: 18px;   /* 姓名 / 区块大标题（桌面） */
  --dt-text-4xl: 20px;   /* 宫格数字、页面级标题 */
  --dt-text-icon:26px;   /* 宫格 emoji 图标（手机） */
  --dt-text-display: 38px;  /* 展示性大字：座位票座位号（桌面） */
  --dt-text-hero:    46px;  /* 特大号：消息页 emoji、成绩大数字（手机） */

  /* ==========================================================
     三、圆角
     ⚠️ 桌面偏小（4/8），手机偏大（12/16）——两端风格不同
     ========================================================== */
  --dt-radius-none: 0;        /* 通栏区块：Web 端统一去圆角 */
  --dt-radius-xs:   2px;      /* 极小件：身份标签 */
  --dt-radius-sm:   4px;      /* 小件：按钮 / 输入框 / 人员卡片 / 选人面板（桌面；手机为 12px） */
  --dt-radius-md:   8px;      /* 中件：弹窗 / 卡片（桌面；手机为 16px） */
  --dt-radius-lg:   12px;     /* 手机端小件（按钮 / 卡片） */
  --dt-radius-xl:   16px;     /* 手机端卡片（WeUI 风格） */
  --dt-radius-full: 999px;    /* 胶囊 / 圆形：头像、红点、进度条 */
  /* 散落值（未成体系，暂不列 token）：6px（小按钮）、14px（座位票） */

  /* ==========================================================
     四、间距
     主体系 = 8 的倍数（项目规范 03-spacing）；下列「特殊值」仅限指定场景
     ⚠️ 桌面端区块内边距 16/32，手机端更紧凑（12/15）
     ========================================================== */
  --dt-space-1: 4px;    /* 最小间隔：图标与文字、标签内上下 */
  --dt-space-2: 8px;    /* 紧凑：卡片之间、内容行距、按钮组 gap */
  --dt-space-3: 12px;   /* 常规行距（手机紧凑模式基线） */
  --dt-space-4: 16px;   /* 常规间距：区块上下、卡片内边距（桌面上下） */
  --dt-space-5: 20px;   /* 中段间距 */
  --dt-space-6: 24px;   /* 大区块之间 */
  --dt-space-7: 32px;   /* 桌面：内容左右边距、区块内边距 */
  --dt-space-8: 64px;   /* 宫格（九宫格）上下留白 */

  /* ---- 特殊值（非 8 倍数，项目规范限定用途，勿扩散） ---- */
  --dt-space-2px:  2px;    /* 极小偏移：徽标位置微调 */
  --dt-space-5px:  5px;    /* 仅限：图标与文字间隔 / 角标 padding / 红点偏移 */
  --dt-space-6px:  6px;    /* 角标（badge）内边距 */
  --dt-space-10px: 10px;   /* 标签（tag）左右内边距、手机导航项内边距 */
  --dt-space-15px: 15px;   /* 手机端页面左右边距 */
  --dt-space-36px: 36px;   /* 手机端底部菜单栏（tabbar）底部留白 */
  --dt-space-84px: 84px;   /* 手机端 tabbar 总高（含安全区），用于页面底部占位 */

  /* ==========================================================
     五、行高
     ========================================================== */
  --dt-leading-none:    1;     /* 不折行：数字、图标、单行控件 */
  --dt-leading-tight:   1.25;  /* 紧凑：大标题 */
  --dt-leading-snug:    1.35;  /* 标题（姓名、卡片标题） */
  --dt-leading-normal:  1.4;   /* 紧凑正文（手机端最常用） */
  --dt-leading-base:    1.5;   /* 正文（列表、卡片描述） */
  --dt-leading-relaxed: 1.6;   /* 宽松正文（桌面 body 默认）、多行说明 */
  --dt-leading-loose:   1.7;   /* 长说明、表单提示 */
  --dt-leading-loose-2: 1.8;   /* 表格、超长文本 */

  /* ==========================================================
     六、微信后台（weuiDesktop）令牌 —— 桌面端皮肤的唯一来源
     ----------------------------------------------------------
     来源：mp.weixin.qq.com 公众平台后台前端样式表的 `--weuiDesktop_*` 变量
     （实测导出，见工作区 `css-dump/out-wxamp/`）。原名 → 本表名对照写在行尾。
     ⚠️ 用途：`web-wx.css` 第 50 节（桌面端后台视觉层）只引用本节的 --dt-desk-*。
     ========================================================== */

  /* ---------- 背景（globalBgColor / cardBgColor / areaBgColor） ---------- */
  --dt-desk-bg-global: #f6f7f8;      /* globalBgColor：页面底色 */
  --dt-desk-bg-card:   #ffffff;      /* cardBgColor：卡片 / 面板 */
  --dt-desk-bg-area:   #f6f7f8;      /* areaBgColor：次级区块、表头 */
  --dt-desk-bg-hover:  #f6f7f8;      /* 菜单 / 列表项 hover */
  --dt-desk-bg-hover-2:#fafafa;      /* 表格行 hover（更浅一档） */

  /* ---------- 文字（globalColor / descColor / subColor） ---------- */
  --dt-desk-fg-0: #1a1b1c;           /* globalColor：正文、标题 */
  --dt-desk-fg-1: #7e8081;           /* descColor：次要说明、表头 */
  --dt-desk-fg-2: #b1b2b3;           /* subColor：弱提示、占位符 */
  --dt-desk-fg-disabled: rgba(0, 0, 0, .2);   /* globalColor_disabled */

  /* ---------- 分隔线（separateColor / TableBorderColor） ---------- */
  --dt-desk-line:      #e3e4e5;      /* separateColor：常规分隔线 */
  --dt-desk-line-soft: rgba(0, 0, 0, .05);    /* OpBlack_5：表格内部细线 */

  /* ---------- 链接（linkColor / Link_Hover / Link_Pressed） ---------- */
  --dt-desk-link:        #576b95;
  --dt-desk-link-hover:  #455577;    /* ⚠️ 后台 hover 是「变深蓝」，不是变绿 */
  --dt-desk-link-active: #394661;

  /* ---------- 主题与功能色（themeColor / errorColor / warningColor / neutralColor） ---------- */
  --dt-desk-theme:        #07c160;   /* themeColor：主操作、当前项标记 */
  --dt-desk-theme-soft:   rgba(7, 193, 96, .1);    /* Color_Theme_2 */
  --dt-desk-error:        #fa5151;
  --dt-desk-error-soft:   rgba(250, 81, 81, .1);
  --dt-desk-warning:      #ffc300;
  --dt-desk-warning-soft: rgba(255, 195, 0, .1);
  --dt-desk-info:         #10aeff;
  --dt-desk-info-soft:    rgba(16, 174, 255, .1);

  /* ---------- 按钮（weuiDesktopBtn*） ---------- */
  --dt-desk-btn-bg:       rgba(0, 0, 0, .03);   /* DefaultBackgroundColor */
  --dt-desk-btn-bg-hover: #eaeaea;              /* DefaultBackgroundColorHL */
  --dt-desk-btn-line:     #e4e8eb;              /* DefaultBorderColor */
  --dt-desk-btn-line-hl:  #eaeaea;              /* DefaultBorderColorHL */
  --dt-desk-mask:         rgba(0, 0, 0, .5);    /* BG_maskBgColor */

  /* ---------- 字号 / 字重 / 行高（FontSize_n / FontWeight_n / globalLineHeight） ---------- */
  --dt-desk-text-h1: 24px;       /* H1FontSize（页面级标题；另有 26px 变体用于后台大标题） */
  --dt-desk-text-h2: 20px;       /* H2FontSize */
  --dt-desk-text-h3: 16px;       /* H3/H4FontSize */
  --dt-desk-text-desc: 12px;     /* descFontSize */
  --dt-desk-weight-medium: 500;  /* mediumFontWeight */
  --dt-desk-leading: 1.6;        /* globalLineHeight */

  /* ---------- 圆角（cardBorderRadius / globalBorderRadius / minBorderRadius） ---------- */
  --dt-desk-radius-lg: 8px;      /* cardBorderRadius：卡片、按钮、弹窗 */
  --dt-desk-radius-sm: 4px;      /* globalBorderRadius：小件、输入框 */
  --dt-desk-radius-xs: 2px;      /* minBorderRadius：标签 */

  /* ---------- 阴影（highShadow / BoxShadow_0 / BoxShadow_1 / lowShadow） ---------- */
  --dt-desk-shadow-card: 0 2px 8px rgba(0, 0, 0, .13);   /* highShadow：卡片 */
  --dt-desk-shadow-pop:  0 2px 8px rgba(0, 0, 0, .15);   /* BoxShadow_0：弹窗 / 下拉 */
  --dt-desk-shadow-low:  0 1px 4px rgba(0, 0, 0, .15);   /* BoxShadow_1 */

  /* ---------- 字体栈（FontFamliy_0，原文拼写如此） ---------- */
  --dt-desk-font: -apple-system, system-ui, BlinkMacSystemFont, "PingFang SC", "SF Pro Text",
                  "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Heiti SC", Arial,
                  "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}