/* ==========================================================================
   fenli.org 设计变量 v1（设计定稿用）
   - 浅色是默认值；系统深色时自动切换；<html data-theme="light|dark"> 可手动指定
   - .theme-light / .theme-dark 类用于局部强制某个主题（设计稿、预览）
   - 所有颜色组合已按 WCAG AA 检查：正文和按钮文字对比度 ≥ 4.5:1
   ========================================================================== */
:root, .theme-light {
  color-scheme: light;

  /* 品牌色：取自登录页矢量标识的渐变 #2a9bda → #0a6ea8 */
  --brand-400: #2a9bda;
  --brand-600: #0a6ea8;
  --brand-700: #085a8a;
  --brand-text: #0a6ea8;          /* 品牌名里的“电子” */
  --mark-1: #2a9bda;              /* 标识渐变 */
  --mark-2: #0a6ea8;

  /* 面与文字 */
  --bg: #f5f6f8;                  /* 页面底色 */
  --surface: #ffffff;             /* 卡片、导航、弹层 */
  --surface-2: #eef1f5;           /* 输入框、分段控件、悬停 */
  --surface-3: #e2e7ee;           /* 进度条底、分隔块 */
  --border: #e1e5eb;
  --border-strong: #ccd3dc;
  --text: #16191f;                /* 正文、标题 */
  --text-2: #4a5361;              /* 次要文字 */
  --text-3: #626b79;              /* 辅助文字：时间、计数，最小 13px */

  /* 交互 */
  --primary: #0a6ea8;             /* 主按钮、选中、链接 */
  --primary-hover: #085a8a;
  --on-primary: #ffffff;
  --primary-soft: #e6f1f9;        /* 选中底色、图标底 */
  --on-primary-soft: #0a5d8e;
  --link: #0a6ea8;
  --focus: #2a9bda;

  /* 状态 */
  --live: #9a5b00;                /* 直播中（琥珀，和蓝色明度不同） */
  --live-soft: #fff1d9;
  --success: #157347;
  --success-soft: #e2f4e9;
  --danger: #b42318;
  --danger-soft: #fdeceb;

  /* 毛玻璃：只用于顶栏、播放条、弹层 */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(22, 25, 31, 0.08);
  --glass-blur: 18px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
  --shadow-2: 0 10px 28px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.06);

  /* 经文高亮 */
  --hl-yellow: #fff0a3;
  --hl-green: #d4f4da;
  --hl-blue: #d7ebfb;
  --hl-rose: #fbdde4;
  --hl-purple: #e7defb;

  /* 特色主题（只改底色和强调色，导航、按钮、字体不变） */
  --night-bg: #0b1024;            /* 年代表、列王 */
  --night-surface: #151b38;
  --night-line: rgba(255, 255, 255, 0.08);
  --night-text: #e6e9f5;
  --night-text-2: #aab1cc;
  --night-accent: #f2c75c;
  --night-good: #7fd8a4;          /* 列王：行善（配图标和文字，不只靠颜色） */
  --night-evil: #ff9a8f;          /* 列王：行恶 */
  --paper-bg: #f7f3ea;            /* 福音单张、查考文章阅读 */
  --paper-text: #2a2620;
  --paper-line: rgba(42, 38, 32, 0.14);
  --paper-soft: rgba(42, 38, 32, 0.05);

  /* 字体：系统黑体，不从外部加载 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号（最小 13px） */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-display: 44px;             /* 只用于首页首屏 */
  --lh-tight: 1.3;
  --lh-body: 1.7;
  --fs-read: 19px;                /* 经文、查考文章、单张 */
  --lh-read: 1.85;
  --measure-read: 38em;           /* 每行约 38 个汉字 */

  /* 形状和间距 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;

  /* 布局和层级 */
  --container: 1200px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --player-h: 68px;
  --z-player: 90;
  --z-topbar: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-text: #5cb8ec;
    --mark-1: #6cc4f2;
    --mark-2: #2f9ad4;
    --bg: #0e1116;
    --surface: #161a21;
    --surface-2: #1d222b;
    --surface-3: #2a313c;
    --border: #262c36;
    --border-strong: #363e4b;
    --text: #e9ecf1;
    --text-2: #b7bfcc;
    --text-3: #8f99a8;
    --primary: #5cb8ec;
    --primary-hover: #7cc6f0;
    --on-primary: #04121c;
    --primary-soft: #13283a;
    --on-primary-soft: #9fd3f5;
    --link: #7cc6f0;
    --focus: #7cc6f0;
    --live: #f0b54a;
    --live-soft: #2e2311;
    --glass-bg: rgba(22, 26, 33, 0.86);
    --glass-border: rgba(255, 255, 255, 0.07);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
    --hl-yellow: rgba(250, 204, 21, 0.24);
    --hl-green: rgba(74, 222, 128, 0.2);
    --hl-blue: rgba(96, 165, 250, 0.24);
    --hl-rose: rgba(251, 113, 133, 0.22);
    --hl-purple: rgba(167, 139, 250, 0.24);
    --paper-bg: #1b1915;
    --paper-text: #e8e2d6;
    --paper-line: rgba(232, 226, 214, 0.14);
    --paper-soft: rgba(232, 226, 214, 0.06);
    --success: #5fcf8e;
    --success-soft: #12301f;
    --danger: #ff8a80;
    --danger-soft: #3a1714;
  }
}

:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --brand-text: #5cb8ec;
  --mark-1: #6cc4f2;
  --mark-2: #2f9ad4;
  --bg: #0e1116;
  --surface: #161a21;
  --surface-2: #1d222b;
  --surface-3: #2a313c;
  --border: #262c36;
  --border-strong: #363e4b;
  --text: #e9ecf1;
  --text-2: #b7bfcc;
  --text-3: #8f99a8;
  --primary: #5cb8ec;
  --primary-hover: #7cc6f0;
  --on-primary: #04121c;
  --primary-soft: #13283a;
  --on-primary-soft: #9fd3f5;
  --link: #7cc6f0;
  --focus: #7cc6f0;
  --live: #f0b54a;
  --live-soft: #2e2311;
  --glass-bg: rgba(22, 26, 33, 0.86);
  --glass-border: rgba(255, 255, 255, 0.07);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
  --hl-yellow: rgba(250, 204, 21, 0.24);
  --hl-green: rgba(74, 222, 128, 0.2);
  --hl-blue: rgba(96, 165, 250, 0.24);
  --hl-rose: rgba(251, 113, 133, 0.22);
  --hl-purple: rgba(167, 139, 250, 0.24);
  --paper-bg: #1b1915;
  --paper-text: #e8e2d6;
  --paper-line: rgba(232, 226, 214, 0.14);
  --paper-soft: rgba(232, 226, 214, 0.06);
  --success: #5fcf8e;
  --success-soft: #12301f;
  --danger: #ff8a80;
  --danger-soft: #3a1714;
}

/* ===== Compatibility aliases (fenli repo, P1-01) =====================
 * Names used by the previous static/css/tokens.css. The design tokens above
 * are authoritative; these exist only so older consumers keep resolving.
 * --radius-*: mapped to the closest design --r-* value
 *             (8->10, 12->14 [tie with 10; name-matched], 18->20, pill).
 * --space-*:  explicit previous px values (design --s-* scale differs from 5 up).
 * --fw-*:     explicit previous weights.
 * --fs-read / --lh-read / --measure-read are defined by the design tokens above.
 * New code should use --r-* / --s-* directly. */
:root {
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-pill: var(--r-pill);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
}