/* ===========================================================================
   小米粒 UI 设计系统 v1.0  ·  ds.css  ·  2026-08-31
   ---------------------------------------------------------------------------
   ⛔ 这是全站配色与排版的**唯一真源**。新功能只许引用这里的 token，不许再写死色值。
      改颜色＝改这个文件，改完 /design 那页会自己变（它就是照这份渲染的）。

   为什么有这份东西：v139~v152 连着改了十几版配色，每次都漏几处——
   因为"什么颜色表示什么意思"从来没写下来过，只存在于一次次口头拍板里。
   用户 2026-08-31 原话：「我感觉现在是缺一套 UI design system，所以这个颜色有点乱用」。

   三条总规矩：
     ① **一个意思一个颜色**：位置、方向、状态、参照，各有各的色，不互相借用。
     ② **同一个数在哪都同色**：右表的「统一码数」跟左图的码数线必须一个颜色。
     ③ **形状分职责**：同一支绿，**纯文字＝方向**（+2.5），**芯片＝状态**（超前）——
        靠形状区分，不靠再造颜色。这样颜色才数得过来。
   =========================================================================== */

:root {
  /* ---------- ① 数据层 · 位置（这个孩子在进阶尺上走到哪） ---------------- */
  /* ⛔ 只给「位置」用：统一码数、码数位置、粗档区间、进度走到、文阶估值、蓝思估值，
     以及图上的码数线/点/数值/区间棒。**别的任何东西不许用这支色**（用户 8-31 拍板）。 */
  --ds-pos:        #4F52DB;   /* 白底 5.90:1 ✓ */
  --ds-pos-soft:   rgba(79,82,219,.12);   /* 置信带/区间连廊的淡填充 */
  --ds-pos-tint:   #F3F2FC;   /* 码数芯片底 */
  --ds-pos-line:   #D9D6F2;   /* 码数芯片边 */

  /* ---------- ② 数据层 · 方向（涨还是跌，只表示变化） -------------------- */
  /* 纯文字使用。图形（柱/线）用 -fill 那一支，它更亮但只需 3:1。 */
  --ds-up:         #1E7A50;   /* 白底 5.31:1 ✓ 文字安全 */
  --ds-up-fill:    #2FA56E;   /* 图形用 */
  --ds-down:       #B3403A;   /* 白底 5.66:1 ✓ */
  --ds-down-fill:  #E0584E;
  --ds-flat:       #6B6F86;   /* 无变化/暂无 */

  /* ---------- ③ 数据层 · 状态（对课标四档，**只以芯片出现**） ------------ */
  /* 判定＝这次的位置离本年级课标线差多少，半个年级档一档（见 unified_scale_config.standard_band）。
     ⚠️ 超前与"上涨"同色是**故意的**——方向感一致；靠形状区分（芯片 vs 纯文字）。 */
  --ds-band-ahead: #1E7A50;   /* 超前 */
  --ds-band-meet:  #2B6CB0;   /* 达标 5.42:1 ✓ */
  --ds-band-near:  #B45309;   /* 接近 5.02:1 ✓ */
  --ds-band-todo:  #B3403A;   /* 待补 */

  /* ---------- ④ 数据层 · 参照（课标标准，不是这个孩子的数） -------------- */
  --ds-std:        #5F6788;   /* 本年级档虚线与标签 5.55:1 ✓ */
  --ds-zone:       #E9EDF6;   /* 本学年课标进度带底色 */
  --ds-anchor:     #7E8CA3;   /* 考试锚虚线（图形 3.53:1 ✓；旧值 #94A3B8 只有 2.56 不够 3:1） */
  --ds-anchor-ink: #64748B;   /* 考试锚标签（文字 4.76:1 ✓） */

  /* ---------- ⑤ 中性（文字 / 线 / 底） ----------------------------------- */
  --ds-ink:        #202336;   /* 正文 15.5:1 */
  --ds-ink-2:      #414560;   /* 次要正文 9.35:1 */
  --ds-ink-3:      #6B6F86;   /* 说明文字 4.95:1 ✓ */
  --ds-ink-4:      #6E7392;   /* 弱提示 4.63:1 ✓（更早的 #8A8FB8 只有 3.13，正在迁移） */
  --ds-line:       #E4E6F0;   /* 分隔线 */
  --ds-line-2:     #EEF0F6;   /* 更淡的分隔 */
  --ds-surface:    #FFFFFF;   /* 卡面 */
  --ds-surface-2:  #F7F8FD;   /* 页底 / 次级底 */
  --ds-head-fill:  #EEF0FA;   /* 表头底 */

  /* ---------- ⑥ 界面层 · 品牌（**不参与数据表达**） ---------------------- */
  /* 页头、按钮、排序箭头。刻意避开 --ds-pos，好让"位置色"在页面上是独一份。 */
  --ds-brand:      #3A3CC0;
  --ds-brand-deep: #33366E;

  /* ---------- ⑦ 提示 / 警示（界面反馈，不是数据） ------------------------ */
  --ds-warn:       #B45309;
  --ds-alert:      #B91C1C;
  --ds-info-tint:  #EEF0FB;

  /* ---------- ⑧ 学科色（另一根轴：回答"哪一科"，不回答"多少"） ----------- */
  /* ⚠️ 这一组按**图形**用色定（圆点/柱/线，只需 3:1）。当学科名要作**文字**出现时，
     用 --ds-ink-2 打底、只让色块承担识别，别把这几支色直接当正文色。 */
  --ds-subj-chinese: #A8718C;
  --ds-subj-math:    #4F52DB;   /* 与位置色同值属历史遗留，见 /design 的「已知冲突」 */
  --ds-subj-english: #5D8AA0;
  --ds-subj-physics: #2FA56E;
  --ds-subj-chem:    #C77E2E;
  --ds-subj-politics:#0F766E;
  --ds-subj-history: #8A6D3B;
  --ds-subj-geo:     #2B6CB0;
  --ds-subj-bio:     #0F766E;

  /* ---------- ⑨ 字号层级（px） ------------------------------------------- */
  --ds-fs-card:   17px;   /* 卡标题 */
  --ds-fs-sec:    14px;   /* 区块标题 */
  --ds-fs-body:   13px;   /* 正文 */
  --ds-fs-table:  12.5px; /* 表格 */
  --ds-fs-note:   11.5px; /* 脚注小字 */
  --ds-fs-micro:  10.5px; /* 微标 */

  /* ---------- ⑩ 间距与圆角 ----------------------------------------------- */
  --ds-sp-1: 4px;  --ds-sp-2: 8px;  --ds-sp-3: 12px;  --ds-sp-4: 16px;  --ds-sp-5: 22px;
  --ds-r-card: 12px; --ds-r-chip: 9px; --ds-r-btn: 8px; --ds-r-bar: 5px;
}

/* 暗色：照 sw/form.css 的既有约定（系统跟随 + 手动切换两条都认）。
   ⚠️ 目前只有 /self /walk 那几页真的开了暗色；/ui /cockpit 尚未适配——见 /design 的「覆盖情况」。 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ds-pos:#9BA1F2; --ds-pos-soft:rgba(155,161,242,.16); --ds-pos-tint:#232750; --ds-pos-line:#3A3F6E;
  --ds-up:#4ADE80; --ds-up-fill:#4ADE80; --ds-down:#F87171; --ds-down-fill:#F87171; --ds-flat:#9498B5;
  --ds-band-ahead:#4ADE80; --ds-band-meet:#7DB6E8; --ds-band-near:#F59E5B; --ds-band-todo:#F87171;
  --ds-std:#A8ADC8; --ds-zone:#232750; --ds-anchor:#6B7391; --ds-anchor-ink:#9AA3BC;
  --ds-ink:#E8EAF6; --ds-ink-2:#C3C7DE; --ds-ink-3:#A8ADC8; --ds-ink-4:#878DAB;
  --ds-line:#2E3252; --ds-line-2:#262A46; --ds-surface:#1E2138; --ds-surface-2:#15172A; --ds-head-fill:#232750;
  --ds-brand:#9BA1F2; --ds-brand-deep:#C9CDFA; --ds-warn:#F59E5B; --ds-alert:#F87171; --ds-info-tint:#232750;
} }
:root[data-theme="dark"] {
  --ds-pos:#9BA1F2; --ds-pos-soft:rgba(155,161,242,.16); --ds-pos-tint:#232750; --ds-pos-line:#3A3F6E;
  --ds-up:#4ADE80; --ds-up-fill:#4ADE80; --ds-down:#F87171; --ds-down-fill:#F87171; --ds-flat:#9498B5;
  --ds-band-ahead:#4ADE80; --ds-band-meet:#7DB6E8; --ds-band-near:#F59E5B; --ds-band-todo:#F87171;
  --ds-std:#A8ADC8; --ds-zone:#232750; --ds-anchor:#6B7391; --ds-anchor-ink:#9AA3BC;
  --ds-ink:#E8EAF6; --ds-ink-2:#C3C7DE; --ds-ink-3:#A8ADC8; --ds-ink-4:#878DAB;
  --ds-line:#2E3252; --ds-line-2:#262A46; --ds-surface:#1E2138; --ds-surface-2:#15172A; --ds-head-fill:#232750;
  --ds-brand:#9BA1F2; --ds-brand-deep:#C9CDFA; --ds-warn:#F59E5B; --ds-alert:#F87171; --ds-info-tint:#232750;
}

/* ===========================================================================
   组件：只放**跨页面复用**的那几个。页面自己的排版仍写在页面里。
   =========================================================================== */

/* 芯片：卡头那一排小标（码数、距年级档、数据截至…） */
.ds-chip{display:inline-block;font-size:var(--ds-fs-note);line-height:1.9;padding:0 9px;
  border-radius:var(--ds-r-chip);border:1px solid var(--ds-line);color:var(--ds-ink-2);
  background:var(--ds-surface);white-space:nowrap}
.ds-chip.is-pos{background:var(--ds-pos-tint);color:var(--ds-pos);border-color:var(--ds-pos-line)}

/* 状态芯片：对课标四档。**状态只以这个形状出现**，不许当纯文字色用。 */
.ds-tag{display:inline-block;padding:1px 8px;border-radius:var(--ds-r-chip);
  font-size:var(--ds-fs-table);white-space:nowrap;font-weight:600}
.ds-tag.ahead{color:var(--ds-band-ahead);background:color-mix(in srgb,var(--ds-band-ahead) 12%,transparent)}
.ds-tag.meet {color:var(--ds-band-meet); background:color-mix(in srgb,var(--ds-band-meet) 12%,transparent)}
.ds-tag.near {color:var(--ds-band-near); background:color-mix(in srgb,var(--ds-band-near) 12%,transparent)}
.ds-tag.todo {color:var(--ds-band-todo); background:color-mix(in srgb,var(--ds-band-todo) 12%,transparent)}

/* 方向：纯文字，涨绿跌红 */
.ds-up{color:var(--ds-up);font-weight:600}
.ds-down{color:var(--ds-down);font-weight:600}
.ds-flat{color:var(--ds-flat)}

/* 位置读数：表格里的码数一族 */
.ds-pos-val{color:var(--ds-pos);font-weight:600}
.ds-pos-val.weak{opacity:.72;font-weight:400}

/* 脚注小字 */
.ds-note{font-size:var(--ds-fs-note);color:var(--ds-ink-3);line-height:1.75}

/* 条：得分率一类的绝对量，长度即读数（不表示与别人的比较） */
.ds-bar{position:relative;height:10px;border-radius:var(--ds-r-bar);background:var(--ds-line-2);overflow:hidden}
.ds-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--ds-r-bar);background:var(--ds-up-fill)}
.ds-bar>i.warn{background:var(--ds-band-near)}