/* ==========================================================================
   掌域 GEO 官网 · 设计令牌（tokens.css）
   2026-10-09 改版：参考 maidouai.com 现代 SaaS 风格（用户口径），
   主蓝沿用掌域品牌蓝 #1677FF，紫 #722ED1 作渐变辅色。
   （原《首页设计标注文档 v1》的克制规则——仅 400/500 字重、禁渐变、
     仅描边卡片、深色块限 CTA——已随本轮改版作废。）

   走查红线（改动前先读）：
   1. 颜色一律取自本文件变量，禁止散落字面量（例外：页面内联 SVG 的 <defs> 渐变）
   2. 断点只有 1199 / 767 两个，禁止新增第三个
   3. 渐变（--gradient-brand / 光斑）只用于点缀：渐变文字、按钮投影、示意图面积、hero 光斑
   4. 深色底（--color-surface-strong）仅页脚使用；深底链接 hover 必须用 #69B1FF 系
      （#1677FF 在深灰底对比度约 3.6:1 不达标）
   ========================================================================== */

:root{
  /* —— 色彩 —— */
  --color-primary:#1677FF;                        /* 品牌主蓝 */
  --color-primary-strong:#0958D9;                 /* 主按钮 hover */
  --color-primary-soft:rgba(22,119,255,.10);      /* pill 徽章底 / 图标块底 */
  --color-violet:#722ED1;                         /* 渐变辅色 */
  --gradient-brand:linear-gradient(135deg,#1677FF 0%,#722ED1 100%);
  --color-glow-blue:rgba(22,119,255,.12);         /* hero 光斑 */
  --color-glow-violet:rgba(114,46,209,.10);

  --color-text-primary:#1D2129;
  --color-text-secondary:#4E5969;
  --color-text-tertiary:#86909C;
  --color-success:#009A5B;                         /* 定价表 ✓ / 年付立省（2026-10-29） */

  --color-border:#E5E6EB;
  --color-border-soft:#F2F3F5;
  --color-surface:#FFFFFF;
  --color-surface-muted:#F7F8FA;                  /* 浅灰分块底 */
  --color-surface-strong:#1D2129;                 /* 深色页脚 */

  /* 反白系列（深色页脚） */
  --color-on-strong:#FFFFFF;
  --color-on-strong-soft:rgba(255,255,255,.65);
  --color-on-strong-line:rgba(255,255,255,.16);
  --color-on-strong-link:#69B1FF;

  /* —— 字体与字阶（字重放开 400/500/600/700）—— */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-size-h1:clamp(2.25rem,4.5vw,4rem); --lh-h1:1.15;  /* 仅 hero H1（系数按「品牌可见度检测工具」9 字整行不拆词校准） */
  --font-size-h2:clamp(1.8rem,3vw,2.5rem); --lh-h2:1.25;   /* 区块标题 */
  --font-size-h3:1.25rem;                  --lh-h3:1.4;    /* 卡标题 / 模块名 */
  --font-size-lead:1.125rem;               --lh-lead:1.7;
  --font-size-body:1rem;                   --lh-body:1.75;
  --font-size-caption:.875rem;             --lh-caption:1.7;
  --font-size-xs:.75rem;                   --lh-xs:1.5;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* —— 间距 —— */
  --space-4:4px;  --space-8:8px;  --space-12:12px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-80:80px;
  --section-gap:80px;   /* 区块纵向节奏，≤767 → 64 */
  --card-gap:32px;      /* 卡片网格间距 */
  --card-pad:24px;      /* 卡片内边距，≤767 → 20 */
  --nav-h:64px;

  /* —— 圆角 —— */
  --radius-4:4px; --radius-6:6px; --radius-8:8px; --radius-10:10px; --radius-12:12px;
  --radius-full:9999px;

  /* —— 阴影 —— */
  --shadow-card:0 4px 20px rgba(0,0,0,.05);
  --shadow-card-hover:0 12px 32px rgba(22,38,77,.10);
  --shadow-btn:0 8px 20px rgba(22,119,255,.25);
  --shadow-nav:0 1px 8px rgba(0,0,0,.06);

  /* —— 容器与断点 —— */
  --container-max:1280px;  /* ≥1200 时的内容宽（不含左右留白） */
  --page-pad:32px;         /* ≥1200 → 32；768–1199 → 24；≤767 → 16 */
  --gutter:32px;           /* 网格水槽（与 --card-gap 同值） */
}

/* 平板 768–1199 */
@media (max-width:1199px){
  :root{ --page-pad:24px; --card-gap:24px; --gutter:24px; }
}

/* 移动 <768 */
@media (max-width:767px){
  :root{
    --page-pad:16px; --card-gap:20px; --gutter:20px;
    --section-gap:64px; --card-pad:20px;
  }
}