/* ============================================================================
   设计 Tokens —— 全站唯一的配色 / 尺寸 / 字体来源
   改品牌色：只需改 --brand-1 / --brand-2 / --brand-3
   改左右安全距离：只改 --pad-x
   改左右分栏比例：只改 styles/detail.css 的 --grid-cols
   ========================================================================= */

:root {
  /* ---------- 底图（第 1 页与第 2 页共用的底图；换图只改这一行） ---------- */
  --bg-image: url("../images/bg-hero.jpg");
  --bg-fallback: #8e1207;                 /* 底图未加载时的兜底色 */
  /* 第 2 页底图上的浅色蒙版：越白越"退后"，调它控制第 2 页红色的浓淡 */
  --bg-veil: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.84) 0%,
    rgba(255, 255, 255, 0.90) 48%,
    rgba(255, 255, 255, 0.94) 100%
  );

  /* ---------- 品牌色（随底图改为中国红，与红色底图同族） ---------- */
  --brand-1: #ff6247;
  --brand-2: #d81f16;
  --brand-3: #9c0f06;
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);
  --brand-soft: rgba(216, 31, 22, 0.08);
  --brand-soft-2: rgba(216, 31, 22, 0.16);

  /* ---------- 金色点缀：只用于"叠在红底图之上"的细装饰 ----------
     红底上的红元素会消失，细节点缀统一走金色（红金配色） */
  --gold-1: #fff3d6;
  --gold-2: #ffc85a;
  --gold-3: #dd9c2b;
  --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);

  /* ---------- 第 1 页：封面（红色主视觉底图） ---------- */
  --cover-bg-0: #6d0a04;                  /* 兜底深红，与底图同调 */
  --cover-bg-1: #a11208;
  --cover-bg-2: #c81c10;
  --cover-ink: #ffffff;
  --cover-ink-2: rgba(255, 255, 255, 0.90);
  /* 0.64 在白卡上无碍，但叠在红色底图上实测只有 3.8–4.4:1，提到 0.78 */
  --cover-ink-3: rgba(255, 255, 255, 0.78);
  --cover-line: rgba(255, 255, 255, 0.22);
  --cover-glass: rgba(255, 255, 255, 0.10);
  --cover-glass-2: rgba(255, 255, 255, 0.17);
  --cover-glass-brd: rgba(255, 255, 255, 0.28);
  /* 压暗 / 深色玻璃的基色：取底图暗部的深红，避免出现"灰雾"与砖红浑浊感 */
  --cover-scrim: 52, 3, 0;

  /* 滑动提示：它悬在底图最亮的地面光带上（该区域平均亮度 165），
     深色玻璃在那里必然发浑浊，所以反向用白玻璃 + 深红字 */
  --hint-bg: rgba(255, 255, 255, 0.88);
  --hint-bg-2: rgba(255, 255, 255, 0.97);
  --hint-ink: var(--brand-3);
  --hint-ink-2: rgba(143, 13, 5, 0.68);
  --hint-line: rgba(143, 13, 5, 0.38);

  /* ---------- 第 2 页：详情（浅色内容） ---------- */
  --bg: #f1f4fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f9;
  --line: #e4e9f3;
  --line-2: #edf1f7;
  --ink: #0c1424;
  /* 三级灰阶整体压深一档：原 --ink-3 #8b97ac 在白底上仅 2.9:1，
     10px 的小字不达标；现三级在白底分别为 15.9 / 9.6 / 5.8:1，
     并且 --ink-3 叠在第 2 页的暖粉底图上仍有 ~5:1。 */
  --ink-2: #39455b;
  --ink-3: #5b6679;
  --ink-4: #8b94a5;

  /* ---------- 布局尺寸 ---------- */
  --shell-max: 1720px;
  --pad-x: clamp(20px, 4.2vw, 78px);      /* 左右安全距离（仅第 2 页；第 1 页满屏不使用） */
  --pad-y: clamp(16px, 2.4vh, 38px);      /* 上下安全距离（仅第 2 页；第 1 页满屏不使用） */
  --gap-cols: clamp(16px, 1.8vw, 34px);   /* 左右两栏间距 */
  /* 左右分栏比例在 styles/detail.css 的 --grid-cols 中调整（默认 0.7fr 2.3fr：
     左栏 = 基准 1/3 的 70%） */

  /* ---------- 圆角 ---------- */
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgba(12, 20, 36, 0.04), 0 4px 14px rgba(12, 20, 36, 0.05);
  --sh-2: 0 2px 6px rgba(12, 20, 36, 0.05), 0 14px 34px rgba(12, 20, 36, 0.08);
  --sh-3: 0 24px 60px rgba(12, 20, 36, 0.14);
  --sh-brand: 0 6px 22px rgba(190, 25, 16, 0.30);
  /* 第 1 页满屏后不再需要海报投影，保留供"窗口化海报"方案取用 */
  --sh-poster: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.44, 1);
  --dur-page: 760ms;
  --dur-panel: 380ms;
}

/* 强制降低动效（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}