/* ============================================================
   巨学问官网 · 设计令牌（Design Tokens）
   ------------------------------------------------------------
   全站唯一真源。所有页面、所有组件只允许引用这里的变量，
   禁止在组件里写裸色值 / 裸字号 / 裸间距。
   修改此文件 = 全站换肤。

   依据：《视觉与组件分册》§一「视觉设计系统」
   色值严格取自 §1.1 色彩体系；排版遵循 §1.2 字体与排版。
   间距刻度与「一屏内容量」规范见《巨学问官网 · 设计系统手册》页面。
   ============================================================ */

:root{
  /* ============================================================
     1. 品牌色 —— 依据设计方案 4.1 色彩体系
     ============================================================ */
  --c-navy:        #1A2A4A;   /* 主色 · 深蓝/藏青（文档色值①） */
  --c-navy-2:      #2C3E6B;   /* 主色浅态 / 渐变次色（文档色值②） */
  --c-navy-deep:   #131F36;   /* 深底（Hero / CTA / 页脚）——主色加深 */
  --c-navy-soft:   #3A5183;   /* hover / 次级强调 */
  --c-navy-tint:   #EAEEF5;   /* 主色浅底（图标容器、标签） */
  --c-navy-tint-2: #F0F7FF;   /* 主色浅底·更浅一档 —— 详情页摘要方框 + 正文「提示」语义框（大纲《资讯中心详情页》V1.5 指定 #F0F7FF） */
  --c-navy-bright: #17406F;   /* 主色亮端 —— 深色渐变的收尾色（配图占位块） */

  --c-gold:        #C9A84C;   /* 点缀色 · 品质金（文档色值①） */
  --c-gold-dark:   #A8873A;
  --c-gold-tint:   #FBF5E8;
  --c-gold-ink:    #7A6224;
  --c-gold-on-dark:#FFE9C9;   /* 深底浅金 —— 深色底上的强调文字（配图占位块） */

  --c-orange:      #E8922E;   /* 点缀色备选 · 橙（文档色值②） */
  --c-orange-tint: #FDF2E6;

  /* 注：客服组件 V1.2 起不再使用专属蓝，背景回归品牌深蓝 --c-navy / --c-navy-2（见大纲 GQRiFy23B7qIKI4A9rvUXq） */

  /* 保留：仅用于「违规示例 / 警示」等非品牌场景，不作品牌强调色 */
  --c-red:         #C0342C;
  --c-red-dark:    #A02A23;
  --c-red-tint:    #FDEEED;

  /* ---------- 语义色（深底上的文字） ---------- */
  --on-dark:       #ffffff;
  --on-dark-2:     rgba(255,255,255,.84);
  --on-dark-3:     rgba(255,255,255,.66);
  --on-dark-line:  rgba(255,255,255,.16);
  --on-dark-fill:  rgba(255,255,255,.07);
  --on-dark-fill-2:rgba(255,255,255,.12);

  /* ============================================================
     2. 中性色 —— 正文 #333333、背景 #FFFFFF / #F5F7FA
     ============================================================ */
  --ink:      #333333;  /* 正文色（文档指定，保证长文阅读舒适） */
  --ink-2:    #5A6472;  /* 次级文本 */
  --ink-3:    #8A94A3;  /* 辅助文本 / 占位 */
  --line:     #E4E8EF;  /* 分隔线 */
  --line-2:   #EEF1F6;  /* 弱分隔线 */
  --line-3:   #D8E1EE;  /* 浅蓝描边 */
  --bg:       #FFFFFF;
  --bg-soft:  #F5F7FA;  /* 浅灰背景（文档指定） */
  --bg-soft-2:#EDF1F7;

  --success: #1D7A4D;
  --warn:    #B8730F;

  /* ============================================================
     3. 字体与排版 —— 依据 4.2 字体与排版
        非衬线体（思源黑体 / PingFang SC），优先易读性
     ============================================================ */
  --font-sans: "PingFang SC","Source Han Sans SC","Noto Sans CJK SC",
               "Microsoft YaHei","Hiragino Sans GB",
               -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-num: "DIN Alternate","Bahnschrift",Impact,var(--font-sans);

  /* ---- 字号阶梯（PC 基准） ---- */
  --fs-display: 50px;   /* Hero 主标题 */
  --fs-h1:      32px;   /* 屏标题（section h2） */
  --fs-h2:      26px;   /* 移动端屏标题 */
  --fs-h3:      20px;   /* 卡片标题 */
  --fs-h4:      17px;   /* 小标题 / 表格行标题 */
  --fs-lead:    19px;   /* 屏导语 / Hero 副标题 */
  --fs-body:    16px;   /* 正文基准（移动端不小于 16px） */
  --fs-sm:      14.5px; /* 辅助说明 */
  --fs-xs:      13px;   /* 标签 / 面包屑 / 表头 */
  --fs-eyebrow: 13px;   /* 屏眉标 */
  --fs-slide:   40px;   /* 首屏幻灯标题（《幻灯组件 · 页面大纲》V1.0 §5.1：PC 36-42px） */

  --fw-normal:400; --fw-medium:600; --fw-bold:700; --fw-black:800;

  /* ---- 行高（行间距）—— 中文阅读以 1.75 为正文基准 ---- */
  --lh-tight: 1.30;   /* 大标题 Hero / h1 */
  --lh-snug:  1.45;   /* 卡片标题 h3 */
  --lh-head:  1.55;   /* 小标题 h4 */
  --lh-body:  1.75;   /* 正文 —— 16px × 1.75 = 28px 行高 */
  --lh-lead:  1.80;   /* 导语 / 引言 */
  --lh-sm:    1.65;   /* 小字说明 */
  --lh-flat:  1.20;   /* 按钮 / 标签 / 数字 */

  /* ============================================================
     4. 间距刻度（8px 基准）
        屏与屏、段落与段落、元素与元素，全部从此刻度取值
     ============================================================ */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-7:28px;  --sp-8:32px;
  --sp-9:40px;  --sp-10:48px; --sp-11:56px; --sp-12:64px;
  --sp-13:80px; --sp-14:96px; --sp-15:120px; --sp-16:64px;

  /* ============================================================
     5. 版面节奏（屏间距 / 段间距）—— 本规范的核心
        仅在 tokens 层定义，组件层一律引用，不写断点
     ============================================================ */

  /* 屏与屏之间：section 上下内边距 */
  --sect-pad:     96px;              /* PC 标准屏间距 */
  --sect-pad-lg:  120px;             /* 章节首屏 / 需要强调的分隔 */
  --sect-pad-sm:  72px;              /* 紧凑屏（表格屏、入口屏） */

  /* 屏内：眉标 → 标题 → 导语 → 内容 的纵向节奏 */
  --sect-head-gap: 16px;             /* 眉标与标题之间 */
  --sect-sub-gap:  20px;             /* 标题与导语之间 */
  --sect-body-gap: 48px;             /* 导语（或标题）与内容主体之间 */

  /* 段落与段落 */
  --para-gap:      16px;             /* 正文段落之间 */
  --para-gap-tight:12px;             /* 卡片内 / 紧凑区段落之间 */
  --list-gap:      8px;              /* 列表项之间 */

  /* 内容单元（卡片 / 列）之间 */
  --cell-gap:      24px;             /* 标准网格间距 */
  --cell-gap-lg:   32px;             /* 大卡片网格间距 */

  /* ============================================================
     6. 圆角
     ============================================================ */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;

  /* ============================================================
     7. 阴影
     ============================================================ */
  --sh-1: 0 1px 2px rgba(26,42,74,.06), 0 2px 8px rgba(26,42,74,.05);
  --sh-2: 0 4px 12px rgba(26,42,74,.07), 0 12px 32px rgba(26,42,74,.07);
  --sh-3: 0 10px 40px rgba(19,31,54,.14);
  --sh-gold: 0 6px 18px rgba(201,168,76,.28);
  --sh-red: 0 6px 18px rgba(192,52,44,.26);

  /* ============================================================
     8. 布局 —— 行宽控制是排版规范的一部分
        正文每行 ≤ 60-75 字符（中文约 38-45 字）
     ============================================================ */
  --maxw:        1200px;  /* 页面容器 */
  --maxw-narrow: 820px;   /* 窄栏：导语 / 长文 */
  --maxw-text:   760px;   /* 正文最佳行宽容器 */
  --gutter:      32px;
  --gutter-sm:   20px;
  /* 页头（《页头组件 · 页面大纲》§五）：两行式 = 第一行 64 + 第二行 48 = 112。
     两个数的来源（2026-10-17 定，别再往上飘）：
       · 64 = Material 的 app bar 标准高，也是 logo 块（40.1）能留出上下各 12 的地板 ——
         压到 60 就只剩 10，logo 会顶到行边。
       · 48 = 导航/标签条标准高；点击区 48 仍高于 WCAG 2.5.5（AAA）的 44。
       · 112 = 14 × 8，落在 8pt 网格上。
     ★ 三层令牌：改某一层的高度只动 --hdr-top-h / --hdr-nav-h，--header-h 自动跟随 ——
       避免「改了这层忘了那层」；.nav__link 的高度也直接引 --hdr-nav-h（不再写死数字）。
     移动端（≤1080）折叠为单行：--hdr-nav-h 归 0 ⇒ --header-h 自动 = 64，不需要另写覆盖。
     ⚠️ 改这里会连坐移动端（折叠档的页头高 = 本令牌），也会改变全站「一屏可用高」
        （calc(100svh - var(--header-h))）。 */
  --hdr-top-h:   64px;
  --hdr-nav-h:   48px;
  --header-h:    calc(var(--hdr-top-h) + var(--hdr-nav-h));

  /* ============================================================
     9. 动效
     ============================================================ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s; --dur:.24s; --dur-slow:.6s;

  /* ============================================================
     10. 层级
     ============================================================ */
  --z-base:1; --z-float:90; --z-drop:95; --z-header:100; --z-drawer:99; --z-modal:200;
}

/* ============================================================
   响应式令牌覆写
   规则：只在这里改令牌，组件层不写断点。
   ============================================================ */
@media (max-width:1080px){
  :root{
    /* 页头折叠为单行（导航与 CTA 一并进抽屉）：第二行高归 0 ⇒ --header-h 自动 = 72。
       ⚠️ 覆写断点必须与汉堡 / 抽屉断点同为 1080 —— 否则会出现「页头 128 + 抽屉从 128 起」的空档。 */
    --hdr-nav-h:0px;
    --fs-display:40px;
    --fs-slide:36px;
    --sect-pad:76px;  --sect-pad-lg:92px; --sect-pad-sm:60px;
    --sect-body-gap:40px;
    --cell-gap:20px;  --cell-gap-lg:24px;
  }
}
@media (max-width:860px){
  :root{
    --fs-display:33px;  --fs-h1:26px;  --fs-lead:17px;
    --fs-slide:28px;
    --sect-pad:60px;    --sect-pad-lg:72px; --sect-pad-sm:48px;
    --sect-body-gap:32px;
    --para-gap:14px;
    --gutter:var(--gutter-sm);
  }
}
@media (max-width:520px){
  :root{
    --fs-display:27px;
    --fs-slide:26px;
    --sect-pad:48px;  --sect-pad-lg:56px; --sect-pad-sm:40px;
    --sect-body-gap:28px;
  }
}