/* ============================================================
   LingoStep 设计 token —— 全站唯一出处（详细设计 §9.1, DD-12）
   页面与组件只引用变量；design-lint 禁止在其它文件硬写色值/字号。
   色值与 40题v2.pptx 同源：人文墨。

   配色修订 v2 · 2026-11-07
   - 主题作用域提升到 <html>，修复 body 继承浅色墨字导致的深底深字；
   - 新增 --on-accent / --on-accent-warm / --on-toast / --accent-*-hover
     等语义变量，实心强调块不再硬写白字；
   - 两主题的文字层级统一到 WCAG AA：正文 ≥4.5:1，大字 ≥3:1。
   网站 v3–v6（AI 助教、精讲升级、选项常驻、AI 富文本）沿用本 v2 配色基线，未改动任何色值。
   ============================================================ */
:root {
  /* 底色与表面 */
  --bg-paper: #F7F4EC;
  --surface-card: #FFFFFF;
  --surface-card-2: #FBF9F4;
  --surface-hover: #F1EDE3;
  --surface-sunken: #EFEBE1;
  --surface-dark: #1B3048;
  --surface-claim: #FBF1E9;
  --surface-toast: #14263E;

  /* 文字 */
  --ink: #1E2B38;
  --ink-deep: #14263E;
  --ink-soft: #3F4A55;
  --muted: #5C6874;
  --on-dark: #F7F4EC;
  --on-dark-soft: #C7D3DE;    /* 恒为深色 Hero 上的次级文字，不随主题翻转 */
  --on-accent: #FFFFFF;       /* 深青 / 深红实心块上的文字 */
  --on-accent-warm: #14212B;  /* 金色实心块上的文字（两主题都用深墨） */
  --on-toast: #F7F4EC;

  /* 强调 */
  --accent-red: #A8351A;
  --accent-red-soft: #F3DCD3;
  --accent-red-hover: #8A2A14;
  --accent-teal: #2F6874;
  --accent-teal-soft: #DCEAEC;
  --accent-teal-hover: #244F58;
  --accent-gold: #B08D57;
  --accent-gold-soft: #F1E7D3;
  --accent-gold-hover: #8E6D3E;
  --accent-gold-ink: #73572A;  /* 金色作小字时的深一档，保证浅底可读 */

  /* 线与状态 */
  --border-rule: #DCD7CB;
  --border-strong: #C7C0B1;
  --focus-ring: #2F6874;
  --ok: #2F6874;
  --warn: #B08D57;
  --err: #A8351A;

  /* 线索着色（仅底纹/下划线，不改字色） */
  --clue-repeat: rgba(47, 104, 116, .16);
  --clue-reason: rgba(176, 141, 87, .20);
  --clue-emotion: rgba(168, 53, 26, .14);

  /* 字阶：由根字号统一乘算 */
  --font-scale: 1;
  --fs-display: calc(40px * var(--font-scale));
  --fs-h1: calc(32px * var(--font-scale));
  --fs-h2: calc(23px * var(--font-scale));
  --fs-h3: calc(19px * var(--font-scale));
  --fs-body: calc(17px * var(--font-scale));
  --fs-english: calc(18px * var(--font-scale));
  --fs-caption: calc(14px * var(--font-scale));
  --fs-micro: calc(13px * var(--font-scale));
  --lh-body: 1.65;
  --lh-english: 1.75;
  --font-zh: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-en: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* 8pt 网格 */
  --space-1: 12px;
  --space-2: 18px;
  --space-3: 24px;
  --space-4: 32px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-tag: 4px;
  --content-max: 1280px;
  --sidebar-w: 268px;
  --topbar-h: 64px;
  --ai-w: 340px;

  /* 动效：全部 ≤200ms，每条有语义；prefers-reduced-motion 归零 */
  --motion-select: 120ms ease-out;
  --motion-expand: 180ms ease-in-out;
  --motion-error: 120ms ease-out 1;
  --motion-success: 160ms ease-out;
  --motion-spotlight: 200ms ease-in-out;
  --motion-fade: 150ms linear;
}

/* 主题挂在 <html> 上：body 与 #app 外的浮层也会拿到正确的变量。
   原生控件（输入框、滚动条、下拉）随之切换，避免深色页面里冒出白底控件。 */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

[data-theme="dark"] {
  --bg-paper: #141C26;
  --surface-card: #1C2734;
  --surface-card-2: #202C3A;
  --surface-hover: #263444;
  --surface-sunken: #101720;
  --surface-dark: #0E1824;
  --surface-claim: #33231E;
  --surface-toast: #2B3B4C;

  /* 深色下的文字不用纯白，降低长时间阅读的刺眼感，仍保持 ≥7:1 */
  --ink: #E9EEF2;
  --ink-deep: #F3F6F8;
  --ink-soft: #CBD5DD;
  --muted: #A9B6C2;
  --on-dark: #F2F0E9;
  --on-dark-soft: #C7D3DE;
  --on-accent: #10202C;       /* 亮青 / 亮红 / 亮金实心块上改用深墨字 */
  --on-accent-warm: #14212B;
  --on-toast: #F2F6F8;

  --accent-red: #E89076;
  --accent-red-soft: #4A2A22;
  --accent-red-hover: #F2A892;
  --accent-teal: #87C6D0;
  --accent-teal-soft: #1F3D44;
  --accent-teal-hover: #A5DFE7;
  --accent-gold: #DCBE90;
  --accent-gold-soft: #3B3223;
  --accent-gold-hover: #EBD2A8;
  --accent-gold-ink: #DCBE90;

  --border-rule: #354353;
  --border-strong: #506275;
  --focus-ring: #87C6D0;
  --clue-repeat: rgba(135, 198, 208, .22);
  --clue-reason: rgba(220, 190, 144, .22);
  --clue-emotion: rgba(232, 144, 118, .20);
}

/* 投屏变体：强制正文下限、禁用细线、焦点环加粗（UX-4） */
[data-mode="projection"] {
  --fs-body: max(18px, calc(17px * var(--font-scale)));
  --fs-english: max(20px, calc(18px * var(--font-scale)));
  --focus-ring-width: 3px;
}
:root { --focus-ring-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-select: 0ms; --motion-expand: 0ms; --motion-error: 0ms;
    --motion-success: 0ms; --motion-spotlight: 0ms; --motion-fade: 0ms;
  }
}