/* ═══════════════════════════════════════════════════════════
 * 交附嘉分规划台 · Design Tokens v1
 * 单一来源：本文件即 token 源，纯 CSS、无构建，页面直接 import。
 * 主题：color-scheme 驱动（light / dark），语义层同时给出双值。
 * 纪律：组件只引用语义层（--bg-* / --text-* / --border-*），
 *       原始色板（--raw-*）与轨道色（--lane-*）不得直接用于大面积铺色。
 * ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── 1. 原始色板 · 中性 ───────────────────────────── */
  --raw-ink-950: #0b0c10;
  --raw-ink-900: #12141a;
  --raw-ink-800: #1a1d24;
  --raw-ink-700: #2a2e37;
  --raw-gray-50: #f7f8fa;
  --raw-gray-100: #f1f3f6;
  --raw-gray-200: #e6e9ee;
  --raw-gray-300: #d5dae2;
  --raw-gray-400: #a9b1bd;
  --raw-gray-500: #7b8492;
  --raw-gray-600: #58606d;
  --raw-gray-700: #3d444f;

  /* ── 2. 原始色板 · 品牌与语义 ─────────────────────── */
  --raw-brand: #5b5ce2;
  --raw-brand-hover: #4b4cd1;
  --raw-brand-press: #4041b4;
  --raw-success: #0b7a54;
  --raw-warning: #9a5b00;
  --raw-danger: #c22b2b;

  /* ── 3. 轨道色（五条线）· 仅用于 4px 标记 / 2px 折线 ── */
  --lane-math: light-dark(#2f6bff, #6ea1ff);
  --lane-english: light-dark(#7c4dff, #b18cff);
  --lane-science: light-dark(#0b7a54, #3ecf98);
  --lane-chinese: light-dark(#9a5b00, #f0a54a);
  --lane-defense: light-dark(#c22b2b, #ff8085);

  /* ── 4. 画布与面 ─────────────────────────────────── */
  /* 只有三层：canvas（底）→ surface（内容）→ inset（凹槽） */
  --bg-canvas: light-dark(#f5f6f8, #0d0f13);
  --bg-surface: light-dark(#ffffff, #15181e);
  --bg-subtle: light-dark(#f7f8fa, #1b1f26);
  --bg-inset: light-dark(#eef1f5, #23272f);
  --bg-hover: light-dark(rgba(11, 12, 16, 0.035), rgba(255, 255, 255, 0.05));
  --bg-active: light-dark(rgba(11, 12, 16, 0.07), rgba(255, 255, 255, 0.08));
  --bg-overlay: light-dark(rgba(255, 255, 255, 0.86), rgba(15, 17, 22, 0.86));

  /* ── 5. 描边 ─────────────────────────────────────── */
  --border-hair: light-dark(rgba(11, 12, 16, 0.08), rgba(255, 255, 255, 0.08));
  --border-strong: light-dark(rgba(11, 12, 16, 0.16), rgba(255, 255, 255, 0.18));

  /* ── 6. 文本 ─────────────────────────────────────── */
  --text-primary: light-dark(#12141a, #eceef2);
  --text-secondary: light-dark(#4a525e, #b4bac4);
  --text-tertiary: light-dark(#5f6874, #8b93a0); /* 最小可用灰，在三种表面上均 ≥4.5:1 */
  --text-disabled: light-dark(#a9b1bd, #5a616c);
  --text-inverse: light-dark(#ffffff, #0d0f13);
  --text-brand: light-dark(#4a4bcf, #9c9df8);

  /* ── 7. 交互色 ───────────────────────────────────── */
  --brand: light-dark(#5b5ce2, #8b8cf5);
  --brand-hover: light-dark(#4b4cd1, #9c9df8);
  --brand-soft: light-dark(#eeeefc, #1c1b33);
  --on-brand: light-dark(#ffffff, #0d0f13); /* 深色主题的品牌色偏亮，文字必须转深，否则只有 2.9:1 */
  --success: light-dark(#0b7a54, #4fd1a5);
  --success-soft: light-dark(#e8f5f0, #10261d);
  --warning: light-dark(#9a5b00, #f0a54a);
  --warning-soft: light-dark(#fdf3e3, #2a1e0e);
  --danger: light-dark(#c22b2b, #ff8a8a);
  --danger-soft: light-dark(#fbeded, #2b1919);
  --focus-ring: light-dark(#5b5ce2, #9c9df8);

  /* ── 8. 字体 ─────────────────────────────────────── */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "PingFang SC", monospace;

  /* 六档字阶：display / h1 / h2 / body / small / micro */
  --size-display: 40px;
  --lh-display: 1.05;
  --fw-display: 750;
  --ls-display: -0.035em;

  --size-h1: 22px;
  --lh-h1: 1.3;
  --fw-h1: 700;
  --ls-h1: -0.02em;

  --size-h2: 15px;
  --lh-h2: 1.45;
  --fw-h2: 650;
  --ls-h2: -0.01em;

  --size-body: 14px;
  --lh-body: 1.6;
  --fw-body: 400;
  --ls-body: 0;

  --size-small: 12.5px;
  --lh-small: 1.55;
  --fw-small: 500;
  --ls-small: 0.005em;

  --size-micro: 11px;
  --lh-micro: 1.4;
  --fw-micro: 650;
  --ls-micro: 0.06em;

  /* ── 9. 间距（4 基准，8 节奏）────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --page-gutter: 32px;
  --card-pad: 20px;
  --stack-gap: 16px;

  /* ── 10. 形状 ───────────────────────────────────── */
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-panel: 14px;
  --radius-pill: 999px;

  /* 只有两级高程：静置卡靠 hair 描边，浮层才投影 */
  --elev-1: 0 1px 2px light-dark(rgba(11, 12, 16, 0.05), rgba(0, 0, 0, 0.35));
  --elev-2: 0 2px 6px light-dark(rgba(11, 12, 16, 0.06), rgba(0, 0, 0, 0.45)),
    0 18px 40px -18px light-dark(rgba(11, 12, 16, 0.18), rgba(0, 0, 0, 0.6));

  /* ── 11. 控件尺寸（桌面 / 触摸）──────────────────── */
  --control-h-sm: 32px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  --tap-min: 44px;

  /* ── 12. 动效 ───────────────────────────────────── */
  --dur-micro: 120ms;
  --dur-base: 180ms;
  --dur-enter: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 860px) {
  :root {
    --page-gutter: 16px;
    --card-pad: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-base: 0ms;
    --dur-enter: 0ms;
  }
}