/* ============================================================================
   design-tokens.css —— 科创板董事备考学习平台 · 设计令牌草案 v2.0
   ----------------------------------------------------------------------------
   配套规范：《00_总览与文档\11_设计语言规范_v2.0.md》（色板/字号/组件全量定义）

   ■ 集成方式（三阶段，零回归）
     ① 在 index.html 中于 style.css 之后引入本文件：
          <link rel="stylesheet" href="design-tokens.css">
        本文件【不重定义】style.css 的旧变量（--bd --fg --dim --bg --card
        --pri --ok --bad），因此：
        · 595 项测试断言不受影响（check_frontend.js 直接断言 style.css 文本）；
        · 加载顺序不影响现网深色模式（style.css 的 prefers-color-scheme
          :root 重定义仍然生效，新旧变量互不覆盖）。
     ② 新写 / 重构的规则一律使用下方 --ds-* 新令牌；旧变量维持不变。
     ③ 旧规则全部迁完后，删除 style.css 第 1 行 :root 与深色模式 :root 中
        的旧变量，再在本文件末尾启用"旧别名兜底"块（见文件底部注释版）。

   ■ 旧变量 → 新令牌映射（现状值，切换目标见规范第 7 章）
       --bg   → --ds-bg-canvas        #f6f8fa
       --card → --ds-bg-surface       #ffffff
       --bd   → --ds-border           #e3e8ef
       --fg   → --ds-text-primary     #1f2937
       --dim  → --ds-text-secondary   #526074
       --pri  → --ds-blue-600         #2563eb（2026 切换目标 #165AAE）
       --ok   → --ds-success-600      #16a34a
       --bad  → --ds-danger-700       #b91c1c

   ■ 字号体系（本文件不重定义根字号）
       四档根字号由 style.css 控制：桌面 18/26/34/40px，手机（≤700px）
       25/32/40/48px（v2.5 等比档）。阅读型文字线性 rem、结构 chrome 用 min(rem,px) 上限、
       文字容器内距 em/clamp 化（v1.9c 缩放律，观感表见规范 3.4 章）。
   ============================================================================ */


/* ============================== 1. 浅色模式 ============================== */
:root {

  /* ---------- 1.1 品牌蓝家族（执行基线 = 现网 Tailwind blue，注释列 2026 目标） ---------- */
  --ds-blue-50:  #eff6ff;  /* 选中浅底 / 标签底（现网 .tag、.opt 选中底）；2026 目标 #EAF2FB */
  --ds-blue-100: #dbeafe;  /* 分块浅底 / 图表浅层；2026 目标 #D6E6F8 */
  --ds-blue-200: #bfdbfe;  /* 热力图 h1 档；2026 目标 #AECDF0 */
  --ds-blue-300: #93c5fd;  /* 热力图 h2 档 / 次要图标；2026 目标 #7FAEE6 */
  --ds-blue-400: #60a5fa;  /* 热力图 h3 档 / 进度环 / 深色模式主色；2026 目标 #4F8EDB */
  --ds-blue-500: #3b82f6;  /* 品牌主色：选中描边 / 焦点环 / 装饰；2026 目标 #216FCF */
  --ds-blue-600: #2563eb;  /* 主按钮底 / 文字链接（= 现网 --pri）；2026 目标 #165AAE（白字 ≈5.9:1） */
  --ds-blue-700: #1d4ed8;  /* 按压态 / 热力图 h5（= 现网 primary:hover）；2026 目标 #10478C */
  --ds-blue-800: #1e40af;  /* 深色品牌底；2026 目标 #0B3569 */
  --ds-blue-900: #1e3a8a;  /* 章节标题 / 深色选中底 / 渐变收尾；2026 目标 #072447 */
  --ds-blue-950: #172554;  /* 深蓝渐变最深档 */

  /* ---------- 1.2 语义色（主色 + 浅底 + 深字，深字保证白底 ≥4.5:1） ---------- */
  /* 成功（绿） */
  --ds-success-50:  #f0fdf4;  /* 成功浅底一档（现网 .feedback.ok / .opt.ok） */
  --ds-success-100: #dcfce7;  /* 成功浅底二档（现网答题卡已答底） */
  --ds-success-600: #16a34a;  /* 成功主色（= 现网 --ok：图标/边框/进度完成） */
  --ds-success-700: #15803d;  /* 成功文字深字（白底 ≈4.8:1）；2026 目标 #157A3E */
  --ds-success-800: #166534;  /* 成功文字更深档（.pass 判分文字，白底 ≈5.5:1） */
  --ds-success-400: #4ade80;  /* 深色模式成功文字（= 现网暗块 --ok） */
  /* 错误（红） */
  --ds-danger-50:  #fef2f2;  /* 错误浅底一档（现网 .feedback.bad / .opt.bad） */
  --ds-danger-100: #fee2e2;  /* 错误浅底二档 */
  --ds-danger-600: #dc2626;  /* 错误主色（图标/红点备用） */
  --ds-danger-700: #b91c1c;  /* 错误主色（= 现网 --bad：按钮/边框/未读红点） */
  --ds-danger-800: #991b1b;  /* 错误文字深字（白底 ≈7.4:1）；2026 目标 #C62828 */
  --ds-danger-400: #f87171;  /* 深色模式错误文字（= 现网暗块 --bad） */
  /* 警告（琥珀黄） */
  --ds-warning-50:  #fffbeb;  /* 警告浅底一档（现网 .deep-sec.trap 底） */
  --ds-warning-100: #fef3c7;  /* 警告浅底二档（现网公告条底） */
  --ds-warning-200: #fde68a;  /* 警告描边浅档（现网 trap 描边） */
  --ds-warning-500: #f59e0b;  /* 警告主色（现网公告条描边 / 答题卡已标记圈） */
  --ds-warning-700: #b45309;  /* 警告文字深字一档（现网 trap 标题） */
  --ds-warning-800: #92400e;  /* 警告文字深字二档（现网公告条正文，白底 ≈7.6:1）；2026 目标 #8A5B00 */
  --ds-warning-300: #fde68a;  /* 深色模式警告文字（= 现网暗块 banner 文字） */
  /* 信息 = 品牌蓝（见 1.1） */

  /* ---------- 1.3 中性灰阶（= 现网 slate 家族与 style.css 现值对齐） ---------- */
  --ds-bg-canvas:     #f6f8fa;  /* 页面最底层（= --bg） */
  --ds-bg-surface:    #ffffff;  /* 卡片 / 面板（= --card） */
  --ds-bg-subtle:     #f1f5f9;  /* 分组底 / ghost hover / 法条底 / 表头底 */
  --ds-bg-hover:      #f8fafc;  /* 行 / 选项 hover、表格斑马纹 */
  --ds-bg-track:      #e5e7eb;  /* 进度条轨道 / 热力图 0 档 */
  --ds-border:        #e3e8ef;  /* 常规边框 / 分割线（= --bd） */
  --ds-border-strong: #cbd5e1;  /* 输入框描边（2026 目标 #C3CDDB） */
  --ds-text-strong:   #0f172a;  /* 标题 / 深色区块（深蓝黑，避免纯黑） */
  --ds-text-primary:  #1f2937;  /* 正文（= --fg，白底 13.9:1） */
  --ds-text-secondary:#526074;  /* 辅助说明（= --dim，白底 ≈5.2:1） */
  --ds-text-tertiary: #8b98a9;  /* 占位符 / 弱说明（仅 ≥14px 或图标旁使用） */
  --ds-text-disabled: #b4becd;  /* 禁用态文字 */

  /* ---------- 1.4 业务专用色（现网值，深色对应值见第 2 块） ---------- */
  --ds-header-bg:    #0f172a;            /* 头部 / 底部导航深底 */
  --ds-header-text:  #cbd5e1;            /* 头部次要文字 */
  --ds-toast-bg:     rgba(15, 23, 42, .92); /* toast 深底（白字对比最高） */
  --ds-toast-text:   #ffffff;            /* toast 文字 */
  --ds-auth-grad:    linear-gradient(135deg, #0f172a, #1e3a8a); /* 登录页背景渐变 */
  --ds-announce-bg:  #fef3c7;            /* 公告条底（重构目标：改浅色通知卡） */
  --ds-announce-border: #f59e0b;         /* 公告条描边 */
  --ds-announce-text:   #92400e;         /* 公告条正文 */
  --ds-trap-bg:      #fffbeb;            /* 易错点底 */
  --ds-trap-border:  #fde68a;            /* 易错点描边 */
  --ds-trap-text:    #b45309;            /* 易错点标题文字 */
  --ds-law-bg:       #f1f5f9;            /* 法条引用底 */
  --ds-law-border:   #94a3b8;            /* 法条左侧强调条 */
  --ds-law-text:     #334155;            /* 法条正文 */
  /* 答题卡五态（现网实现，2026 目标见规范 2.5） */
  --ds-sheet-done-bg:     #dcfce7;       /* 已答底 */
  --ds-sheet-done-border: #16a34a;       /* 已答描边 + ✓ 色 */
  --ds-sheet-marked-ring: #f59e0b;       /* 已标记圈色（用法：box-shadow: 0 0 0 2px var(--ds-sheet-marked-ring)） */
  --ds-sheet-cur-bg:      var(--ds-blue-600); /* 当前题底（现网 = --pri） */
  --ds-sheet-cur-text:    #ffffff;       /* 当前题文字 */
  --ds-sheet-wrong-bg:    #fef2f2;       /* 答错（回顾）底 */
  --ds-sheet-wrong-border:#b91c1c;       /* 答错描边 */
  /* 热力图六档（现网） */
  --ds-heat-0: #e5e7eb;  /* 0 题 */
  --ds-heat-1: #bfdbfe;  /* 1-9 题 */
  --ds-heat-2: #93c5fd;  /* 10-19 题 */
  --ds-heat-3: #60a5fa;  /* 20-49 题 */
  --ds-heat-4: #3b82f6;  /* 50+ 题 */
  --ds-heat-5: #1d4ed8;  /* 100+ 题 */
  /* 荣誉金（2026 新增：连续打卡 / 勋章 / 结业） */
  --ds-gold-500: #c9971c;                 /* 金色主色 */
  --ds-gold-50:  #fcf4e3;                 /* 金色浅底 */

  /* ---------- 1.5 圆角阶梯 ---------- */
  --ds-r-xxs: 3px;    /* 热力图格 */
  --ds-r-xs:  6px;    /* 标签 tag */
  --ds-r-sm:  8px;    /* 按钮 / 输入框 / 知识卡折叠 */
  --ds-r-md:  10px;   /* 小卡 / toast / 错题条右圆角 */
  --ds-r-lg:  12px;   /* 答题选项 / 反馈条 / 输入框（2026 目标） */
  --ds-r-xl:  14px;   /* 卡片（现网） */
  --ds-r-2xl: 16px;   /* 大卡片 / 面板（2026 目标） */
  --ds-r-3xl: 20px;   /* Bento 首页模块（2026 趋势） */
  --ds-r-4xl: 24px;   /* 登录卡 / 大弹窗 */
  --ds-r-full: 999px; /* chip / 进度条 / 热区胶囊 */

  /* ---------- 1.6 阴影阶梯（蓝黑基调，比纯黑更柔和） ---------- */
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .05);   /* 卡片常驻 */
  --ds-shadow-md: 0 2px 4px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .08);  /* 卡片 hover / 吸顶工具条 */
  --ds-shadow-lg: 0 8px 16px rgba(15, 23, 42, .10), 0 20px 40px rgba(15, 23, 42, .12);/* 弹窗（现网登录卡 0 20px 60px rgba(0,0,0,.35) 可并入） */
  --ds-shadow-glow: 0 0 0 3px rgba(37, 99, 235, .18); /* 输入框聚焦光环（用法：box-shadow: var(--ds-shadow-glow)） */

  /* ---------- 1.7 间距阶梯（4 的倍数；布局留白用 px 不随字号缩放） ----------
     文字容器内距继续用 em/clamp（v1.9c 缩放律），与 px 布局留白分工：
     px → 页边距/栅格/卡片间距；em/clamp → 卡片内距/控件间距/最小高度。 */
  --ds-sp-1:  4px;    /* 图标-文字微距 */
  --ds-sp-2:  8px;    /* 组内元素距 */
  --ds-sp-3:  12px;   /* 表单行距 / 手机边距 */
  --ds-sp-4:  16px;   /* 卡片间距 / 题干与选项距 */
  --ds-sp-5:  20px;   /* 桌面边距 */
  --ds-sp-6:  24px;   /* 平板边距 / 表单段距 */
  --ds-sp-7:  32px;   /* 桌面边距 / 区块间距 */
  --ds-sp-8:  40px;   /* 大区块间距 */
  --ds-sp-9:  48px;   /* 页面首尾留白 */
  --ds-sp-10: 64px;   /* 超大留白（结业页等） */

  /* ---------- 1.8 z-index 秩序（与现网 style.css 值一致，避免打架） ---------- */
  --ds-z-topbar:          10;   /* 考试吸顶栏（exam-topbar 现网 10） */
  --ds-z-sticky-filter:   50;   /* 吸顶筛选条（filterbar.open 现网 50） */
  --ds-z-sticky-controls: 60;   /* 学习控制栏吸底（study-controls 现网 60） */
  --ds-z-dropdown:        100;  /* 下拉 / 抽屉（预留） */
  --ds-z-nav:             200;  /* 底部导航（mode-mobile nav 现网 200） */
  --ds-z-modal:           900;  /* 弹窗遮罩（预留） */
  --ds-z-toast:           999;  /* toast（现网 999） */

  /* ---------- 1.9 焦点环（现网 outline 2px #2563eb + offset 2px 的令牌化） ---------- */
  --ds-ring-width:  2px;       /* 焦点环线宽 */
  --ds-ring-color:  #2563eb;   /* 焦点环颜色（= 现网 focus-visible outline 色） */
  --ds-ring-offset: 2px;       /* 焦点环与元素间距 */
  --ds-ring: 2px solid var(--ds-ring-color); /* 组合用法：outline: var(--ds-ring); outline-offset: var(--ds-ring-offset); */

  /* ---------- 1.10 字体与字号令牌（草案；四档根字号仍由 style.css 控制） ---------- */
  --ds-font-sans: "Segoe UI", "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC",
                  "Noto Sans CJK SC", "Source Han Sans SC", "HarmonyOS Sans SC",
                  "MiSans", "OPPO Sans", "vivo Sans", system-ui, sans-serif; /* 中文栈 */
  --ds-font-num: "Segoe UI", "SF Pro Text", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif; /* 数字/西文（配合 tabular-nums） */
  --ds-text-stem:    1.25rem;              /* 题干（阅读型，线性放大；现网值） */
  --ds-text-body:    1rem;                 /* 正文（阅读型） */
  --ds-text-opt:     1.0625rem;            /* 答题选项（阅读型） */
  --ds-text-h3:      1.1875rem;            /* 卡片/对话框标题（现网 h3） */
  --ds-text-h4:      1.0625rem;            /* 小节标题（现网 h4） */
  --ds-text-dim:     min(.875rem, 18px);   /* 辅助说明（chrome，px 上限） */
  --ds-text-caption: min(.8125rem, 16px);  /* 标签/图例（chrome，px 上限） */
  --ds-lh-tight: 1.4;   /* 标题行高 */
  --ds-lh-body:  1.65;  /* 选项/中等密度正文行高 */
  --ds-lh-loose: 1.75;  /* 题干/题解行高（现网 .stem/.feedback 值） */
}

/* ============================== 2. 深色模式 ============================== */
/* 只定义 --ds-* 新令牌的深色值；旧变量（--bd --fg …）的深色值仍由 style.css
   的 prefers-color-scheme :root 块负责，互不覆盖、互不影响。 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 品牌蓝（提亮保对比，= 现网暗块 --pri / 深色链接） */
    --ds-blue-400: #60a5fa;  /* 深色主色（现网暗块 --pri = #3b82f6 → 用 500 档；400 供图标） */
    --ds-blue-500: #3b82f6;  /* 深色品牌主色（= 现网暗块 --pri）；2026 目标 #4F9BF0 */
    --ds-blue-600: #60a5fa;  /* 深色链接/按钮（现网暗块 .statline b 用此档） */
    --ds-blue-300: #93c5fd;  /* 深色链接文字（= 现网暗块 .tag 文字）；2026 目标 #6FA9EF */
    --ds-blue-900: #1e3a8a;  /* 深色选中底（现网暗块 .opt[aria-checked] 底） */

    /* 语义色深色值（= 现网暗块值） */
    --ds-success-400: #4ade80;  /* 深色成功文字/✓ */
    --ds-success-600: #16a34a;  /* 深色成功描边（现网暗块 .opt.ok border） */
    --ds-success-50:  #052e16;  /* 深色成功浅底（现网暗块 .feedback.ok 底） */
    --ds-danger-400:  #f87171;  /* 深色错误文字/✗ */
    --ds-danger-700:  #b91c1c;  /* 深色错误描边 */
    --ds-danger-50:   #450a0a;  /* 深色错误浅底（现网暗块 .feedback.bad 底） */
    --ds-warning-300: #fde68a;  /* 深色警告文字 */
    --ds-warning-800: #92400e;  /* 深色警告描边 */
    --ds-warning-50:  #451a03;  /* 深色警告浅底（现网暗块 banner/trap 底） */

    /* 中性灰阶深色值（= 现网暗块值） */
    --ds-bg-canvas:      #0f172a;  /* 深色页面底（= 暗块 --bg） */
    --ds-bg-surface:     #1e293b;  /* 深色卡片（= 暗块 --card） */
    --ds-bg-elevated:    #263449;  /* 深色浮起层：hover/斑马纹/法条底（现网暗块 .opt:hover 底） */
    --ds-bg-subtle:      #263449;  /* 深色分组底 */
    --ds-bg-track:       #334155;  /* 深色轨道/热力图 0 档（= 暗块 --bd 复用） */
    --ds-border:         #334155;  /* 深色边框（= 暗块 --bd） */
    --ds-border-strong:  #475569;  /* 深色输入框描边 */
    --ds-text-strong:    #f8fafc;  /* 深色标题 */
    --ds-text-primary:   #e2e8f0;  /* 深色正文（= 暗块 --fg） */
    --ds-text-secondary: #94a3b8;  /* 深色辅助（= 暗块 --dim） */
    --ds-text-tertiary:  #64748b;  /* 深色占位符 */
    --ds-text-disabled:  #5e6e86;  /* 深色禁用 */

    /* 业务专用色深色值（= 现网暗块值） */
    --ds-header-bg:   #020617;     /* 深色头部底（现网暗块 header） */
    --ds-auth-grad:   linear-gradient(135deg, #020617, #1e3a8a); /* 深色登录渐变 */
    --ds-toast-bg:    rgba(15, 23, 42, .92); /* 深色 toast 保持 */
    --ds-law-bg:      #263449;     /* 深色法条底 */
    --ds-law-text:    #cbd5e1;     /* 深色法条文字 */
    --ds-law-border:  #64748b;     /* 深色法条左条 */
    --ds-sheet-done-bg: #052e16;   /* 深色已答底 */
    --ds-sheet-cur-bg:  #3b82f6;   /* 深色当前题底 */
    --ds-heat-0: #334155;          /* 深色热力图 0 档 */
    --ds-gold-500: #e0b648;        /* 深色金色提亮 */
    --ds-gold-50:  #3a2f14;        /* 深色金色浅底 */

    /* 焦点环深色（提亮保对比） */
    --ds-ring-color: #60a5fa;
  }
}

/* ============================== 3. 用法示例（可复制进新规则） ============================== */
/*  按钮主态：  background: var(--ds-blue-600); color: #fff;
    按钮按压：  background: var(--ds-blue-700);
    选项选中：  border-color: var(--ds-blue-500); background: var(--ds-blue-50);
    输入聚焦：  border-color: var(--ds-blue-500); box-shadow: var(--ds-shadow-glow);
    键盘焦点：  outline: var(--ds-ring); outline-offset: var(--ds-ring-offset);
    卡片常驻：  background: var(--ds-bg-surface); border: 1px solid var(--ds-border);
               border-radius: var(--ds-r-xl); box-shadow: var(--ds-shadow-sm);
               padding: clamp(18px, 1.5rem, 36px) clamp(20px, 1.75rem, 42px);
    答题卡已标记：box-shadow: 0 0 0 2px var(--ds-sheet-marked-ring);
    数字列：    font-family: var(--ds-font-num); font-variant-numeric: tabular-nums; */

/* ============================== 4. 旧别名兜底（迁移完成后的最终形态） ==============================
   待全部规则迁入 --ds-* 后，删除 style.css 的 :root 与暗块 :root 旧变量，
   取消下面注释即完成收口（当前保持注释状态，确保零回归）：
   :root {
     --bd:   var(--ds-border);
     --fg:   var(--ds-text-primary);
     --dim:  var(--ds-text-secondary);
     --bg:   var(--ds-bg-canvas);
     --card: var(--ds-bg-surface);
     --pri:  var(--ds-blue-600);
     --ok:   var(--ds-success-600);
     --bad:  var(--ds-danger-700);
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bd:   var(--ds-border);
       --fg:   var(--ds-text-primary);
       --dim:  var(--ds-text-secondary);
       --bg:   var(--ds-bg-canvas);
       --card: var(--ds-bg-surface);
       --pri:  var(--ds-blue-500);
       --ok:   var(--ds-success-400);
       --bad:  var(--ds-danger-400);
     }
   } */