/* ================================================================
   考试急 PWA — Design Tokens v4.0
   设计主题: "排版 Editorial" — 纯白留白 × 大字号对比 × 线即层次
   ----------------------------------------------------------------
   设计原则:
   1. 不用卡片堆叠建立层次 —— 用 1px 分隔线 + 留白 + 字号对比
   2. 不用阴影表现深度 —— 只有模态框允许浮起
   3. 不用渐变（唯一例外: 主按钮的极淡纵向渐变，用于增加"实体感"）
   4. 圆角几乎为 0 —— 杂志排版的语言
   5. 字号与字重对比拉大 —— 44px/800 的标题 vs 10px/700/字距0.2em 的栏目名
   6. 动效克制但精确 —— 全部围绕"揭示/生长/扫过"，300-620ms
   ----------------------------------------------------------------
   兼容性: 文件末尾保留了 v2/v3 的旧变量名作为别名。
   原因: 各页面 JS 里有大量内联 var() 引用（含 7 个此前缺失的变量），
   保留别名可避免样式炸裂，同时修复那些失效引用。
   ================================================================ */

:root {
  /* ==============================================================
     一、色彩系统
     核心: 纯白底 + 墨色文字 + 唯一亮色（信号橙）
     ============================================================== */

  /* --- 底色层级（浅色系，靠"面"的微妙差异 + 线分层） --- */
  --bg:            #FFFFFF;   /* 页面根背景 */
  --bg-sub:        #F4F4F2;   /* 次级面：批注块、引用块 */
  --bg-sunk:       #EDEDEA;   /* 下沉面：进度槽、禁用态 */

  /* --- 线条（本方案的主要层次工具） --- */
  --line:          #E4E4E0;   /* 常规分隔线 */
  --line-soft:     #EFEFEC;   /* 更弱的分隔 */
  --line-strong:   #111111;   /* 强调分隔线（栏目头、表格头） */

  /* --- 文字 --- */
  --ink:           #111111;   /* 主文字，对比度 19.6:1 */
  --ink-2:         #6B6B6B;   /* 次级文字，对比度 5.7:1 (WCAG AA) */
  --ink-3:         #A8A8A8;   /* 弱化文字，对比度 2.6:1 (仅装饰/元信息) */
  --ink-inv:       #FFFFFF;   /* 反白文字（黑底按钮上） */

  /* --- 强调色 --- */
  --accent:        #E8541E;   /* 信号橙 — 全局唯一亮色 */
  --accent-deep:   #C9430F;   /* hover / 按下加深 */
  --accent-soft:   rgba(232, 84, 30, 0.08);
  --accent-line:   rgba(232, 84, 30, 0.40);

  /* --- 语义色（克制，低饱和） --- */
  --ok:            #1F7A4C;   /* 正确 */
  --ok-soft:       rgba(31, 122, 76, 0.08);
  --ok-line:       rgba(31, 122, 76, 0.35);
  --warn:          #A8761F;   /* 注意 */
  --warn-soft:     rgba(168, 118, 31, 0.08);
  --err:           #C23B22;   /* 错误 */
  --err-soft:      rgba(194, 59, 34, 0.07);
  --err-line:      rgba(194, 59, 34, 0.35);

  /* ==============================================================
     二、字体系统
     三族并用: 黑体(正文) / 衬线(数据·标题) / 等宽(编号·计时)
     ============================================================== */

  --font-sans:  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                'Noto Sans SC', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', 'Songti SC', 'SimSun', serif;
  --font-mono:  'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace;

  /* --- 排版尺度（对比拉大：10px ↔ 96px） --- */
  --text-2xs:   0.5625rem;  /*  9px — 极小标签 */
  --text-xs:    0.625rem;   /* 10px — 栏目名、眉标 */
  --text-sm:    0.6875rem;  /* 11px — 元信息 */
  --text-base:  0.9375rem;  /* 15px — 正文 */
  --text-md:    1.0625rem;  /* 17px — 题干、列表标题 */
  --text-lg:    1.25rem;    /* 20px — 区块标题 */
  --text-xl:    1.625rem;   /* 26px — 页面主标题 */
  --text-2xl:   2.75rem;    /* 44px — 首屏大标题 */
  --text-3xl:   4rem;       /* 64px — 中号数据 */
  --text-display: 6rem;     /* 96px — 成绩主数字 */

  /* --- 行高 --- */
  --leading-tight:    1.14;  /* 大标题（紧凑有力） */
  --leading-snug:     1.45;  /* 列表标题 */
  --leading-normal:   1.6;   /* 正文 */
  --leading-relaxed:  1.85;  /* 长文阅读（解析、讲解） */

  /* --- 字重（拉大两极：400 ↔ 800） --- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* --- 字距（排版节奏的关键） --- */
  --tracking-tight:  -0.028em;  /* 大标题 */
  --tracking-snug:   -0.015em;  /* 中标题 */
  --tracking-normal: 0;
  --tracking-wide:   0.12em;    /* 小标签 */
  --tracking-wider:  0.20em;    /* 栏目名、眉标 */

  /* ==============================================================
     三、空间系统 — 4px 基准网格
     ============================================================== */

  --space-2xs: 0.25rem;  /*  4px */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* 页面左右边距（本方案统一 24px，与原型一致） */
  --gutter: 24px;

  /* ==============================================================
     四、圆角 — 近乎直角（杂志排版语言）
     ============================================================== */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   4px;
  --radius-xl:   4px;
  --radius-full: 999px;   /* 仅用于胶囊标签 */

  /* ==============================================================
     五、动效 — 克制但精确
     四类动作: 揭示(mask) / 生长(scaleX) / 扫过(fill sweep) / 位移
     ============================================================== */

  --ease-default:    cubic-bezier(0.22, 1, 0.36, 1);    /* 主曲线 */
  --ease-decelerate: cubic-bezier(0.16, 1, 0.30, 1);    /* 入场 */
  --ease-accelerate: cubic-bezier(0.40, 0, 1, 1);       /* 退场 */
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);    /* 强调入场 */
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性（本方案克制使用） */

  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  320ms;
  --duration-slow:    460ms;
  --duration-reveal:  620ms;   /* 揭示/线条生长 */

  /* ==============================================================
     六、阴影 — 本方案几乎不用
     唯一例外: 模态框需要从纸面浮起
     ============================================================== */

  --shadow-none:    none;
  --shadow-hairline: 0 1px 0 rgba(17, 17, 17, 0.04);
  --shadow-md:      0 2px 8px rgba(17, 17, 17, 0.06);
  --shadow-lg:      0 24px 60px rgba(17, 17, 17, 0.14);  /* 仅模态框 */

  /* ==============================================================
     七、布局
     ============================================================== */

  --nav-height: 60px;

  /* ==============================================================
     八、兼容别名 — v2/v3 旧变量名 → v4 新值
     ⚠️ 用途: 各页面 JS 的内联 var() 引用 + 尚未改写的旧 CSS
     待阶段 3 清理 JS 硬编码后，可逐步移除本区块
     ============================================================== */

  /* 背景（旧深色名 → 新浅色值） */
  --ink-base:    var(--bg);
  --ink-surface: var(--bg);
  --ink-raised:  var(--bg-sub);
  --ink-overlay: var(--bg);

  /* 强调（旧琥珀 → 新信号橙） */
  --amber:      var(--accent);
  --amber-soft: var(--accent-deep);
  --amber-dim:  var(--accent-soft);
  --amber-glow: var(--accent-line);

  /* 次强调（旧蓝灰 → 墨色） */
  --slate:     #4A4A4A;
  --slate-dim: rgba(17, 17, 17, 0.06);

  /* 语义色别名 */
  --ok-dim:    var(--ok-soft);
  --warn-dim:  var(--warn-soft);
  --err-dim:   var(--err-soft);

  /* 边框 */
  --border:         var(--line);      /* ⚠️ 此前缺失，JS 引用 6 次失效 */
  --border-subtle:  var(--line-soft);
  --border-visible: var(--line);
  --border-active:  var(--accent-line);
  --border-ok:      var(--ok-line);
  --border-err:     var(--err-line);

  /* 文本 */
  --text:           var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);

  /* ⚠️ 以下 5 个此前完全缺失，导致 JS 里 18 处引用失效（渲染成透明） */
  --blue:       var(--accent);        /* JS 中用作强调/进度 */
  --blue-light: var(--accent-soft);
  --green:      var(--ok);            /* JS 中用作"正确" */
  --red:        var(--err);           /* JS 中用作"错误" */
  --orange:     var(--accent);        /* JS 中用作"注意/错题" */

  /* 渐变（本方案弃用渐变，降级为极淡的深色渐变，保留变量名防炸） */
  --gradient-primary: linear-gradient(135deg, #1F1F1F 0%, #111111 100%);

  /* 进度环角度变量（result-ring / mastery-ring 使用） */
  --pct: 0;
}

/* ================================================================
   全局基础样式
   ================================================================ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 尊重系统的"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
    --duration-reveal: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}