/* ============================================================
 * 智帮咨询 V4 · 设计令牌（单一真相源）
 * 修改配色/字体/间距只需改此文件，全站自动同步
 * 版本：V4.0
 * 规则：所有页面只通过 var(--*) 引用，禁止页面内 :root 重定义
 * ============================================================ */

/* ===== 阿里巴巴普惠体（主题内置，不依赖访客本地字体）===== */
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("fonts/AlibabaPuHuiTi-3-55-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("fonts/AlibabaPuHuiTi-3-65-Medium.ttf") format("truetype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("fonts/AlibabaPuHuiTi-3-85-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========== 颜色：品牌深蓝（覆盖率 ~25%）========== */
  --navy:       #1a3a5c;
  --navy-dark:  #0f2740;
  --navy-light: #2a4d72;
  --navy-mid:   #4a6a85;

  /* ========== 颜色：辅助灰蓝（覆盖率 ~20%）========== */
  --bg-section: #eef2f6;
  --bg-card:    #f4f7fa;
  --border:     var(--border-soft);
  --border-alt: var(--border-soft);
  --accent-grayblue: #8ba3b8;

  /* ========== 颜色：朱砂红（覆盖率 <5%，CTA 强调专用）========== */
  --vermilion:        #c23a2b;
  --vermilion-hover:  #a32d20;
  --vermilion-active: #8a241a;
  --vermilion-light:  #faedeb;
  --vermilion-text:   #8a241a;

  /* ========== 颜色：金色（覆盖率 ≤5%，战略级徽章/标杆案例星标）========== */
  --gold:      var(--accent);
  --gold-dark: #b8944f;
  --gold-bg:   #faf5ec;
  --gold-text: #8a6d3e;

  /* ========== 颜色：中性色（覆盖率 ~45%）========== */
  --white:      #ffffff;
  --bg-off:     #f8f9fa;
  --text:       #2c2c2c;
  --text-gray:  #5a6370;
  --text-light: #8a95a0;
  --border-neutral: #dce2e8;

  /* ========== 颜色：功能色（少量）========== */
  --success: #2e7d5e;
  --warning: #cc8b3c;
  --error:   #b33a2f;

  /* ========== 颜色：透明叠加（用于深色背景）========== */
  --white-10: rgba(255,255,255,.10);
  --white-15: rgba(255,255,255,.15);
  --white-30: rgba(255,255,255,.30);
  --white-60: rgba(255,255,255,.60);
  --black-04: rgba(0,0,0,.04);
  --black-08: rgba(0,0,0,.08);
  --black-15: rgba(0,0,0,.15);

  /* ========== 字体（V3 升级）========== */
  --font-heading: "Alibaba PuHuiTi", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    "Alibaba PuHuiTi", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Consolas", "Menlo", monospace;

  /* ========== 字号 ========== */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-h3:    32px;
  --fs-h2:    40px;
  --fs-h1:    52px;
  --fs-hero:  64px;

  /* ========== 行高 ========== */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.8;

  /* ========== 间距（4 倍数）========== */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* ========== 圆角 ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ========== 阴影层级 ========== */
  --shadow-card:  0 2px 8px rgba(26,29,32,.06);
  --shadow-float: 0 8px 30px rgba(26,29,32,.10);
  --shadow-soft:  0 14px 42px rgba(26,29,32,.08);
  --shadow-nav:   0 2px 16px rgba(23,38,51,.15);
  --shadow-btn:   0 4px 20px rgba(var(--accent-rgb),.35);
  --shadow-deep:  0 16px 48px rgba(23,38,51,.20);

  /* ========== 容器宽度 ========== */
  --container-narrow: 960px;
  --container-base:   1200px;
  --container-wide:   1440px;

  /* ========== 动画 ========== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-deliberate: 600ms;

  /* ========== Z-index 层级 ========== */
  --z-nav:     100;
  --z-dropdown: 200;
  --z-modal:    900;
  --z-toast:    1000;

  /* ========== 断点（仅作 JS/参考，CSS 中用 @media 字面量）========== */
  /* sm:  480px / md: 768px / lg: 1024px / xl: 1440px */

  /* ========== 颜色：HR 视角侧栏（浅蓝底 + 蓝色文字，与首页 boss-vermilion 形成双受众区隔）========== */
  --hr-bg:     var(--bg-2nd);
  --hr-bg-2:   #e8edf2;
  --hr-text:   var(--text-title);
  --hr-text-deep: var(--text-body);
  --hr-border: #c8d4e0;

  /* ========== 颜色：金色文字深色补充 ========== */
  --gold-text-deep: #5a4520;

  /* ========== V4 暖灰背景色系（浅底新设计系统）========== */
  --bg-hero:     #F6F3EE;
  --bg-2nd:      #F0EFEC;
  --bg-3rd:      #F5F4F2;
  --text-title:  #1A1D20;
  --text-body:   #2C2E33;
  --text-subtle: #6B6F76;
  --border-soft: #C8C3BC;

  /* ========== V4 导航 / Footer ========== */
  --footer-bg:      #172633;
  --footer-text:    #B8C0C8;
  --footer-heading: #E8ECF0;
  --footer-subtle:  #8E9AA8;

  /* ========== V4 默认 accent（铁锈橙，各产品页可在 <style> 中覆写）========== */
  --accent:        #C8642A;
  --accent-hover:  #B0551F;
  --accent-deep:   #8F4A22;
  --accent-rgb:    200, 100, 42;
  --accent-light:  rgba(200,100,42,.08);

  /* ========== 向后兼容别名（V2 → V3）========== */
  --accent-red:       var(--vermilion);
  --accent-red-hover: var(--vermilion-hover);
  --bg-light:         var(--bg-section);
  --bg:               var(--white);
}