/**
 * ============================================================
 * 柏来科技官网 - 设计系统样式变量文档 (Design Tokens)
 * 基于 Figma 设计稿提取：425_8590
 * ============================================================
 */
:root {
  /* ----------------------------------------------------------
   * 1. 主题颜色 (Theme Colors)
   * ---------------------------------------------------------- */
  /* 主色调 - 品牌蓝 */
  --c-primary: #006DFF;
  --c-primary-96: rgba(0, 109, 255, 0.96);
  /* 按钮主色 */
  --c-primary-20: rgba(0, 109, 255, 0.2);
  /* 浅蓝边框 */
  --c-primary-03: rgba(0, 109, 255, 0.03);
  /* 浅蓝背景 */
  /* 背景色 */
  --c-bg-page: #FFFFFF;
  /* 页面背景 */
  --c-bg-footer: #000000;
  /* 页脚背景 */
  --c-bg-card: #FFFFFF;
  /* 卡片背景 */
  --c-bg-section-alt: rgba(0, 109, 255, 0.03);
  /* 交替区块背景 */
  --c-bg-item: #FAFBFD;
  /* 图文信息块背景 */
  /* 文字颜色 */
  --c-text-black: #000000;
  /* 标题文字 */
  --c-text-title: #222222;
  /* 标题文字 */
  --c-text-main: #636363;
  /* 正文/主要文字 */
  --c-text-sub: #8F8F8F;
  /* 副标题/次要文字 */
  --c-text-light: #FFFFFF;
  /* 深色背景上的文字 */
  --c-text-muted: rgba(255, 255, 255, 0.7);
  /* 页脚次要文字 */
  /* 中性色 */
  --c-black: #000000;
  --c-white: #FFFFFF;
  /* 渐变遮罩 */
  --gradient-overlay-dark: linear-gradient(360deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
  --gradient-overlay-bottom: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  --gradient-fade-white: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  --gradient-fade-blue: linear-gradient(0deg, rgba(255, 255, 255, 0.53) 0%, rgba(232, 245, 254, 0.53) 100%);
  /* ----------------------------------------------------------
   * 2. 字体系统 (Typography)
   * ---------------------------------------------------------- */
  /* 字体栈 */
  --font-primary: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-numeric: "DIN Alternate", "DIN", "Roboto", sans-serif;
  --font-serif: "Songti SC", "SimSun", serif;
  /* 字体大小层级 */
  --fz-hero: 27px;
  /* Hero 区大标题 */
  --fz-h1: 24px;
  /* 板块主标题 */
  --fz-h2: 18px;
  /* 次级标题（如电话） */
  --fz-h3: 16px;
  /* 卡片标题、按钮文字 */
  --fz-body: 14px;
  /* 正文、导航、描述 */
  --fz-caption: 12px;
  /* 辅助文字、页脚链接 */
  /* 统计数字专用字号 */
  --fz-stat: 26px;
  /* 字重 */
  --fw-serif: 900;
  /* 数字强调 */
  --fw-bold: 700;
  /* 数字强调 */
  --fw-semibold: 600;
  /* 标题、按钮 */
  --fw-medium: 500;
  /* 新闻标题、标签 */
  --fw-regular: 400;
  /* 正文 */
  --fw-light: 300;
  /* 辅助描述 */
  /* 行高 */
  --lh-tight: 1.2;
  /* 紧凑（标题） */
  --lh-normal: 1.375;
  /* 标准（正文） */
  --lh-relaxed: 1.75;
  /* 宽松（段落） */
  --lh-loose: 2;
  /* 更宽松 */
  /* ----------------------------------------------------------
   * 3. 间距系统 (Spacing)
   * ---------------------------------------------------------- */
  /* 基础间距单位 (Base 4px grid) */
  --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: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-13: 52px;
  --sp-14: 56px;
  --sp-15: 60px;
  --sp-16: 64px;
  --sp-17: 68px;
  --sp-18: 72px;
  --sp-19: 76px;
  --sp-20: 80px;
  --sp-21: 84px;
  --sp-22: 88px;
  /* 布局间距 */
  --page-max-width: 1440px;
  /* (设计稿)最大宽度 */
  --content-max-width: 980px;
  /* 内容区域宽度 = 1440 - 230 - 230  */
  --section-padding-x: 16vw;
  /* 内容区左右内边距 */
  --section-title-gap: 30px;
  /* 标题与内容间距 */
  --card-gap: 18px;
  /* 卡片间隙 */
  --card-gap-large: 30px;
  /* 大型卡片间隙 */
  /* 组件内边距 */
  --card-padding: 20px;
  --btn-padding-x: 40px;
  --btn-padding-y: 10px;
  /* ----------------------------------------------------------
   * 4. 圆角 (Border Radius)
   * ---------------------------------------------------------- */
  --radius-sm: 10px;
  /* 小图片 */
  --radius-md: 18px;
  /* 图片/遮罩 */
  --radius-lg: 20px;
  /* 卡片、区块 */
  --radius-xl: 36px;
  /* 大图片 */
  --radius-full: 80px;
  /* 按钮（胶囊形） */
  /* ----------------------------------------------------------
   * 5. 尺寸 (Sizing)
   * ---------------------------------------------------------- */
  --header-height: 60px;
  /* 导航栏高度 */
  --header-logo-height: 24px;
  /* Logo 高度 */
  --header-padding: 20px;
  /* 导航栏左右内边距 */
  --hero-height: 450px;
  /* Hero 区高度 */
  --hero-height-small: 370px;
  /* Hero 区高度 - 小 */
  --btn-height: 42px;
  /* 按钮高度 */
  --btn-width-cta: 144px;
  /* CTA 按钮宽度 */
  --card-height-sm: 109px;
  /* 小卡片高度 */
  --card-height-md: 187px;
  /* 中卡片高度 */
  --card-height-lg: 207px;
  /* 大卡片高度 */
  /* ----------------------------------------------------------
   * 6. 阴影与效果 (Effects)
   * ---------------------------------------------------------- */
  --text-gradient-primary: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary) 100%);
  --text-gradient-dark: linear-gradient(180deg, var(--c-text-title) 0%, var(--c-text-title) 100%);
  --card-shadow: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 49.84%);
}
@media (max-width: 1024px) {
  :root {
    /* ----------------------------------------------------------
    * 1. 主题颜色 (Theme Colors)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 2. 字体系统 (Typography)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 3. 间距系统 (Spacing)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 4. 圆角 (Border Radius)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 5. 尺寸 (Sizing)
    * ---------------------------------------------------------- */
    --hero-height: 300px;
    /* Hero 区高度 */
    --hero-height-small: 270px;
    /* Hero 区高度 - 小 */
    /* ----------------------------------------------------------
    * 6. 阴影与效果 (Effects)
    * ---------------------------------------------------------- */
  }
}
@media (max-width: 640px) {
  :root {
    /* ----------------------------------------------------------
    * 1. 主题颜色 (Theme Colors)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 2. 字体系统 (Typography)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 3. 间距系统 (Spacing)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 4. 圆角 (Border Radius)
    * ---------------------------------------------------------- */
    /* ----------------------------------------------------------
    * 5. 尺寸 (Sizing)
    * ---------------------------------------------------------- */
    --header-height: 40px;
    /* 导航栏高度 */
    --header-padding: 12px;
    /* 导航栏左右内边距 */
    --hero-height: 200px;
    /* Hero 区高度 */
    --hero-height-small: 200px;
    /* Hero 区高度 - 小 */
    /* ----------------------------------------------------------
    * 6. 阴影与效果 (Effects)
    * ---------------------------------------------------------- */
  }
}
/* ============================================================
 * 使用示例 / 快速参考
 * ============================================================
 *
 * 导航链接:
 *   font-size: var(--fz-body);
 *   font-weight: var(--fw-regular);
 *   color: var(--c-text-main);
 *
 * 导航链接（选中）:
 *   font-weight: var(--fw-semibold);
 *   color: var(--c-primary);
 *
 * 板块标题:
 *   font-size: var(--fz-h1);
 *   font-weight: var(--fw-semibold);
 *   color: var(--c-primary);
 *
 * 卡片标题:
 *   font-size: var(--fz-h3);
 *   font-weight: var(--fw-semibold);
 *   color: var(--c-text-light);
 *
 * 正文/描述:
 *   font-size: var(--fz-body);
 *   font-weight: var(--fw-regular);
 *   color: var(--c-text-sub);
 *   line-height: var(--lh-normal);
 *
 * 统计数字:
 *   font-size: var(--fz-stat);
 *   font-weight: var(--fw-bold);
 *   color: var(--c-black);
 *   font-family: var(--font-numeric);
 *
 * 主要按钮:
 *   height: var(--btn-height);
 *   padding: var(--btn-padding-y) var(--btn-padding-x);
 *   background: var(--c-primary-96);
 *   border-radius: var(--radius-full);
 *   font-size: var(--fz-h3);
 *   font-weight: var(--fw-semibold);
 *   color: var(--c-text-light);
 *
 * 卡片容器:
 *   padding: var(--card-padding);
 *   border-radius: var(--radius-lg);
 *   background: var(--c-bg-card);
 *
 * 页脚文字:
 *   font-size: var(--fz-caption);
 *   color: var(--c-text-muted);
 */