/* ============================================================
   睿尚电子 WINSUN — 设计令牌 (Design Tokens)
   提取自 Figma 设计稿 (node 1101:2148 首页 / 深色科技风)
   ============================================================ */
:root {
  /* ---- 品牌色 ---- */
  --c-navy: #000124;          /* 页面/英雄区 深底 */
  --c-navy-2: #03061f;        /* 次级深底 */
  --c-teal: #3dc8c1;          /* 主强调色 / CTA 按钮 */
  --c-teal-bright: #00bc8f;   /* 渐变青绿 (logo) */
  --c-blue: #32acde;          /* 渐变蓝 (logo) */
  --c-mint: #5be0d6;          /* 点缀亮青 */

  /* ---- 中性色 ---- */
  --c-white: #ffffff;
  --c-paper: #f9f9f9;          /* 浅色屏背景 (页面底色) */
  --c-ink: #000124;            /* 浅色屏文字 (深蓝近黑) */
  --c-grey-45: #737373;
  --c-grey-9c: #9c9c9c;
  --c-grey-a1: #a1a1a1;
  --c-grey-d: #d8d8d8;
  --c-line: rgba(255, 255, 255, 0.10);
  --c-line-soft: rgba(255, 255, 255, 0.06);

  /* ---- 文字色 ---- */
  --t-primary: #ffffff;
  --t-muted: #9c9c9c;
  --t-dim: #737373;

  /* ---- 字体 ---- */
  --font-cn: "Noto Sans SC", "Source Han Sans CN", "PingFang SC",
             "Microsoft YaHei", sans-serif;
  --font-en: "Inter", var(--font-cn);
  --font-num: "Work Sans", "Inter", sans-serif;

  /* ---- 字号：4 档阶梯 (1920 设计基准) ----
     每档一条 clamp 曲线，从 1920 线性缩到 480，不再依赖断点覆盖。
     新增字号一律从这四档里选，不要再写死 px。
     四个单例组件 (首屏主标题 / 首屏标签行 / 头部品牌名 / 404 数字) 的缩放比阶梯更陡，
     各自在所属 CSS 里写了带注释的 clamp，属于有意的例外，不要并回阶梯。
                          1920   1280    768    480
     --fs-l   标题         52     41      33     28
     --fs-m   小标题       26     23      21     20
     --fs-s   正文/UI      18     17      16     16
     --fs-xs  辅助         13     13      13     13                        */
  --fs-l:  clamp(28px, calc(20px + 1.667vw), 52px);
  --fs-m:  clamp(20px, calc(18px + 0.417vw), 26px);
  --fs-s:  clamp(16px, calc(15px + 0.16vw), 18px);
  --fs-xs: 13px;

  /* ---- 间距 ---- */
  --gutter: clamp(24px, 4.2vw, 200px);
  /*--gutter: clamp(24px, 10.42vw, 200px);  /* 容器左右留白；1920 下=200，窄屏按比例 */
  --container: 1520px;        /* 内容区宽度 (200~1720) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ---- 头部 ---- */
  --header-h: 140px;
}

@media (max-width: 580px) {
  :root {
    --gutter: 20px; 
  }
}