/* AI 阅读器 · Design Tokens（单一视觉源 · AGENTS.md 落地）
   WHY：阅读器是「长文听读」工具，视觉基调＝护眼暖白 + 克制配色 + 正文大字宽行高，
        与参考项目 ai-math 的儿童游戏化完全不同（AGENTS.md 已声明不照搬）。
        所有页面只引用本文件的 token、禁止硬编码色值/字号/间距、禁止 inline style（X7）。 */
:root {
  /* ── 表面色：暖白打底，长时间阅读不刺眼 ── */
  --bg: #FAF9F7;             /* 页面背景（与 manifest/theme-color 一致）*/
  --surface: #FFFFFF;        /* 正文卡片 / 弹层背景 */
  --surface-sunken: #F1EEE9; /* 凹陷区：输入框、控制条底、chip */
  --border: #E7E2DB;         /* 分隔线 / 描边 */

  /* ── 文字色：暖灰阶，主次分明 ── */
  --text-primary: #2D2A26;   /* 正文主色（当前句、标题）*/
  --text-secondary: #6B6560; /* 次要：英文原文对照、说明 */
  --text-muted: #A39C94;     /* 提示 / 占位 / 已读句弱化 */

  /* ── 强调 & 语义色 ── */
  --accent: #C2563B;         /* 主操作按钮 + 当前朗读句强调（暖橙红，醒目但不刺眼）*/
  --accent-weak: #FBEDE8;    /* 当前句高亮的背景块 */
  --accent-ink: #FFFFFF;     /* 强调底色上的文字 */
  --speaking: #C2563B;       /* 朗读中状态色（呼应 accent）*/
  --listening: #2F8F6B;      /* 录音 / 监听中（C2/C3 语音指令预留）*/
  --error: #C0392B;          /* 出错 */
  --success: #2F8F6B;        /* 成功 / 完成 */

  /* ── 字体与字号：正文可读性第一，听读区更大 ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --fs-display: 1.625rem;    /* 品牌大标题 */
  --fs-title: 1.125rem;      /* 顶栏 / 区块标题 */
  --fs-read: 1.25rem;        /* 听读正文（偏大、宜读）*/
  --fs-body: 1.0625rem;      /* 常规正文 / 按钮 */
  --fs-sm: 0.9375rem;        /* 次要文字 */
  --fs-xs: 0.8125rem;        /* 标签 / 角标 */
  --lh-tight: 1.35;
  --lh-body: 1.6;
  --lh-read: 1.9;            /* 听读区宽行高，逐句扫读不累 */

  /* ── 间距：8px 网格 ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── 圆角 / 阴影 ── */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(45, 42, 38, .08);
  --shadow-2: 0 6px 20px rgba(45, 42, 38, .14);

  /* ── 布局 ── */
  --content-max: clamp(320px, 92vw, 680px); /* 正文宽度流式缩放（少用断点）*/
  --control-h: 72px;          /* 底部控制条高度 */
  --tap-min: 44px;            /* iOS 最小可点尺寸（手眼被占场景手指友好）*/

  /* ── 动效 ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;
  --dur: .25s;

  /* iOS 安全区（刘海 / home indicator）*/
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── 桌面「手机框」预览外壳（仅大屏 ≥600px 生效；手机端无框、原生全屏）── */
  --frame-outer: #33312E;     /* 框外衬底：暖深灰，衬托出中间的手机 */
  --frame-body: #1C1C1E;      /* 手机机身黑边 */
  --frame-body-edge: #3A3A3C; /* 机身外缘高光描边 */
  --frame-radius: 46px;       /* 手机外壳圆角 */
}

/* 夜间自动护眼：深色暖灰，保持低对比不刺眼（系统切暗色时生效）*/
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1A18;
    --surface: #252320;
    --surface-sunken: #2E2B27;
    --border: #38342F;
    --text-primary: #ECE7DF;
    --text-secondary: #B5AEA4;
    --text-muted: #8A837A;
    --accent: #E0795F;
    --accent-weak: #3A2B25;
    --accent-ink: #1B1A18;
    --speaking: #E0795F;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, .5);
    --frame-outer: #050505;    /* 暗色下框外用近黑，让深色屏幕从背景浮起来 */
  }
}