/* =============================================================================
 *  鹄得SCRM 官网 · tokens.css
 *  【第 1 层】全站唯一设计 token 源 + reset + 排版原子类 + 无障碍基线
 *
 *  铁律：
 *   1. 本文件是全站唯一允许书写原始档位（--brand-500 / #1869FF / #0B1220 等）的地方。
 *   2. layout.css / components.css / pages.css 只允许引用语义别名 --c-* 与尺寸类变量。
 *   3. 页面内禁止手写 font-size，必须使用本文件提供的 .t-* 排版原子类。
 *   4. 字重上限 700（系统字重）。
 *
 *  层级：原始档位 → 语义别名（--c-*）→ 尺寸 / 字阶 / 间距 / 圆角 / 阴影 / 渐变 / 动效
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1.1 原始档位（PRD 2.2 / 2.3 / 2.4 / 2.5 / 2.6 / 2.7）
 * -------------------------------------------------------------------------- */
:root {
  /* ——— 品牌蓝阶 Brand Blue（PRD 2.2） ——— */
  --brand-50: #F0F6FF;
  --brand-100: #E1EDFF;
  --brand-200: #C6DCFF;
  --brand-300: #93BEFF;
  --brand-400: #4D93FF;
  --brand-500: #1869FF;
  --brand-600: #0E52D6;
  --brand-700: #0A3FA8;
  --brand-800: #082F7D;
  --brand-900: #062357;

  /* ——— 中性色阶 Ink / Background / Line（PRD 2.3） ——— */
  --ink-900: #0B1220;
  --ink-800: #14203A;
  --ink-700: #2C3A54;
  --ink-500: #5A6B87;
  --ink-400: #8494AD;
  --ink-300: #B4C0D3;
  /* 派生色：PRD 6.3 允许 ProductMock 使用 ink-100，但 2.3 未定义。
     架构 §10 冲突② 决策：在此定义 --ink-100:#DDE4EE，仅 ProductMock 使用。 */
  --ink-100: #DDE4EE;

  --bg-white: #FFFFFF;
  --bg-subtle: #F6F9FF;
  --bg-muted: #EEF3FB;
  --bg-deep: #0B1B3D;

  --line-subtle: #E7EDF6;
  --line-default: #D8E1EE;
  --line-strong: #BFCBDE;

  /* ——— 语义色（PRD 2.4） ——— */
  --success-500: #12A150;
  --warning-500: #F5A623;
  --danger-500: #E5484D;
  --info-500: #0BA5EC;

  /* -----------------------------------------------------------------------------
   * 1.2 语义别名层（组件层唯一允许引用的颜色入口）
   *     PRD 备选方案 B（客户要求绝对零暖色）：只需改下方 2 行映射，组件代码零改动。
   * -------------------------------------------------------------------------- */
  --c-primary: var(--brand-500);
  --c-primary-hover: var(--brand-600);
  --c-primary-active: var(--brand-700);
  --c-primary-bright: var(--brand-400);
  /* --c-primary-text：品牌色**作为正文文字**时的安全别名。
     ⚠️ 修复 QA ISSUE：brand-500 直接当文字色时，对 --bg-subtle 仅 4.42:1、
     对 --brand-50 仅 4.29:1，均低于 4.5:1（CRM 对照表即踩此坑）。
     brand-600 对白底 6.57:1、对浅底与 brand-50 均 ≥5.9:1，全场景达标。
     规则：--c-primary 只用于图形/描边/图标；文字一律用 --c-primary-text。 */
  --c-primary-text: var(--brand-600);
  --c-primary-soft: var(--brand-50);
  --c-primary-soft-2: var(--brand-100);
  --c-primary-line: var(--brand-200);
  --c-primary-line-2: var(--brand-300);
  --c-primary-deep: var(--brand-800);
  --c-primary-night: var(--brand-900);
  --c-on-primary: var(--bg-white);

  --c-title: var(--ink-900);
  --c-title-2: var(--ink-800);
  --c-text: var(--ink-700);
  /* --c-text-sub 用于正文与说明文字：ink-500 对白底 5.40:1 / 浅底 4.85:1，全部达标。 */
  --c-text-sub: var(--ink-500);
  /* --c-text-cap 为「辅助文字 / 占位文案」专用别名。
     ⚠️ 修复 QA ISSUE：此前映射到 ink-400，对白底仅 3.08:1、对 bg-muted 2.76:1，
     低于 4.5:1，且违反 PRD §7.3「ink-400 仅用于 ≥18px」的自我约束。
     现统一映射到 ink-500（全底色 ≥4.85:1）。
     ink-400 在正文语境中已不再使用，仅保留于原始档位层供
     ≥18px 大字或纯装饰场景（见 --c-text-large）。 */
  --c-text-cap: var(--ink-500);
  --c-text-large: var(--ink-400);
  --c-text-mute: var(--ink-300);
  --c-skeleton: var(--ink-300);
  --c-skeleton-soft: var(--ink-100);

  --c-surface: var(--bg-white);
  --c-surface-2: var(--bg-subtle);
  --c-surface-3: var(--bg-muted);

  --c-border: var(--line-subtle);
  --c-border-strong: var(--line-default);
  --c-border-hard: var(--line-strong);

  --c-dark: var(--bg-deep);
  --c-dark-2: var(--brand-900);
  --c-on-dark: var(--brand-300);
  --c-on-dark-strong: var(--bg-white);
  --c-on-dark-sub: var(--brand-200);
  --c-dark-border: rgba(255, 255, 255, 0.10);
  --c-dark-border-strong: rgba(255, 255, 255, 0.20);
  --c-dark-text: var(--brand-300);

  --c-success: var(--success-500);
  --c-warning: var(--warning-500);
  --c-danger: var(--danger-500);
  --c-info: var(--info-500);

  --c-focus: var(--brand-500);
  --c-overlay: rgba(11, 27, 61, 0.44);
  /* 企业微信服务商徽章边框：取自客户提供的 wecom-provider 位图边框色（#3D8BF2），
     位图自带边框缩放到 80% 后不足 1 物理像素，改由 CSS 绘制 1px 实线必须与位图同色。 */
  --c-provider-line: #3D8BF2;

  /* -----------------------------------------------------------------------------
   * 1.2.1 深底图片上的文字压暗遮罩（首页焦点轮播第 1 帧专用）
   *      底图被等高裁切后亮度不稳定，用三段渐变保证左侧白字对比度达标。
   * -------------------------------------------------------------------------- */
  --c-scrim-strong: rgba(7, 21, 48, 0.88);
  --c-scrim-mid: rgba(7, 21, 48, 0.62);
  --c-scrim-none: rgba(7, 21, 48, 0);

  /* -----------------------------------------------------------------------------
   * 1.3 渐变（PRD 2.5）
   *     --grad-brand 的亮端 #4D93FF 对白字对比度仅 3.03:1，不满足正文级要求，
   *     因此仅用于「无文字叠加的装饰底」；按钮一律使用 --grad-btn（架构 §10 冲突①）。
   * -------------------------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, #4D93FF 0%, #1869FF 52%, #0A3FA8 100%);
  --grad-btn: linear-gradient(135deg, #1869FF 0%, #0A3FA8 100%);
  --grad-hero: linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 100%);
  --grad-deep: linear-gradient(135deg, #123A87 0%, #0B1B3D 100%);
  --grad-line: linear-gradient(90deg, #1869FF 0%, rgba(24, 105, 255, 0) 100%);
  --glow: radial-gradient(closest-side, rgba(24, 105, 255, 0.10), transparent);
  --glow-deep: radial-gradient(closest-side, rgba(147, 190, 255, 0.18), transparent);

  /* -----------------------------------------------------------------------------
   * 1.4 字体与字阶（PRD 2.6，桌面为默认值；移动档在文件末尾的降级链中覆盖）
   * -------------------------------------------------------------------------- */
  --font-sans: 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Microsoft YaHei',
    system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: 56px; --lh-display: 1.15; --ls-display: -0.02em;
  --fs-h2: 40px;      --lh-h2: 1.2;       --ls-h2: -0.01em;
  --fs-h3: 28px;      --lh-h3: 1.3;
  --fs-h4: 20px;      --lh-h4: 1.4;
  --fs-lead: 18px;    --lh-lead: 1.75;
  --fs-body: 16px;    --lh-body: 1.75;
  --fs-body-sm: 14px; --lh-body-sm: 1.7;
  --fs-caption: 13px; --lh-caption: 1.6;
  --fs-eyebrow: 13px; --lh-eyebrow: 1;    --ls-eyebrow: 0.16em;
  --fs-stat: 64px;    --lh-stat: 1;       --ls-stat: -0.02em;
  --fs-stat-unit: 20px;
  --fs-btn: 16px;     --fw-btn: 600;
  /* 特殊数字字号：仅用于「编号卡大字」与「页脚列标题」两处版式需要，
     集中在此定义，避免在组件层散落 font-size 字面量（铁律 3）。 */
  --fs-card-num: 34px;
  --fs-col-title: 15px;

  /* -----------------------------------------------------------------------------
   * 1.5 间距 / 圆角 / 阴影 / 栅格（PRD 2.7）
   * -------------------------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 120px;
  --section-y-sm: 80px;
  --grid-gap: 24px;
  --card-pad: 32px;
  --split-gap: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 12px rgba(11, 18, 32, 0.04), 0 1px 3px rgba(11, 18, 32, 0.03);
  --shadow-card-hover: 0 12px 32px rgba(24, 105, 255, 0.10), 0 2px 8px rgba(11, 18, 32, 0.04);
  --shadow-modal: 0 24px 64px rgba(11, 18, 32, 0.16);

  --header-h: 72px;
  --dur-1: 200ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -----------------------------------------------------------------------------
 * 1.6 Reset
 * -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* 规则 1：禁止横向滚动的兜底。
     clip 不创建滚动容器，因此不会破坏 position:sticky（架构 R2）。 */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; border-style: none; }

/* 正文链接文字色用 --c-primary-text（brand-600，全底色 ≥6.5:1），
   不用 --c-primary（brand-500 对浅底仅 4.42:1）。 */
a {
  color: var(--c-primary-text);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--c-primary-hover); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

strong, b { font-weight: 700; }
hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * 1.7 无障碍基线
 * -------------------------------------------------------------------------- */

/* 规则 2：统一焦点态。禁止 outline:none 而无替代。 */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 跳转到主要内容：<body> 首个可聚焦元素，focus 时显形 */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  transform: translateY(-120%);
  padding: 12px 20px;
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
  transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--c-on-primary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
 * 1.8 排版原子类（唯一允许书写 font-size 的地方）
 * -------------------------------------------------------------------------- */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  color: var(--c-title);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 700;
  color: var(--c-title);
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--c-title);
}
.t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
  color: var(--c-title-2);
}
.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
  color: var(--c-text-sub);
}
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-text);
}
.t-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 400;
  color: var(--c-text-sub);
}
.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  color: var(--c-text-cap);
}
.t-eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: var(--c-primary-text);
  text-transform: uppercase;
}
.t-stat {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  letter-spacing: var(--ls-stat);
  font-weight: 700;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.t-stat-unit {
  font-size: var(--fs-stat-unit);
  line-height: 1;
  font-weight: 600;
  color: var(--c-text-sub);
}

/* -----------------------------------------------------------------------------
 * 1.9 响应式降级链（桌面为默认值，逐档覆盖）
 * -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --container-max: 1140px;
    --section-y: 80px;
    --section-y-sm: 64px;
    --grid-gap: 20px;
    --split-gap: 48px;
  }
}

@media (max-width: 1023px) {
  :root {
    --container-max: 100%;
    --gutter: 24px;
    --fs-display: 44px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-stat: 52px;
  }
}

@media (max-width: 767px) {
  :root {
    --container-max: 100%;
    --gutter: 20px;
    --section-y: 64px;
    --section-y-sm: 48px;
    --grid-gap: 16px;
    --card-pad: 24px;
    --split-gap: 32px;
    --header-h: 64px;

    --fs-display: 32px; --lh-display: 1.25;
    --fs-h2: 26px;      --lh-h2: 1.3;
    --fs-h3: 20px;      --lh-h3: 1.4;
    --fs-h4: 18px;      --lh-h4: 1.45;
    --fs-lead: 16px;    --lh-lead: 1.75;
    --fs-body: 16px;    --lh-body: 1.75;
    --fs-body-sm: 14px; --lh-body-sm: 1.7;
    --fs-caption: 13px; --lh-caption: 1.6;
    --fs-eyebrow: 12px; --lh-eyebrow: 1;    --ls-eyebrow: 0.16em;
    --fs-stat: 40px;    --lh-stat: 1;       --ls-stat: -0.02em;
    --fs-stat-unit: 16px;
    --fs-btn: 15px;     --fw-btn: 600;
  }
}

@media (max-width: 479px) {
  :root { --gutter: 16px; }
}

/* -----------------------------------------------------------------------------
 * 1.10 进场动画初始态（架构 R3）
 *     只有在 main.js 成功注册 IntersectionObserver 后才给 <html> 加 .has-reveal，
 *     并在同一次同步执行内为「已进入视口」的元素补 .is-in —— 因此首屏永不空白。
 * -------------------------------------------------------------------------- */
[data-reveal] { opacity: 1; transform: none; }
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* -----------------------------------------------------------------------------
 * 1.11 规则 3：尊重减弱动效（全站一处生效，必须位于文件末尾）
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}