/* ============================================================
   tokens.css —— 机擎FEX 落地页（fex_web2）设计令牌 · 唯一变量源
   ------------------------------------------------------------------
   规则：
   1) 全站颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效曲线 一律引用本文件变量；
      其它 CSS 文件内**不允许出现任何字面色值**（一律 var()）。
   2) 品牌色数值与 fex_web/css/tokens.css 完全一致，保持两站视觉血缘。
   3) 唯一例外：@media 条件值（CSS 变量不可用于媒体查询），必须写字面量。

   ── 统一断点表（媒体查询必须写字面量）──
   | 断点 | 字面量                                 | 用途                              |
   | XL  | @media (max-width: 1440px)             | 超宽屏留白 / 巨字号微调           |
   | L   | @media (max-width: 1200px)             | 多列 → 2 列                       |
   | M   | @media (max-width: 1024px)             | 3 列 → 2 列；页脚堆叠             |
   | N   | @media (max-width: 900px)              | 导航折叠为全屏菜单                |
   | S   | @media (max-width: 768px)              | 动效降级：关视差 / 解粘性         |
   | XS  | @media (max-width: 480px)              | 单列、按钮全宽、内边距收紧        |
   | 降级 | @media (prefers-reduced-motion:reduce) | 关闭全部动效，直接显示最终态      |
   ============================================================ */

:root {
  /* ---------- 1. 品牌色（PRD 固定，禁止替换） ---------- */
  --brand-blue:    #387bf6;
  --brand-purple:  #885bf6;
  --brand-cyan:    #16b1d6;
  --success:       #22c55e;

  /* 提亮版（渐变文字 / 描边 / 光斑，深底可读性用） */
  --brand-blue-lt:   #6ea2ff;
  --brand-purple-lt: #b18bff;
  --brand-cyan-lt:   #5fd8f0;

  /* ---------- 2. 背景层次（L0 → L3） ---------- */
  --bg-deep:       #0a0e17;   /* L0 深空底（起） */
  --bg-deep-2:     #0d1220;   /* L0 深空底（止） */
  --bg-void:       #05070c;   /* 宣言屏 / 粘性叙事场：比 L0 更深的纯黑场 */
  --bg-void-2:     #020306;   /* 纯黑场水平渐变的另一端 */
  --bg-alt:        #141414;   /* 页脚 / 深色通栏 */
  --bg-l1-a:       #10151f;   /* L1 区块底 A */
  --bg-l1-b:       #0f131c;   /* L1 区块底 B */
  --bg-l2:         rgba(255, 255, 255, 0.03);   /* L2 卡片底 */
  --bg-l2-grad:    linear-gradient(180deg, rgba(56, 123, 246, 0.10), rgba(20, 26, 38, 0.60));
  --bg-l3:         rgba(56, 123, 246, 0.08);    /* L3 悬浮态背景 */
  --bg-scrim:      rgba(10, 14, 23, 0.82);      /* 导航磨砂底 */

  /* ---------- 3. 文字层级 ---------- */
  --text-1:        #ffffff;
  --text-2:        #999999;
  --text-3:        #8a8f99;
  --text-muted:    #999999;
  --text-sub:      #8a8f99;
  --text-on-brand: #ffffff;
  --text-dim:      rgba(255, 255, 255, 0.62);   /* 深黑场里的极简辅助字 */
  --text-faint:    rgba(255, 255, 255, 0.34);   /* 序号 / 提示 */

  /* ---------- 4. 边框 / 分隔线 ---------- */
  --border-1:      rgba(255, 255, 255, 0.06);
  --border-footer: rgba(255, 255, 255, 0.04);
  --border-card:   rgba(56, 123, 246, 0.18);
  --border-accent: rgba(56, 123, 246, 0.35);
  --border-hover:  rgba(56, 123, 246, 0.45);
  --grid-line:     rgba(56, 123, 246, 0.07);
  --hair:          rgba(255, 255, 255, 0.10);   /* 细描边（玻璃层） */

  /* ---------- 5. 渐变 ---------- */
  --grad-primary:   linear-gradient(135deg, #387bf6 0%, #885bf6 100%);
  --grad-secondary: linear-gradient(135deg, #16b1d6 0%, #387bf6 100%);
  --grad-text:      linear-gradient(135deg, #6ea2ff 0%, #b18bff 100%);
  --grad-body-bg:   linear-gradient(180deg, #0a0e17 0%, #0d1220 100%);
  /* Hero 巨字渐变：白 → 冷蓝 → 紫，深底上极亮 */
  --grad-hero-text: linear-gradient(112deg, #ffffff 0%, #dbe7ff 26%, #8fb4ff 58%, #b18bff 88%);
  /* 宣言屏渐变：几乎纯白，只在尾部带一点冷调 */
  --grad-manifesto: linear-gradient(96deg, #ffffff 0%, #ffffff 46%, #c9d9ff 74%, #b9a6ff 100%);
  /* 巨字数字：白 → 青 → 蓝 */
  --grad-num:       linear-gradient(150deg, #ffffff 0%, #a9cbff 58%, #387bf6 100%);

  /* ---------- 6. 遮罩 / 压暗（图片上叠字用） ---------- */
  --scrim-bottom:   linear-gradient(180deg, rgba(5, 7, 12, 0) 0%, rgba(5, 7, 12, 0.74) 64%, rgba(5, 7, 12, 0.97) 100%);
  /* 左右压暗：保证图上半透明区域的正文对比度 ≥ 4.5:1 */
  --scrim-left:     linear-gradient(90deg, rgba(5, 7, 12, 0.97) 0%, rgba(5, 7, 12, 0.93) 34%, rgba(5, 7, 12, 0.72) 56%, rgba(5, 7, 12, 0.30) 78%, rgba(5, 7, 12, 0.04) 100%);
  --scrim-right:    linear-gradient(270deg, rgba(5, 7, 12, 0.97) 0%, rgba(5, 7, 12, 0.93) 34%, rgba(5, 7, 12, 0.72) 56%, rgba(5, 7, 12, 0.30) 78%, rgba(5, 7, 12, 0.04) 100%);
  --scrim-plate:    linear-gradient(180deg, rgba(5, 7, 12, 0.10) 0%, rgba(5, 7, 12, 0.34) 55%, rgba(5, 7, 12, 0.88) 100%);
  /* mask：让图片边缘溶进暗场（苹果式「产品悬浮」） */
  --mask-soft:      radial-gradient(ellipse 96% 88% at 50% 44%, #000 40%, rgba(0, 0, 0, 0) 100%);
  --mask-plate:     radial-gradient(ellipse 108% 100% at 50% 46%, #000 58%, rgba(0, 0, 0, 0) 100%);
  /* 全透明中间色（供渐变遮罩里的「透明端」引用，避免组件层写死色值） */
  --bg-transparent: rgba(10, 14, 23, 0);
  --vignette:       radial-gradient(ellipse 90% 70% at 50% 40%, rgba(10, 14, 23, 0) 40%, #0a0e17 100%);
  --fade-top:       linear-gradient(180deg, #0a0e17 0%, rgba(10, 14, 23, 0) 22%);

  /* ---------- 7. 玻璃 / 卡片层 ---------- */
  --glass-1:       rgba(255, 255, 255, 0.045);
  --glass-2:       rgba(255, 255, 255, 0.085);
  --glass-blue:    rgba(56, 123, 246, 0.10);

  /* ---------- 8. 辉光 ---------- */
  --glow-radial:   radial-gradient(circle, rgba(56, 123, 246, 0.28) 0%, transparent 70%);
  --glow-cyan:     radial-gradient(circle, rgba(22, 177, 214, 0.22) 0%, transparent 70%);
  --glow-purple:   radial-gradient(circle, rgba(136, 91, 246, 0.20) 0%, transparent 70%);
  --glow-size:     min(720px, 70vw);
  --glow-blur:     80px;
  --glow-sm:       0 0 40px rgba(56, 123, 246, 0.25);

  /* ---------- 9. 字号阶梯 ---------- */
  /* 巨字号：上限均 > 100px，移动端 clamp 到可读范围 */
  --fs-mega:       clamp(38px, 7.6vw, 112px);   /* Hero 主标题 */
  --fs-manifesto:  clamp(30px, 5.8vw, 86px);    /* 宣言屏 */
  --fs-giant:      clamp(46px, 6.4vw, 96px);    /* 数字看板 */
  --fs-endcta:     clamp(30px, 5.0vw, 76px);    /* 结尾 CTA */
  --fs-scene:      clamp(28px, 3.4vw, 46px);    /* 粘性叙事标题 */
  --fs-commission: clamp(30px, 4.4vw, 60px);    /* 三级分佣大字号 */

  --fs-display: clamp(36px, 5.2vw, 64px);
  --fs-h1:      clamp(32px, 4.2vw, 48px);
  --fs-h2:      clamp(26px, 3.2vw, 40px);
  --fs-h3:      clamp(20px, 2.2vw, 24px);
  --fs-h4:      clamp(18px, 1.6vw, 20px);
  --fs-body-l:  clamp(16px, 1.4vw, 18px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  /* 行高 */
  --lh-mega:    1.06;
  --lh-display: 1.1;
  --lh-h1:      1.15;
  --lh-h2:      1.25;
  --lh-h3:      1.35;
  --lh-h4:      1.40;
  --lh-body-l:  1.7;
  --lh-body:    1.8;
  --lh-small:   1.6;
  --lh-caption: 1.5;

  /* 字重 */
  --fw-black:    800;
  --fw-bold:     700;
  --fw-semibold: 600;
  --fw-normal:   400;

  /* 字体栈（断网自动降级到系统字体） */
  --font-sans: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- 10. 间距刻度（8px 基准） ---------- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-15: 120px;
  --sp-block-head: 48px;
  --sp-title-gap:  16px;
  --section-py: clamp(64px, 8vw, 120px);

  /* ---------- 11. 圆角 ---------- */
  --radius-lg:   20px;
  --radius-md:   16px;
  --radius-btn:  10px;
  --radius-pill: 999px;
  --radius-sm:   6px;
  --radius-img:  12px;

  /* ---------- 12. 阴影 ---------- */
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 32px rgba(56, 123, 246, 0.20);
  --shadow-btn:        0 8px 24px rgba(56, 123, 246, 0.35);
  --shadow-btn-hover:  0 12px 32px rgba(56, 123, 246, 0.50);
  --shadow-nav:        0 1px 0 rgba(56, 123, 246, 0.20), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-plate:      0 40px 120px rgba(0, 0, 0, 0.72), 0 0 120px rgba(56, 123, 246, 0.14);
  --shadow-drawer:     -16px 0 48px rgba(0, 0, 0, 0.55);

  /* ---------- 13. 布局 ---------- */
  --container:       1280px;
  --container-tight: 1040px;
  --gutter:          clamp(20px, 2.5vw, 32px);
  --nav-h:           72px;
  --grid-gap:        24px;
  --card-gap:        clamp(16px, 2vw, 24px);

  /* ---------- 14. 动效 ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  /* 苹果官网常用揭示曲线 */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal:    0.6s;
  --dur-reveal-lg: 1.1s;
  --dur-hover:     0.25s;
  --dur-nav:       0.3s;
  --dur-count:     1.2s;
  --dur-breath:    20s;   /* Hero 极缓慢呼吸缩放 */

  /* 局部变量默认值（由 .reveal-group / .line-group 的 nth-child 与 .w-* 工具类覆盖） */
  --d: 0s;                /* 错峰延迟 */
  --w: 1;                 /* 数据条进度比例 */

  --z-progress: 1200;
  --z-nav:      1000;
  --z-drawer:   1100;

  /* ---------- 15. 补充令牌（消灭组件层硬编码色值） ---------- */
  --danger:             #ff6b6b;
  --ring-brand:         rgba(56, 123, 246, 0.18);
  --bg-drawer:          rgba(5, 7, 12, 0.97);
  --overlay-bg:         rgba(10, 14, 23, 0.72);
  --line-on-brand:      rgba(255, 255, 255, 0.08);
  --text-on-brand-soft: rgba(255, 255, 255, 0.88);
  --border-on-brand:    rgba(255, 255, 255, 0.55);
  --bg-on-brand-hover:  rgba(255, 255, 255, 0.14);
  --bg-l2-strong:       rgba(255, 255, 255, 0.08);   /* 对比条「人工」填充 */
  --media-grad:         linear-gradient(135deg, rgba(56, 123, 246, 0.14), rgba(136, 91, 246, 0.10));
  /* 进度条 / 数据条轨道 */
  --track:              rgba(255, 255, 255, 0.07);
  --scrollbar-thumb:    rgba(56, 123, 246, 0.35);
  --scrollbar-track:    rgba(255, 255, 255, 0.03);
  --shadow-text:        0 2px 24px rgba(0, 0, 0, 0.75);   /* 图上小字的可读性阴影 */
}

/* ============================================================
   D-02 · 大屏断点（≥1440px 视口）
   左右留白锁定 32px、区块留白取上限 120px、辉光取规格上限 900px
   ============================================================ */
@media (min-width: 1440px) {
  :root {
    --gutter:     32px;
    --section-py: 120px;
    --glow-size:  900px;
    --container:  1280px;
  }
}