/* tokens.css —— 颜色、间距、字号。全站唯一的取值来源，其余样式表只允许引用变量。
   主题：默认深空蓝（data-theme="dark"），可切浅色（data-theme="light"）。
   字号三档：data-fontsize = s / m / l。
   颜色即角色（见 handoff/09 第三节铁律 8）：
     亮蓝 = AI、理论曲线、知识点、主流程动作
     金   = 学生自己的产物、实测曲线
     薄荷青 = 已核验的证据、确定动作
     红   = 缝隙、失效、结束动作
     灰蓝 = 次要动作与辅助信息
*/

:root {
  /* ---- 底色与面板 ---- */
  --c-bg: #0b1f3a;
  --c-bg-grad: linear-gradient(160deg, #0b1f3a 0%, #14304f 100%);
  --c-bg-top: #081426;
  --c-panel: #12294a;
  --c-panel-2: #0f2038;
  --c-panel-3: #16325a;
  --c-line: rgba(255, 255, 255, 0.10);
  --c-line-strong: #24405f;

  /* ---- 语义色 ---- */
  --c-blue: #63a7ff;
  --c-blue-dim: rgba(99, 167, 255, 0.16);
  --c-gold: #f7bd39;
  --c-gold-dim: rgba(247, 189, 57, 0.16);
  --c-red: #f35b61;
  --c-red-dim: rgba(243, 91, 97, 0.16);
  --c-mint: #3ddc97;
  --c-mint-dim: rgba(61, 220, 151, 0.16);
  --c-slate: #7d9dc4;
  --c-slate-dim: rgba(125, 157, 196, 0.14);

  /* ---- 文字 ---- */
  --c-text: #e9f1fb;
  --c-text-2: #a9c1dd;
  /* T46 对比度：次要文字这一档原来是 #7b93b1，压在面板底色 --c-panel (#12294a) 上量到 4.61:1，
     刚过 4.5:1 一点点；提到 #849bb6 之后同一处 5.09:1，最暗的一处（--c-bg-top）6.45:1。
     主色（--c-blue / --c-gold / --c-mint / --c-red）与图表六色一个字没动。 */
  --c-text-3: #849bb6;
  --c-text-on-accent: #06172c;

  /* ---- 口径角标专用的两档（T46）----
     角标不是压在面板底色上，而是压在自己那块更浅的胶囊底（--c-slate-dim / --c-gold-dim 叠上去），
     所以它要比一般次要文字再亮一档，否则「物理公式」这种角标只有 3.68:1。
     单开两个令牌是为了不牵动 --c-text-3 与 --c-gold 本身：
     次要文字仍按上面那一档走，金色仍是学生产物与实测曲线的那个金色。 */
  --c-cite-text: #95a9c1;      /* 压在 --c-slate-dim 胶囊上，最差一处 4.84:1 */
  --c-cite-pending: #f7bd39;   /* 「教学取值待审定」那一档，深色主题下与 --c-gold 同值，6.14:1 */

  /* ---- 字号（三档由 data-fontsize 调 --fs-base） ---- */
  --fs-base: 15px;
  --fs-xs: calc(var(--fs-base) * 0.76);
  --fs-sm: calc(var(--fs-base) * 0.87);
  --fs-md: var(--fs-base);
  --fs-lg: calc(var(--fs-base) * 1.12);
  --fs-xl: calc(var(--fs-base) * 1.34);
  --fs-2xl: calc(var(--fs-base) * 1.7);
  --lh-tight: 1.35;
  --lh-body: 1.7;

  /* ---- 间距（留白是内容：面板外边距 ≥24px，内边距 20px） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --stage-pad: 24px;   /* 面板外边距，铁律三：不小于 24px */
  --panel-pad: 20px;   /* 面板内边距 */
  --gap: 24px;         /* 面板之间的留白，同样不小于 24px */

  /* ---- 圆角与阴影 ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* ---- 结构高度 ---- */
  --topbar-h: 78px;
  --footer-h: 30px;

  color-scheme: dark;
}

html[data-fontsize="s"] { --fs-base: 13.5px; }
html[data-fontsize="m"] { --fs-base: 15px; }
html[data-fontsize="l"] { --fs-base: 16.5px; }

/* ---- 浅色主题 ---- */
html[data-theme="light"] {
  --c-bg: #eef2f7;
  --c-bg-top: #ffffff;
  --c-panel: #ffffff;
  --c-panel-2: #f4f7fb;
  --c-panel-3: #e7eef7;
  --c-line: rgba(20, 45, 80, 0.12);
  --c-line-strong: #c6d5e6;

  --c-blue: #1f6fd0;
  --c-blue-dim: rgba(31, 111, 208, 0.12);
  --c-gold: #b07c06;
  --c-gold-dim: rgba(176, 124, 6, 0.12);
  --c-red: #cc3239;
  --c-red-dim: rgba(204, 50, 57, 0.12);
  --c-mint: #12885b;
  --c-mint-dim: rgba(18, 136, 91, 0.12);
  --c-slate: #52708f;
  --c-slate-dim: rgba(82, 112, 143, 0.12);

  --c-text: #10243d;
  --c-text-2: #40597a;
  /* T46 对比度：浅色主题下次要文字原来是 #6d84a2，压在 --c-bg (#eef2f7) 上只有 3.41:1、
     压在白底面板上 3.84:1，两处都不到 4.5:1；改成 #596c85 之后分别是 4.78:1 与 5.37:1，
     仍明显浅于正文第二档 --c-text-2（白底 7.17:1），层次没有被拉平。 */
  --c-text-3: #596c85;
  --c-text-on-accent: #ffffff;

  /* 口径角标两档（浅色）：胶囊底最暗的一处是 --c-slate-dim 叠在 --c-panel-3 上（#dbe2eb），
     原来的 #6d84a2 只有 2.95:1；「教学取值待审定」那一档原来用 --c-gold (#b07c06)，
     压在 --c-gold-dim 胶囊上 3.16:1。这两个数只改角标自己的令牌，--c-gold 一个字没动。 */
  --c-cite-text: #52637a;      /* 最差一处 4.70:1 */
  --c-cite-pending: #8b6205;   /* 最差一处 4.72:1 */

  --shadow-1: 0 2px 10px rgba(20, 45, 80, 0.10);
  --shadow-2: 0 12px 40px rgba(20, 45, 80, 0.18);

  color-scheme: light;
}

/* ---- 基础重置 ---- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  overflow: hidden;           /* 1366×768 内不出现任何方向的滚动条，滚动只发生在面板内部 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding-left: 1.2em; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--c-blue); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }