/* ============================================================
   tokens.css — 设计令牌（全站唯一来源）
   取自 Ardot 设计稿《植物大战僵尸版本合集官网·游戏化改版》A 版
   色值已逐对核算对比度，深底三级文字全部 ≥ WCAG AA（见交付说明）
   ============================================================ */
:root {
  /* ---------- 底色 / 面 ---------- */
  --bg:           #0A120C;  /* 页面底 */
  --bg-footer:    #070D08;  /* 页脚底 */
  --surface:      #0E1A10;  /* 卡片 */
  --surface-head: #121F13;  /* 卡片头 / 分组头 */
  --surface-alt:  #101C12;  /* 斑马行 */
  --line:         #1E2E1E;  /* 分隔线 */

  /* ---------- 品牌绿：按「用途」拆，不合并 ---------- */
  --brand:        #8FE04A;  /* 只做填充：按钮底 / 选中片底 / 徽标底 */
  --brand-on:     #0A120C;  /* 压在填充上的字（11.8:1） */
  --brand-ink:    #8FE04A;  /* 只做文字：深底上的链接与强调（11.8:1） */
  --brand-mark:   #8FE04A;  /* 只做图形：圆点 / 图标描边（11.8:1） */
  --brand-surface:#163828;  /* 浅色品牌底（徽标底） */
  --brand-soft:   rgba(143, 224, 74, .15);   /* 图标块底 */
  --brand-line:   rgba(143, 224, 74, .30);   /* 描边款按钮 */

  /* ---------- 版本五色（装饰与兜底用，均已过 AA） ---------- */
  --g-gen1:     #8FE04A;  /* 一代改版 */
  --g-gen2:     #4ECDC4;  /* 二代改版 */
  --g-official: #FFC24B;  /* 官方正史 */
  --g-spinoff:  #B58CFF;  /* 衍生玩法 */
  --g-tools:    #8FA39B;  /* 工具开源 */

  /* ---------- 语义色 ---------- */
  --amber:   #FFC24B;  /* 提示条 / 体量数字 / 警示 */
  --teal:    #4ECDC4;  /* Windows 平台点 */
  --violet:  #B58CFF;  /* macOS 平台点 */
  --red:     #FF6B6B;  /* 风险备注（已停更等） */
  --dot-off: #C9D8C4;  /* iOS 平台点（中性） */
  --amber-soft: rgba(255, 194, 75, .10);
  --red-soft:   rgba(255, 107, 107, .10);

  /* ---------- 文字三级（深底，全站唯一） ---------- */
  --text:       #F2F7EE;  /* 标题       16.9:1 */
  --text-body:  #9DB39B;  /* 正文       8.2:1  */
  --text-muted: #7E937B;  /* 辅助小字   5.6:1  */
  --text-on-img:#F2F7EE;

  /* ---------- 字号 ---------- */
  --fs-hero:    58px;   /* 首页 Hero 主标题 */
  --fs-title-xl:44px;   /* 页面大标题 */
  --fs-title-lg:40px;   /* 内容页标题 */
  --fs-title-md:30px;   /* 首页区块标题 */
  --fs-title-sm:26px;   /* 内页区块标题 */
  --fs-card:    17px;
  --fs-lead:    16px;
  --fs-body:    15px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     12px;
  --fs-3xs:     11px;

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-body:  1.7;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;   --sp-2: 6px;   --sp-3: 8px;   --sp-4: 10px;
  --sp-5: 12px;  --sp-6: 14px;  --sp-7: 16px;  --sp-8: 18px;
  --sp-9: 20px;  --sp-10: 22px; --sp-11: 24px; --sp-12: 28px;
  --sp-13: 32px; --sp-14: 36px; --sp-15: 44px; --sp-16: 56px;
  --sp-17: 72px;

  /* ---------- 圆角 ---------- */
  --r-pill: 999px;
  --r-btn:  12px;
  --r-card: 16px;
  --r-card-sm: 12px;
  --r-block: 14px;
  --r-chip: 6px;
  --r-badge: 8px;

  /* ---------- 内容宽度（全站唯一三档，护栏按这三档考核） ---------- */
  --w-container: 1120px;   /* 所有区块 / 栅格 / 卡片用它 */
  /* 长文段：容器有 1120px，但中文正文行��超过 ~45 字就很难读眼（回扫时容易串行）。
     实测 1120px 下正文一行能塞 50+ 汉字，明显偏宽——这里收到 720（约 48 字），
     视觉上仍是「宽正文」，但眼睛能锁定行尾。护栏按这三档考核，改这里等于改其中一档。 */
  --w-prose:720px;
  --w-lead:       820px;   /* 首屏导语类居中长句，窄于容器更易读 */

  /* ---------- 版式节奏 ---------- */
  --gutter: 24px;         /* 容器左右内边距 */
  --section-gap: 72px;    /* 区块之间的纵向间距 */
  --header-h: 72px;
  --anchors-h: 44px;      /* 详情页锚点条内容高（底边框 1px 另计）；
                             它与 --header-h 一起构成 sticky 叠层总高，
                             锚点跳转的 scroll-margin 从这里算，改高要同步 */
  --nav-h: 64px;          /* 移动端导航条 */
}

/* 笔记本：容器吃满，靠 gutter 留边 —— 与设计稿 1440/160 边距等效 */
@media (max-width: 1240px) {
  :root { --gutter: 32px; }
}

/* 平板：区块节奏与字号整体降一档 */
@media (max-width: 1024px) {
  :root {
    --fs-hero:     42px;
    --fs-title-xl: 36px;
    --fs-title-lg: 34px;
    --fs-title-md: 26px;
    --fs-title-sm: 22px;
    --section-gap: 56px;
    --gutter: 28px;
  }
}

/* 手机：再降一档，区块间距收紧 */
@media (max-width: 560px) {
  :root {
    --fs-hero:     32px;
    --fs-title-xl: 28px;
    --fs-title-lg: 26px;
    --fs-title-md: 22px;
    --fs-title-sm: 19px;
    --fs-card:     16px;
    --fs-lead:     15px;
    --section-gap: 44px;
    --gutter: 18px;
    --header-h: 60px;
  }
}