/* ==========================================================================
   设计令牌：编辑器、教程、作业三个页面共用。
   由 scripts/build.mjs 从 src/design/tokens.ts 生成，请勿直接修改（npm run build）。
   图纸（画布）始终是浅色纸面：与教材、投影、PNG 导出保持一致，深色主题只改变界面外壳。
   ========================================================================== */

:root {
  color-scheme: light;

  /* 字体、字号、间距、圆角、控件、动效 */
  --font-sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-2xs: 2px;
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --ctl-h: 34px;
  --ctl-h-sm: 28px;
  --touch: 44px;
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, .2);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, .18);

  /* 界面层：浅色主题 */
  --bg: #eceff4;
  --bg-accent: radial-gradient(1200px 500px at 12% -10%, rgba(98, 70, 234, .07), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(49, 123, 181, .06), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #edf1f6;
  --surface-hover: #f1f4f8;
  --glass: rgba(255, 255, 255, .8);
  --glass-strong: rgba(255, 255, 255, .92);
  --border: #dde3eb;
  --border-strong: #c7d0dc;
  --divider: #e7ebf0;
  --text: #16233a;
  --text-2: #3f4f66;
  --text-3: #647389;
  --text-4: #929eb0;
  --text-on-accent: #ffffff;
  --accent: #6246ea;
  --accent-hover: #5337d6;
  --accent-soft: #f0ecff;
  --accent-soft-2: #e5ddff;
  --accent-line: #cdc1fb;
  --accent-ink: #4a31c0;
  --accent-fill: #6246ea;
  --accent-fill-hover: #5337d6;
  --v: #317bb5;
  --v-soft: #e4f0fa;
  --v-line: #b7d3ea;
  --v-ink: #235f8d;
  --h: #bd7a1d;
  --h-soft: #fcf1dc;
  --h-line: #e2c48f;
  --h-ink: #85570f;
  --w: #2c8970;
  --w-soft: #e0f2ec;
  --w-line: #a7d6c6;
  --w-ink: #206b57;
  --section: #d9480f;
  --section-soft: #fff1ea;
  --section-line: #f5cdb9;
  --section-ink: #9a3a0c;
  --section-fill: #c2410c;
  --ok: #1d8a5a;
  --ok-soft: #e3f5ec;
  --ok-line: #a7d6c6;
  --warn: #b97613;
  --warn-soft: #fdf3e2;
  --warn-ink: #85570f;
  --danger: #cc4a61;
  --danger-soft: #fdeef1;
  --danger-line: #f0c1ca;
  --paper: #fdfefe;
  --paper-2: #f9fbfc;
  --paper-edge: #d6dee7;
  --shadow-1: 0 1px 2px rgba(18, 30, 50, .06), 0 1px 1px rgba(18, 30, 50, .03);
  --shadow-2: 0 8px 24px -6px rgba(18, 30, 50, .12), 0 2px 6px rgba(18, 30, 50, .05);
  --shadow-3: 0 28px 70px -12px rgba(18, 30, 50, .3), 0 8px 20px rgba(18, 30, 50, .08);
  --scrim: rgba(16, 24, 40, .42);
  --focus-ring: 0 0 0 3px rgba(98, 70, 234, .3);

  /* 纸面浮层（固定浅色） */
  --float-bg: rgba(255, 255, 255, .9);
  --float-bg-soft: rgba(255, 255, 255, .78);
  --float-border: rgba(170, 182, 198, .6);
  --float-shadow: 0 8px 22px -8px rgba(18, 30, 50, .22), 0 1px 3px rgba(18, 30, 50, .08);
  --float-ink: #16233a;
  --float-text: #33455e;
  --float-muted: #647389;
  --float-faint: #a4aebb;
  --float-rule: #cfd6df;
  --float-field: #ffffff;
  --float-field-border: #dde3eb;
  --float-dot: #c7d0dc;
  --float-accent: #6246ea;
  --float-accent-hover: #5337d6;
  --float-accent-soft: #f0ecff;
  --float-accent-line: #cdc1fb;
  --float-accent-ink: #4a31c0;
  --float-accent-ring: 0 0 0 3px rgba(98, 70, 234, .18);
  --float-note-bg: #fcf1dc;
  --float-note-ink: #85570f;

  /* 反色表面（固定深色） */
  --inverse-bg: #121a27;
  --inverse-bg-glass: rgba(16, 24, 38, .9);
  --inverse-bg-hover: #16233a;
  --inverse-text: #e8edf5;
  --inverse-strong: #ffffff;
  --inverse-muted: #b6c1d1;
  --inverse-faint: #8e9aad;
  --inverse-line: rgba(255, 255, 255, .08);
  --inverse-line-strong: rgba(255, 255, 255, .2);
  --inverse-hover: rgba(255, 255, 255, .12);
  --inverse-press: rgba(255, 255, 255, .18);
  --inverse-accent: rgba(139, 116, 255, .35);
  --inverse-accent-line: rgba(189, 177, 233, .6);
  --inverse-accent-ink: #cfc4ff;
  --inverse-badge: rgba(22, 35, 58, .78);
  --inverse-shadow: 0 16px 40px -12px rgba(4, 8, 16, .55);
  --spotlight-scrim: rgba(6, 10, 18, .58);

  /* 图纸配色（固定） */
  --draw-ink: #21344f;
  --draw-v: #317bb5;
  --draw-h: #bd7a1d;
  --draw-w: #2c8970;
  --draw-point: #7455d2;
  --draw-line: #253b59;
  --draw-outline: #1f2d3d;
  --draw-active: #c9841d;
  --draw-select: #c8485e;
  --draw-broken: #b23a48;
  --draw-analysis: #2f7f8f;
  --draw-section: #d9480f;
  --draw-axis: #7b858e;
  --draw-guide: #8b95a0;
  --draw-annotation: #8a5b12;
  --draw-paper: #fdfefe;

  /* 旧变量名 */
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --muted: var(--text-3);
  --line: var(--border);
  --purple: var(--accent);
  --amber: var(--h);
  --font: var(--font-sans);
  --mono: var(--font-mono);
}

/* ---------- 深色主题：跟随系统，或由 data-theme 手动指定 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1219;
    --bg-accent: radial-gradient(1200px 520px at 10% -10%, rgba(139, 116, 255, .12), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(90, 162, 220, .08), transparent 60%);
    --surface: #151b25;
    --surface-2: #1a212d;
    --surface-3: #212a38;
    --surface-hover: #232c3b;
    --glass: rgba(21, 27, 37, .78);
    --glass-strong: rgba(21, 27, 37, .94);
    --border: #273142;
    --border-strong: #364256;
    --divider: #222b39;
    --text: #e8edf5;
    --text-2: #bcc6d4;
    --text-3: #8e9aad;
    --text-4: #647085;
    --accent: #8b74ff;
    --accent-hover: #9d8aff;
    --accent-soft: rgba(139, 116, 255, .15);
    --accent-soft-2: rgba(139, 116, 255, .24);
    --accent-line: rgba(139, 116, 255, .45);
    --accent-ink: #c7bbff;
    --accent-fill: #7059f0;
    --accent-fill-hover: #6a52ec;
    --v: #5aa2dc;
    --v-soft: rgba(90, 162, 220, .16);
    --v-line: rgba(90, 162, 220, .4);
    --v-ink: #9fcbef;
    --h: #e0a04a;
    --h-soft: rgba(224, 160, 74, .16);
    --h-line: rgba(224, 160, 74, .4);
    --h-ink: #f0c47f;
    --w: #4cb592;
    --w-soft: rgba(76, 181, 146, .16);
    --w-line: rgba(76, 181, 146, .4);
    --w-ink: #8ad7bc;
    --section: #ff7a45;
    --section-soft: rgba(255, 122, 69, .13);
    --section-line: rgba(255, 122, 69, .4);
    --section-ink: #ffb08f;
    --ok: #43c386;
    --ok-soft: rgba(67, 195, 134, .15);
    --ok-line: rgba(67, 195, 134, .4);
    --warn: #e0a04a;
    --warn-soft: rgba(224, 160, 74, .14);
    --warn-ink: #f0c47f;
    --danger: #ff7b91;
    --danger-soft: rgba(255, 123, 145, .13);
    --danger-line: rgba(255, 123, 145, .4);
    --paper: #f6f5f1;
    --paper-2: #f1efe9;
    --paper-edge: #3a4456;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 10px 28px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-3: 0 30px 80px -14px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .35);
    --scrim: rgba(3, 6, 12, .62);
    --focus-ring: 0 0 0 3px rgba(139, 116, 255, .42);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1219;
  --bg-accent: radial-gradient(1200px 520px at 10% -10%, rgba(139, 116, 255, .12), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(90, 162, 220, .08), transparent 60%);
  --surface: #151b25;
  --surface-2: #1a212d;
  --surface-3: #212a38;
  --surface-hover: #232c3b;
  --glass: rgba(21, 27, 37, .78);
  --glass-strong: rgba(21, 27, 37, .94);
  --border: #273142;
  --border-strong: #364256;
  --divider: #222b39;
  --text: #e8edf5;
  --text-2: #bcc6d4;
  --text-3: #8e9aad;
  --text-4: #647085;
  --accent: #8b74ff;
  --accent-hover: #9d8aff;
  --accent-soft: rgba(139, 116, 255, .15);
  --accent-soft-2: rgba(139, 116, 255, .24);
  --accent-line: rgba(139, 116, 255, .45);
  --accent-ink: #c7bbff;
  --accent-fill: #7059f0;
  --accent-fill-hover: #6a52ec;
  --v: #5aa2dc;
  --v-soft: rgba(90, 162, 220, .16);
  --v-line: rgba(90, 162, 220, .4);
  --v-ink: #9fcbef;
  --h: #e0a04a;
  --h-soft: rgba(224, 160, 74, .16);
  --h-line: rgba(224, 160, 74, .4);
  --h-ink: #f0c47f;
  --w: #4cb592;
  --w-soft: rgba(76, 181, 146, .16);
  --w-line: rgba(76, 181, 146, .4);
  --w-ink: #8ad7bc;
  --section: #ff7a45;
  --section-soft: rgba(255, 122, 69, .13);
  --section-line: rgba(255, 122, 69, .4);
  --section-ink: #ffb08f;
  --ok: #43c386;
  --ok-soft: rgba(67, 195, 134, .15);
  --ok-line: rgba(67, 195, 134, .4);
  --warn: #e0a04a;
  --warn-soft: rgba(224, 160, 74, .14);
  --warn-ink: #f0c47f;
  --danger: #ff7b91;
  --danger-soft: rgba(255, 123, 145, .13);
  --danger-line: rgba(255, 123, 145, .4);
  --paper: #f6f5f1;
  --paper-2: #f1efe9;
  --paper-edge: #3a4456;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 28px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-3: 0 30px 80px -14px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .35);
  --scrim: rgba(3, 6, 12, .62);
  --focus-ring: 0 0 0 3px rgba(139, 116, 255, .42);
}

/* ---------- 三个页面共用的站点导航 ---------- */
.site-nav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.site-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: var(--r-pill); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.site-nav a:hover { color: var(--accent-ink); background: var(--accent-soft); }
.site-nav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.site-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }