/* ============================================================
   设计令牌（v1.0.1）
   ------------------------------------------------------------
   三层结构：
     1. 原始色阶    --c-*        （只在这里写具体色值）
     2. 语义变量    --surface/--text/--brand/...（组件只用这一层）
     3. 主题覆盖    [data-theme="dark"] / [data-stage="junior"]
   约定：任何组件样式都不允许直接写 #hex，必须引用语义变量，
        这样暗色模式与学段配色只需要改这一层的映射。
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 1. 原始色阶（中性 8 级 + 品牌/语义） ---------- */
  --c-white: #ffffff;
  --c-gray-25: #fcfcfd;
  --c-gray-50: #f7f8fa;
  --c-gray-100: #eef0f3;
  --c-gray-200: #dfe3e8;
  --c-gray-400: #9aa2ad;
  --c-gray-600: #5b6472;
  --c-gray-900: #1a1d21;

  --c-teal-600: #0d9488;   /* 初中 - 青 */
  --c-teal-700: #0f766e;
  --c-teal-50: #ecfdf5;

  --c-indigo-600: #4f46e5; /* 高中 - 靛 */
  --c-indigo-700: #4338ca;
  --c-indigo-50: #eef2ff;

  --c-red-600: #c02626;
  --c-red-50: #fef2f2;
  --c-green-700: #15803d;
  --c-green-50: #f0fdf4;
  --c-amber-700: #b45309;
  --c-amber-50: #fffbeb;
  --c-orange-500: #f97316; /* 选中态强调色（与品牌色区分，避免误读为主操作） */

  /* ---------- 2. 语义变量（亮色） ---------- */
  --bg: var(--c-gray-50);
  --bg-elevated: var(--c-gray-25);
  --surface: var(--c-white);
  --surface-2: var(--c-gray-25);
  --surface-3: var(--c-gray-100);
  --surface-hover: #f2f4f7;
  --overlay: rgba(16, 24, 40, .46);
  --border: #e6e8eb;
  --border-2: #d6dae0;
  --border-strong: #c3c9d1;

  --text: var(--c-gray-900);
  --text-2: var(--c-gray-600);
  --text-3: #6b7280;            /* 对比度 ≥ 4.5:1（原 #8b94a1 仅 3.1:1） */
  --text-invert: #fff;

  /* 品牌：由 [data-stage] 覆盖 */
  --brand: var(--c-indigo-600);
  --brand-hover: var(--c-indigo-700);
  --brand-soft: var(--c-indigo-50);
  --brand-soft-border: #c7d0ff;
  --on-brand: #fff;

  --danger: var(--c-red-600);
  --danger-hover: #9b1c1c;
  --danger-soft: var(--c-red-50);
  --danger-soft-border: #f3cdcd;
  --success: var(--c-green-700);
  --success-soft: var(--c-green-50);
  --success-soft-border: #c9ead4;
  --warn: var(--c-amber-700);
  --warn-soft: var(--c-amber-50);
  --warn-soft-border: #f5e0b8;
  /* v1.1.19 AI 解答标记：独立于品牌色，避免和「考点/公开」这些 chip 混淆 */
  --ai: #6d28d9;
  --ai-soft: #f5f3ff;
  --ai-soft-border: #ddd6fe;
  --select-ring: var(--c-orange-500);

  /* 兼容旧变量名：v1.0.1 之前的组件仍有引用，统一指向语义层 */
  --primary: var(--brand);
  --primary-h: var(--brand-hover);
  --primary-w: var(--brand-soft);
  --danger-w: var(--danger-soft);
  --success-w: var(--success-soft);
  --warn-w: var(--warn-soft);
  --shadow: var(--sh-1);
  --shadow-lg: var(--sh-2);

  /* ---------- 字阶（8 档） ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-stem: 16px;              /* 题干专用：数学题阅读量大，16px 起步 */
  --lh-tight: 1.35;
  --lh: 1.6;
  --lh-stem: 1.85;

  /* ---------- 间距（4 的倍数） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* ---------- 圆角 / 阴影：只保留 3 级 ---------- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sh-2: 0 8px 24px rgba(16, 24, 40, .10);
  --sh-3: 0 20px 48px rgba(16, 24, 40, .18);

  /* ---------- 布局 ---------- */
  /* v1.0.4：侧栏改为顶栏，内容双轴居中
     --app-max   外壳轴：顶栏内容 + 宽版页面（题库/导入/组卷）对齐线
     --content-max 阅读轴：表单、列表、设置等不散开
     --gutter    视口两侧留白 */
  --app-max: 1440px;
  --content-max: 1120px;
  --gutter: 24px;
  --appbar-h: 60px;
  --topbar-h: var(--appbar-h);      /* 兼容：题库 sticky 元素仍引用此名 */
  --drawer-w: 420px;
  --tree-w: 248px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 160ms;

  --font: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  /* 公式源码、报错里的代码片断用等宽，方便逐字符核对 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
}

/* ============================================================
   学段配色：初中 = 青，高中 = 靛
   整站色相切换是「录错库」最有效的防线（比文字提示醒目）
   ============================================================ */
html[data-stage="junior"] {
  --brand: var(--c-teal-600);
  --brand-hover: var(--c-teal-700);
  --brand-soft: var(--c-teal-50);
  --brand-soft-border: #99f6e4;
}

/* ============================================================
   暗色模式
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1013;
  --bg-elevated: #14171b;
  --surface: #16181c;
  --surface-2: #1b1e23;
  --surface-3: #23272d;
  --surface-hover: #20242a;
  --overlay: rgba(4, 6, 9, .66);
  --border: #272c33;
  --border-2: #343a42;
  --border-strong: #434a54;

  --text: #e8eaed;
  --text-2: #a9b1bb;
  --text-3: #858d97;
  --text-invert: #0e1013;

  --brand: #818cf8;
  --brand-hover: #a5b4fc;
  --brand-soft: #1e1b45;
  --brand-soft-border: #34307a;
  --on-brand: #10121a;

  --danger: #f87171;
  --danger-hover: #fca5a5;
  --danger-soft: #2c1618;
  --danger-soft-border: #5a2427;
  --success: #4ade80;
  --success-soft: #10251a;
  --success-soft-border: #1f5133;
  --warn: #fbbf24;
  --warn-soft: #2a2010;
  --warn-soft-border: #57431a;
  --ai: #c4b5fd;
  --ai-soft: #241c46;
  --ai-soft-border: #4c3f96;
  --select-ring: #fb923c;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .55);
  --sh-3: 0 20px 48px rgba(0, 0, 0, .65);
  --shadow: var(--sh-1);
  --shadow-lg: var(--sh-2);
}

/* 暗色 + 初中：保留青色相，但提亮以适配深色底 */
html[data-theme="dark"][data-stage="junior"] {
  --brand: #2dd4bf;
  --brand-hover: #5eead4;
  --brand-soft: #0d2b28;
  --brand-soft-border: #16564f;
  --on-brand: #06201d;
}

/* 深色下 KaTeX 公式与图片需要轻微提亮，避免白底刺眼 */
html[data-theme="dark"] .katex { color: var(--text); }