/* ============================================================================
   Nextsms官网 · Nextsms — Design Tokens
   ----------------------------------------------------------------------------
   来源：Ardot 设计稿「云通讯官网设计 · Nextsms」V4（桌面 1440 / 移动 390）
   数值均从设计稿节点逐项读取（fills / cornerRadius / effects / padding / gap /
   fontSize），非估算值。渐变角度已按 Figma gradientTransform
   matrix(1,1,0,-1,1,0.5) → CSS 225deg 换算。

   用法：<link rel="stylesheet" href="design-tokens.css">，
        或把 :root 段整体粘贴进你的全局样式表。
   命名：--c- 颜色 / --g- 渐变 / --fs- 字号 / --lh- 行高 / --r- 圆角 /
        --sh- 阴影 / --sp- 间距 / --f- 字体 / --dur- 过渡
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------
     1. 品牌色（主色体系）  设计稿基准 #2563EB
     --------------------------------------------------------------- */
  --c-brand:          #2563EB;  /* 主色：主按钮、当前页高亮、强调数值 */
  --c-brand-deep:     #1D4ED8;  /* 主色深档：渐变终点、hover 加深 */
  --c-brand-light:    #3B82F6;  /* 主色浅档：渐变起点 */
  --c-brand-pale:     #EFF6FF;  /* 极淡蓝：Hero / 页头底色、标签底 */
  --c-brand-soft:     #DBEAFE;  /* 淡蓝：渐变中间档、深色底上的正文 */
  --c-brand-line:     #BFDBFE;  /* 淡蓝描边 / 深色底上的次要文字 */
  --c-brand-fade:     #93C5FD;  /* 更浅蓝：装饰点阵、Hero 渐变末端 */

  /* ---------------------------------------------------------------
     2. 辅助色（功能语义）
     --------------------------------------------------------------- */
  --c-green:          #10B981;  /* 绿：成功 / 通知 / 国际通道 */
  --c-green-deep:     #059669;  /* 绿深档 */
  --c-green-pale:     #ECFDF5;  /* 绿淡底（图标底渐变起点） */
  --c-green-soft:     #D1FAE5;  /* 绿淡档（图标底渐变终点 / 绿 pill 底） */
  --c-green-wash:     #D1FAE5;  /* 绿 pill 底（语义别名，同 soft） */

  --c-amber:          #F59E0B;  /* 琥珀：安全 / 提醒 */
  --c-amber-text:     #D97706;  /* 琥珀文字（浅底对比度，pill / tag 文字） */
  --c-amber-50:       #FFFBEB;  /* 琥珀极淡底（图标底渐变起点） */
  --c-amber-pale:     #FEF3C7;  /* 琥珀淡底（区块标签） */
  --c-amber-soft:     #FDE68A;  /* 琥珀 pill 底（「热门」实测值） */
  --c-amber-wash:     #FEF3C7;  /* tag 用琥珀 wash（= pale） */

  --c-purple:         #8B5CF6;  /* 紫：营销 / 增长 */
  --c-purple-deep:    #6B46DA;  /* 紫深档 */
  --c-purple-50:      #F5F3FF;  /* 紫极淡底（图标底渐变起点） */
  --c-purple-pale:    #EDE9FE;  /* 紫淡底 */
  --c-purple-soft:    #DDD6FE;  /* 紫渐变终点 */
  --c-purple-wash:    #F5F3FF;  /* 紫浅底（按钮 / tag） */

  --c-cyan:           #0891B2;  /* 青：国际验证码 / 高频标记（pill 文字实测） */
  --c-cyan-pale:      #ECFEFF;  /* 青淡底（图标底渐变起点） */
  --c-cyan-soft:      #A5F3FC;  /* 青渐变终点 */
  --c-sky-pale:       #E0F2FE;  /* 天蓝 pill 底（「高频」实测值） */

  --c-pink:           #DB2777;  /* 玫红：高转化 / 合规 */
  --c-pink-50:        #FDF2F8;  /* 玫红极淡底（图标底渐变起点） */
  --c-pink-pale:      #FCE7F3;  /* 玫红淡底 / 「高转化」pill 底（实测值） */
  --c-pink-soft:      #FBCFE8;  /* 玫红渐变终点 */

  --c-teal:           #0F766E;  /* 深青绿：开发者中心主色 */
  --c-teal-deep:      #115E59;  /* 深青绿深档 */
  --c-teal-pale:      #CCFBF1;  /* 深青绿淡底 */

  /* 语义化别名 */
  --c-success:        var(--c-green);
  --c-warning:        var(--c-amber);
  --c-danger:         #E5484D;  /* 未读角标等强提醒 */
  --c-online:         #6EE7B7;  /* 客服在线状态点 */

  /* ---------------------------------------------------------------
     3. 中性灰阶
     --------------------------------------------------------------- */
  --c-ink:            #0F172A;  /* 900 标题 / CTA 与页脚底色 */
  --c-ink-2:          #1E293B;  /* 800 深色区块上的次级底 */
  --c-ink-3:          #334155;  /* 700 正文强调 / 按钮文字 */
  --c-text:           #475569;  /* 600 正文 */
  --c-text-2:         #64748B;  /* 500 辅助文字 / 说明 */
  --c-text-3:         #94A3B8;  /* 400 弱化文字 / 占位 */
  --c-line:           #CBD5E1;  /* 300 输入框描边 */
  --c-line-2:         #E2E8F0;  /* 200 卡片描边 / 导航分割线（实测 5:933） */
  --c-bg-soft:        #F1F5F9;  /* 100 浅底 / 胶囊底 / 语言切换底 */
  --c-soft:           #F1F5F9;  /* 语义别名：内嵌浅底 */
  --c-bg:             #F8FAFC;  /* 50  区块交替底色（实测 5:1060 等） */
  --c-white:          #FFFFFF;

  /* 深色区块内专用（CTA / 页脚 底 #0F172A 上） */
  --c-on-dark:        #FFFFFF;
  --c-on-dark-2:      #BFDBFE;  /* 深色底上的次要文字（实测 5:1048 副标） */
  --c-on-dark-3:      #94A3B8;
  --c-on-dark-4:      #64748B;
  --c-on-dark-line:   #1E293B;

  /* ---------------------------------------------------------------
     4. 渐变
     设计稿统一使用 Figma gradientTransform matrix(1,1,0,-1,1,0.5)
     （右上 → 左下），CSS 等价角度为 225deg。
     --------------------------------------------------------------- */
  /* Hero / 页头装饰层（真实底为 solid #EFF6FF + hero-bg.svg 叠加） */
  --g-hero:  linear-gradient(225deg,#EFF6FF 0%,#DBEAFE 30%,#BFDBFE 62%,#93C5FD 100%);
  /* 品牌蓝（主按钮 / CTA 区块，实测 5:1509 两段） */
  --g-brand: linear-gradient(225deg,#2563EB 0%,#1D4ED8 100%);
  /* 指标带（实测 5:1043 三段回环：#2563EB → #1D4ED8 50% → #2563EB） */
  --g-band:  linear-gradient(225deg,#2563EB 0%,#1D4ED8 50%,#2563EB 100%);
  /* CTA 区块（与 --g-brand 同款，单独命名便于分区维护） */
  --g-cta:   linear-gradient(225deg,#2563EB 0%,#1D4ED8 100%);
  /* 深青绿（开发者 · HTTP 开放接口卡） */
  --g-teal:  linear-gradient(225deg,#0F766E 0%,#115E59 100%);

  /* 图标底六件套（实测 adv-tile-1.svg：#EEF6FF → #DBEAFD） */
  --g-icon-blue:   linear-gradient(225deg,#EEF6FF 0%,#DBEAFD 100%);
  --g-icon-green:  linear-gradient(225deg,#ECFDF5 0%,#D1FAE5 100%);
  --g-icon-amber:  linear-gradient(225deg,#FFFBEB 0%,#FDE68A 100%);
  --g-icon-purple: linear-gradient(225deg,#F5F3FF 0%,#DDD6FE 100%);
  --g-icon-pink:   linear-gradient(225deg,#FDF2F8 0%,#FBCFE8 100%);
  --g-icon-cyan:   linear-gradient(225deg,#ECFEFF 0%,#A5F3FC 100%);

  /* 案例 / 新闻封面 */
  --g-cover-blue:   linear-gradient(225deg,#3B82F6 0%,#1D4ED8 100%);
  --g-cover-green:  linear-gradient(225deg,#10B981 0%,#059669 100%);
  --g-cover-purple: linear-gradient(225deg,#8B5CF6 0%,#6B46DA 100%);
  --g-cover-amber:  linear-gradient(225deg,#F59E0B 0%,#D97706 100%);

  /* ---------------------------------------------------------------
     5. 字号阶梯（桌面 → 移动 对应关系）
     --------------------------------------------------------------- */
  --fs-hero:      58px;  /* 移动 32  Hero 主标题 */
  --fs-h1:        44px;  /* 移动 22  CTA 标题、页面头部大标题 */
  --fs-h2:        40px;  /* 移动 24  区块标题 */
  --fs-h3:        34px;  /* 移动 22  关于区标题 */
  --fs-stat:      38px;  /* 移动 26  指标带数值 */
  --fs-stat-s:    28px;  /* 移动 20  案例卡数值 */
  --fs-card:      26px;  /* 移动 20  产品卡标题 */
  --fs-h4:        22px;  /* 移动 17  Hero 指标 / 卡内小标题 */
  --fs-h5:        21px;  /* 移动 17  优势卡标题 */
  --fs-card-s:    20px;  /* 移动 17  案例卡 / 迷你卡 / 步骤卡标题 */
  --fs-card-t:    20px;  /* 别名：案例卡标题（同 --fs-card-s） */
  --fs-news-t:    19px;  /* 移动 16  新闻标题 */
  --fs-lead:      17px;  /* 移动 14  区块副标题 */
  --fs-body:      16px;  /* 移动 14  正文 */
  --fs-body-s:    15px;  /* 移动 14  卡片说明、导航 */
  --fs-small:     14px;  /* 移动 13  列表项、次要说明 */
  --fs-xs:        13px;  /* 移动 12  标签文字、元信息 */
  --fs-2xs:       12px;  /* 移动 11  标记 pill、页脚备案 */
  --fs-3xs:       11px;  /* 移动 11  卡内标记 */

  --lh-tight:     1.2;   /* 大标题 */
  --lh-snug:      1.4;   /* 小标题 */
  --lh-normal:    1.6;   /* 正文 */
  --lh-relaxed:   1.75;  /* 长段落 */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------------------------------------------------------------
     6. 字体
     --------------------------------------------------------------- */
  --f-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-en: "Inter", "SF Pro Text", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-code: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------
     7. 圆角（实测：卡片 24 / 图标底 14 / 按钮 8 / 胶囊 999）
     --------------------------------------------------------------- */
  --r-pill:     999px;  /* 胶囊：标签、标记、语言切换 */
  --r-block:    24px;   /* 大区块：CTA 底、控制台窗口、产品/优势/案例卡 */
  --r-card:     24px;   /* 卡片（设计稿实测 r24） */
  --r-card-s:   18px;   /* 小卡片：优势卡、新闻卡 */
  --r-inner:    16px;   /* 卡内嵌套块、下拉面板 */
  --r-icon:     14px;   /* 图标底（56×56 / 48×48） */
  --r-sm:       12px;   /* 内嵌信息行、信赖客户底 */
  --r-chip:     12px;   /* 别名：内嵌信息行、地址栏 */
  --r-btn:       8px;   /* 按钮（设计稿实测 r8） */
  --r-btn-s:     8px;   /* 小按钮 */

  /* ---------------------------------------------------------------
     8. 阴影（实测卡片 0 10 15 -3 / 透明度 .08）
     --------------------------------------------------------------- */
  --sh-xs:    0 2px 6px   rgba(15,23,42,.06);
  --sh-card:  0 10px 15px -3px rgba(15,23,42,.08);   /* 卡片默认 */
  --sh-hover: 0 20px 30px -8px rgba(15,23,42,.12);   /* 卡片 hover 浮起 */
  --sh-lg:    0 16px 40px rgba(15,23,42,.12);        /* 控制台窗口、下拉面板 */
  --sh-brand: 0 20px 30px -8px rgba(37,99,235,.30);  /* 旗舰卡品牌色投影（实测） */
  --sh-float: 0 10px 28px rgba(15,23,42,.12);        /* 客服浮窗 */

  /* ---------------------------------------------------------------
     9. 间距与栅格
     --------------------------------------------------------------- */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;

  --sp-gutter:    120px;  /* 桌面左右留白（1440 − 120×2 = 1200 内容宽，实测） */
  --sp-gutter-t:   40px;  /* 平板左右留白 */
  --sp-gutter-m:   20px;  /* 移动左右留白（390 − 20×2 = 350 内容宽） */
  --sp-section:    96px;  /* 桌面区块纵向 padding（实测 5:1060 等） */
  --sp-section-t:  72px;  /* 平板区块纵向 padding */
  --sp-section-m:  52px;  /* 移动区块纵向 padding */
  --sp-block:      32px;  /* 区块内「标题组 ↔ 内容」间距（桌面实测 44，见下方覆盖） */
  --sp-card:       20px;  /* 卡片栅格间距（移动）。桌面 24，见下方覆盖 */

  --container:  1200px;  /* 内容最大宽度 */
  --container-m: 350px;  /* 移动内容宽（= 390 − 20×2） */

  /* ---------------------------------------------------------------
     10. 断点（CSS 变量不能用于 media query，此处仅作文档；
         实际写法见 styles.css 与各 HTML）
     --------------------------------------------------------------- */
  /* --bp-mobile: 0        ~ 767px    单列，栅格 1 列，gutter 20 */
  /* --bp-tablet: 768px    ~ 1023px   2 列，gutter 40，字号中档   */
  /* --bp-desktop:1024px   ~ 1439px   3 列，gutter 80            */
  /* --bp-wide:   1440px+             设计稿基准，gutter 120，内容宽 1200 */

  /* ---------------------------------------------------------------
     11. 过渡
     --------------------------------------------------------------- */
  --dur-fast:   150ms;
  --dur-base:   220ms;  /* 组件默认过渡时长 */
  --dur:        var(--dur-base);  /* 别名：styles.css 中统一引用 --dur */
  --dur-slow:   320ms;
  --ease:       cubic-bezier(.4,0,.2,1);
}

/* ============================================================================
   12. 响应式间距覆盖
   —— 设计稿桌面区块 padding 96/120、内部 gap 44、卡片间距 24；
      平板与移动按比例收敛。放在 :root 之外，避免被优先级覆盖。
   ========================================================================= */
@media (min-width: 768px) {
  :root {
    --sp-block: 38px;
    --sp-card:  24px;
  }
}

/* ============================================================================
   13. 响应式字号阶梯
   —— :root 里的 --fs-* 是桌面值（≥1024 生效）；下表按设计稿移动端实测值覆盖。
      移动端数值取自设计稿 97:xx 系列画板，平板档为等比过渡值。
   ========================================================================= */
@media (max-width: 767px) {
  :root {
    --fs-hero:      32px;
    --fs-h1:        22px;
    --fs-h2:        24px;
    --fs-h3:        22px;
    --fs-stat:      26px;
    --fs-stat-s:    20px;
    --fs-card:      20px;
    --fs-h4:        17px;
    --fs-h5:        17px;
    --fs-card-s:    17px;
    --fs-card-t:    17px;
    --fs-news-t:    16px;
    --fs-lead:      14px;
    --fs-body:      14px;
    --fs-body-s:    14px;
    --fs-small:     13px;
    --fs-xs:        12px;
    --fs-2xs:       11px;
    --fs-3xs:       11px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --fs-hero:      44px;
    --fs-h1:        32px;
    --fs-h2:        30px;
    --fs-h3:        26px;
    --fs-stat:      32px;
    --fs-stat-s:    24px;
    --fs-card:      22px;
    --fs-h4:        19px;
    --fs-h5:        18px;
    --fs-card-s:    18px;
    --fs-card-t:    18px;
    --fs-news-t:    17px;
    --fs-lead:      16px;
    --fs-body:      15px;
    --fs-body-s:    15px;
    --fs-small:     13px;
    --fs-xs:        12px;
    --fs-2xs:       11px;
    --fs-3xs:       11px;
  }
}
@media (min-width: 1024px) {
  :root {
    --sp-block: 44px;   /* 桌面实测值 */
    --sp-card:  24px;
  }
}