@charset "utf-8";
/* =========================================================
   SINOLVE 官网主题变量
   ---------------------------------------------------------
   所有数值来源：
   - 颜色 / 渐变：蓝湖设计稿 + 设计师标注截图（已与设计师双重核对）
   - 字号 / 间距：蓝湖 4096px 画布换算到 1920px Web 基准（÷ 2.13）
   - 字体：蓝湖标注的 DreamHanSansCN（思源黑体）系列 + Web 回退
   ---------------------------------------------------------
   使用规则：业务页面禁止写死颜色 / 渐变 / 字号 / 间距，
   全部通过 var(--xxx) 引用。如需新增 token，先加入此文件。
   ========================================================= */

:root {

  /* ============================================================
     一、颜色
     ============================================================ */

  /* ---------- 背景色 ---------- */
  --color-bg-primary:   #0b2a8a;   /* 深蓝主背景，首页大块区域 */
  --color-bg-deep:      #061a5c;   /* 更深的蓝，二级深色区 */
  --color-bg-card-dark: #103e90;   /* 深蓝卡片底色（Business Model 四张卡片）*/
  --color-bg-card-soft: #f8f8f8;   /* 浅灰卡片底色（子页 Dialysis / Oncology 卡片）*/
  --color-bg-white:     #ffffff;

  /* ---------- 文字颜色 ---------- */
  --color-text-on-dark:        #ffffff;          /* 深背景上的文字 */
  --color-text-primary:        #103e90;          /* 浅背景上的标题（同卡片底色，沿用 global.css）*/
  --color-text-body:           #4b4948;          /* 正文（沿用 global.css）*/
  --color-text-muted-on-dark:  rgba(255, 255, 255, .72);
  --color-text-muted:          #8a8a8a;

  /* ---------- 强调色 / 紫色系 ---------- */
  --color-accent-purple-start: #601986;          /* 渐变起点（深紫），来自设计稿标注 */
  --color-accent-purple-end:   #9e318d;          /* 渐变终点（粉紫红），来自设计稿标注 */
  --color-accent:              #601986;          /* 紫色主色（单色场景用）*/


  /* ============================================================
     二、渐变（核心视觉）
     ============================================================ */

  /* 通用紫色渐变：按钮背景、图标圆形背景 */
  --gradient-purple:
    linear-gradient(90deg, #601986 0%, #9e318d 100%);

  /* 文字渐变（搭配 background-clip:text 使用）：
     子页大标题、Medical Device / Oncology 等区块标题 */
  --gradient-purple-text:
    linear-gradient(90deg, #601986 0%, #9e318d 100%);

  /* 首页 Hero 大背景：蓝 → 紫 → 粉紫
     (设计稿首屏 Banner 的实际渐变方向)*/
  --gradient-hero-bg:
    linear-gradient(135deg, #1a2a8a 0%, #6a1aa1 60%, #c724b1 100%);

  /* 数字统计区横向渐变（首页底部 20+ / 35+ / 110+ / 10+ 那一行）*/
  --gradient-stats-bg:
    linear-gradient(90deg, #601986 0%, #9e318d 100%);


  /* ============================================================
     三、字体
     ---------------------------------------------------------
     设计稿使用 DreamHanSansCN（思源黑体 CN），项目暂无字体授权，
     按 Web 通用回退；思源黑体在 macOS/iOS 上对应 PingFang SC，
     在 Windows 上对应 Microsoft YaHei。
     ============================================================ */

  /* 标题字体（粗）：对应蓝湖 DreamHanSansCN-W27 / W20 */
  --ff-display:
    "DreamHanSansCN-W27", "Source Han Sans CN", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 正文字体（中等 / 细）：对应蓝湖 DreamHanSansCN-W12 / W6 / PingFangSC */
  --ff-body:
    "PingFang SC", "Source Han Sans CN", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;

  /* 数字 / 英文字体：对应蓝湖 HelveticaNeue-Bold / ArialMT */
  --ff-number:
    "Helvetica Neue", "Arial", "Helvetica", sans-serif;


  /* ============================================================
     四、字号
     ---------------------------------------------------------
     项目 html { font-size:62.5% } → 1rem = 10px
     下方注释为对应的设计稿原始 px（蓝湖 4096 画布）与 Web 实际 px
     ============================================================ */

  /* 换算公式：蓝湖 px ÷ 3 = Web 实际 px
     校准锚点：导航 48px → 16px（系数=3，等价于设计师标注 24pt × 1.333 / 2 倍画布修正）
     html { font-size: 62.5% } → 1rem = 10px */
  --fs-hero:       6.2rem;  /* 62px ←蓝湖 184px：子页 Hero 大标题（What we do for）*/
  --fs-number:     4.4rem;  /* 44px ←蓝湖 132px：数字统计（20+ / 35+ / 110+）*/
  --fs-h1:         3.8rem;  /* 38px ←蓝湖 116px：Hero 标题 / 区块大标题（Business Model / What we do）*/
  --fs-h2:         2.2rem;  /* 22px ←蓝湖  64px：卡片小标题（Trading / Medicines）*/
  --fs-h3:         1.6rem;  /* 16px ←蓝湖  48px：导航 / Find out more 主按钮 / Stats 标签 */
  --fs-lead:       1.4rem;  /* 14px ←蓝湖  42px：卡片正文 / Hero 描述 */
  --fs-body:       1.3rem;  /* 13px ←蓝湖  38px：长段 Hero 描述 / 页脚链接 */
  --fs-body-sm:    1.2rem;  /* 12px ←蓝湖  36px：READ MORE 卡片按钮 / Stats 描述小字 */
  --fs-small:      1.1rem;  /* 11px ←蓝湖  32px：辅助文字 */


  /* ============================================================
     五、字重 & 行高
     ============================================================ */

  --fw-thin:    100;   /* 对应思源黑体 W3   / DreamHanSansCN-W6  */
  --fw-light:   300;   /* 对应思源黑体 W5   / DreamHanSansCN-W12 */
  --fw-regular: 400;
  --fw-medium:  500;   /* 对应思源黑体 W7   / DreamHanSansCN-W20 */
  --fw-bold:    700;   /* 对应思源黑体 W9   / DreamHanSansCN-W27 */

  --lh-tight:   1.1;   /* 大标题，约等于 line-height: 102px / font-size: 116px */
  --lh-normal:  1.4;   /* 子标题 */
  --lh-relaxed: 1.6;   /* 正文，蓝湖 line-height 63 / font-size 42 ≈ 1.5 */
  --lh-loose:   1.8;   /* 段落多行 */


  /* ============================================================
     六、间距（8px 基准，按需补充）
     ============================================================ */

  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8: 128px;       /* 子页 Hero 与首块卡片间距，约 ÷2.13 */


  /* ============================================================
     七、容器
     ============================================================ */

  --container-width:        76%;
  --container-max:        1400px;
  --container-width-mobile: 92%;


  /* ============================================================
     八、圆角
     ---------------------------------------------------------
     蓝湖标注的 border-radius: 0 0 0 120px（4096 画布）
     → Web ≈ 56px，用于子页卡片大圆角
     ============================================================ */

  --radius-sm:    6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   56px;   /* 子页卡片大圆角（Dialysis / Respiratory 等）*/
  --radius-pill: 999px;  /* 按钮药丸形 */


  /* ============================================================
     九、阴影
     ============================================================ */

  --shadow-card:       0 8px 24px rgba(11, 42, 138, .15);
  --shadow-card-hover: 0 12px 36px rgba(11, 42, 138, .25);
  --shadow-purple:     0 8px 20px rgba(158, 49, 141, .35);


  /* ============================================================
     十、过渡 & 层级
     ============================================================ */

  --transition-fast: .15s ease;
  --transition-base: .25s ease;
  --transition-slow: .4s  ease;

  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    900;
  --z-back-top: 800;


  /* ============================================================
     十一、头部导航（滚动响应）
     ------------------------------------------------------------
     用于 .headbox 初始态与 .headbox.is-scrolled 滚动后形态。
     触发阈值统一 60px，JS 内硬编码同值（见 js/global.js）。
     ============================================================ */

  --header-height:           80px;
  --header-height-scrolled:  64px;
  --header-bg-scrolled:      rgba(11, 42, 138, .96);  /* 滚动后蓝色主题底（同 --color-bg-primary）*/
  --header-shadow-scrolled:  0 4px 16px rgba(11, 42, 138, .18);
  --header-text-scrolled:    #ffffff;            /* 滚动后导航文字保持纯白 */

  /* 移动端（≤800px）覆盖值，在 max800.css 内通过 :root 覆盖使用 */
  --header-height-mobile:           80px;
  --header-height-mobile-scrolled:  56px;
}


/* =========================================================
   渐变文字工具类（直接套用即可）
   ========================================================= */
.text-gradient-purple {
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}