/* ==========================================================================
   tokens.css — 设计系统 CSS 变量（三主题共用定义）
   定稿来源：docs/reference/designs/2026-07-17-site-visual-redesign.md §3.3
   覆盖链：:root（成人浅色）→ prefers-color-scheme 自动暗色
           → .theme-kid（theme-kid.css）/ .theme-dark（theme-dark.css）
   ========================================================================== */

:root {
  /* ── 字体（D7：黑体标题 + 宋体正文，教科书式） ── */
  --font-heading: "PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --font-body: "Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --font-ui: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --font-mono: "SF Mono","Fira Code",Consolas,"Courier New",monospace;

  /* ── 颜色（成人浅色） ── */
  --bg: #fdfdfd;
  --card: #ffffff;
  --border: #e0e0e0;
  --text: #1a1a1a;
  --text-secondary: #595959;   /* 4.6:1 过 AA，替换旧 #888/#999/#aaa */
  --muted: #595959;            /* 别名：兼容旧 dark 页变量名 */
  --accent: #5b7fbf;
  --warn: #e65100;
  --ok: #2e7d32;
  --danger: #d32f2f;
  --expand: #2e7d32;           /* pipeline 语义色（dark 覆盖为 #3fb950） */
  --aware: #9a6700;            /* 骨架/注意（dark 覆盖为 #d2991d；入系统修复 P0） */
  --surface-soft: #fafafa;     /* feedback-section 等浅灰盒 */

  /* ── callout 语义色（全站固定映射：insight 琥珀 / bridge 蓝 / wrong 粉 / tip 绿） ── */
  --callout-insight-border: #f0b429;
  --callout-insight-bg: #fffdf5;
  --callout-bridge-border: #42a5f5;
  --callout-bridge-bg: #eef5fe;
  --callout-wrong-border: #ec407a;
  --callout-wrong-bg: #fdf2f6;
  --callout-tip-border: #66bb6a;
  --callout-tip-bg: #e8f5e9;

  /* ── skeleton-notice（骨架占位提示条） ── */
  --notice-bg: #fff3cd;
  --notice-border: #ffc107;
  --notice-text: #856404;

  /* ── 按钮变体（保留既有配色方案；dark 下覆盖保证对比度） ── */
  --btn-primary-fg: #1976d2;
  --btn-primary-bd: #42a5f5;
  --btn-primary-hover: #e3f2fd;
  --btn-done-fg: #388e3c;
  --btn-done-bd: #66bb6a;
  --btn-done-hover: #e8f5e9;
  --btn-save-fg: #7b1fa2;
  --btn-save-bd: #ab47bc;
  --btn-save-hover: #f3e5f5;

  /* ── 标题层级（修复 P1：字重 + 字号斜坡；font 简写） ── */
  --h1: 700 1.5rem/1.3 var(--font-heading);
  --h2: 600 1.15rem/1.4 var(--font-heading);
  --h3: 600 0.95rem/1.5 var(--font-heading);
  --body-size: 1.02rem;
  --body-leading: 1.9;

  /* ── 触控 ── */
  --tap-min: 44px;

  /* ── 圆角 / 阴影 / 间距 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 8px;          /* kid 主题覆盖为 16px */
  --shadow-card: none;         /* kid 主题覆盖为柔和投影 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ── 成人主题自动暗色（D5）────────────────────
   kid 仅浅色：.theme-kid token 覆盖后于本文件加载，压回浅色。
   theme-dark 常暗页用 .theme-dark 类（见 theme-dark.css）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1b1e;
    --card: #24262b;
    --border: #3a3d44;
    --text: #e8e8e8;
    --text-secondary: #b0b3b9;   /* 暗底 ≥4.5:1 */
    --muted: #b0b3b9;
    --accent: #8ba7d9;
    --warn: #ef6c00;             /* 暗底 5.4:1（原 #e65100 仅 3.4:1） */
    --ok: #66bb6a;
    --danger: #f85149;
    --expand: #3fb950;
    --aware: #d2991d;
    --surface-soft: #24262b;

    --callout-insight-border: #d2991d;
    --callout-insight-bg: rgba(210,153,29,0.10);
    --callout-bridge-border: #58a6ff;
    --callout-bridge-bg: rgba(88,166,255,0.08);
    --callout-wrong-border: #f85149;
    --callout-wrong-bg: rgba(248,81,73,0.08);
    --callout-tip-border: #3fb950;
    --callout-tip-bg: rgba(63,185,80,0.08);

    --notice-bg: rgba(210,153,29,0.10);
    --notice-border: #d2991d;
    --notice-text: #d2991d;

    --btn-primary-fg: #58a6ff;
    --btn-primary-bd: #58a6ff;
    --btn-primary-hover: rgba(88,166,255,0.10);
    --btn-done-fg: #3fb950;
    --btn-done-bd: #3fb950;
    --btn-done-hover: rgba(63,185,80,0.10);
    --btn-save-fg: #d2a8ff;
    --btn-save-bd: #bc8cff;
    --btn-save-hover: rgba(188,140,255,0.10);
  }
}