@charset "UTF-8";
/* ==========================================================================
   tokens.css —— 全站设计变量（唯一来源）
   --------------------------------------------------------------------------
   所有颜色、字号、间距、圆角、阴影、动效时长都在这里定义，其余 CSS 只引用
   变量，不再出现硬编码色值。改主题只需改本文件。

   配色说明：
   - 品牌蓝 #3375EC 与 logo 主色一致，沿用现状
   - 深色 #262F3C 取自 logo 字色
   - 强调色 绿/青/红橙 取自 logo 图形，仅用于点缀（图标、状态），不做大面积背景
   - 旧模板遗留的粉色 #FF6F80 / 黄色 #FFEA5C 已淘汰（原为 secondary 色与按钮
     hover 色，与医疗健康行业调性不符）
   - 正文字色由旧的 #8491A5 改为 #3F4856：旧色在 #F5F7FA 底上对比度仅 2.6:1，
     不满足 WCAG AA 的 4.5:1
   ========================================================================== */

:root {
  /* ---------- 品牌与中性色 ---------- */
  --c-brand: #3375EC;
  --c-brand-strong: #2458C8;   /* hover / 按下 */
  --c-brand-weak: #EAF1FE;     /* 浅色底：徽标底、图标底 */
  --c-ink: #262F3C;            /* 深色区块底、主标题 */
  --c-text: #3F4856;           /* 正文 */
  --c-text-soft: #6B7686;      /* 次要文字、说明 */
  --c-text-invert: #FFFFFF;
  --c-text-invert-soft: rgba(255, 255, 255, .82);

  --c-line: #E4E8EF;           /* 分隔线、卡片描边 */
  --c-line-strong: #D3D9E3;    /* 表单、强调描边 */

  --c-bg: #FFFFFF;
  --c-bg-soft: #F5F7FA;        /* 浅灰区块底 */
  --c-bg-dark: var(--c-ink);

  --c-green: #77D216;
  --c-cyan: #63C9EB;
  --c-red: #EC4242;

  /* ---------- 字体 ---------- */
  /* 不引入 webfont：原模板的 Muli / "Open Sans" 全站没有对应字体文件，
     实际一直渲染为系统默认字体，这里只把字体栈写清楚。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               "Source Han Sans SC", sans-serif;

  /* 中文字重：系统字体没有真正的 Light（300），旧模板全站标题 font-weight:300
     会回落成 Regular，视觉上并没有变细，反而失去层级。统一用 400/500/600。 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* ---------- 字号阶梯 ---------- */
  --fs-display: clamp(34px, 5.2vw, 52px);  /* 首页 hero 主标题 */
  --fs-h1: clamp(30px, 4.2vw, 44px);       /* 页面头图标题 */
  --fs-h2: clamp(24px, 3.1vw, 36px);       /* 区块标题 */
  --fs-h3: clamp(20px, 2.4vw, 28px);       /* 卡片组标题 / 内容标题 */
  --fs-h4: clamp(18px, 1.9vw, 22px);
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;

  --lh-tight: 1.28;
  --lh-heading: 1.4;
  --lh-body: 1.8;              /* 中文正文行距需要比西文更大 */

  --ls-wide: .18em;            /* eyebrow 小标签字距 */

  /* ---------- 间距阶梯 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;
  --sp-10: 120px;

  --sec-pad: clamp(56px, 7.5vw, 104px);        /* 区块上下内边距 */
  --sec-pad-tight: clamp(40px, 5vw, 64px);
  --container: 1200px;
  --gutter: 24px;

  /* ---------- 圆角 ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgba(38, 47, 60, .06), 0 4px 12px rgba(38, 47, 60, .06);
  --sh-2: 0 8px 24px rgba(38, 47, 60, .10);
  --sh-3: 0 18px 48px rgba(38, 47, 60, .14);
  --sh-brand: 0 12px 28px rgba(51, 117, 236, .28);

  /* ---------- 动效：全站统一时长与缓动 ---------- */
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-overlay: 190;
  --z-drawer: 200;
}