/* ==========================================================================
   tokens.css — 设计令牌（唯一来源）
   取值来源于 Figma 设计稿「Setrex Landing page Design」的实测数据，
   颜色 / 字号 / 行高 / 字距 / 圆角 / 阴影均为设计稿原值。

   本文件只定义变量，不产生任何选择器副作用。
   ========================================================================== */

:root {
  /* ---------- 色彩 ---------- */
  --c-bg: #010104; /* 页面底色 */
  --c-panel: #0c0c0f; /* 面板 / 卡片（深一档） */
  --c-panel-2: #111114; /* 面板（深两档） */
  --c-elevated: #16161a; /* 浮层 */
  --c-ink: #ffffff; /* 标题 / 主文字 */
  --c-body: rgba(224, 224, 224, 0.9); /* 正文 */
  --c-body-strong: #e0e0e0; /* 正文（不透明） */
  --c-muted: #757b83; /* 次要文字 */
  --c-faint: rgba(255, 255, 255, 0.55); /* 更弱的文字 */
  --c-logo: #d2d2d2; /* 文字标识 / 标签（设计稿中合作 logo 的灰） */
  --c-accent: #ff8300; /* 品牌橙（取自公司 logo） */
  --c-accent-rgb: 255 131 0; /* 上色的半透明派生用 */
  --c-accent-deep: #ffd7a3; /* 强调色浅调 */
  --c-accent-soft: #ffe2c4; /* 强调色柔调（标签底） */
  --c-accent-ink: #1a0d02; /* 强调色上的文字（暖黑） */
  --c-on-light: #010104; /* 白底上的文字 */

  /* ---------- 描边与分隔 ---------- */
  --c-line: rgba(255, 255, 255, 0.1); /* 细分隔线（实测 #FFFFFF@0.10） */
  --c-line-soft: rgba(255, 255, 255, 0.06);
  --c-line-strong: rgba(255, 255, 255, 0.18);
  --c-line-accent: rgb(var(--c-accent-rgb) / 0.35);

  /* ---------- 字体 ---------- */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

  /* 字号：设计稿 1512px 宽下的实测值，向下用 vw 等比收敛 */
  --fs-display: clamp(34px, 3.87vw, 58.5px); /* 58.5 / 68.2 / -2.48 */
  --fs-h2: clamp(30px, 3.18vw, 48.2px); /* 48.2 / 57.2 / -3.12 */
  --fs-h3: clamp(26px, 2.56vw, 38.7px); /* 38.7 / 50.4 / -2.52 */
  --fs-price: clamp(28px, 2.78vw, 42px); /* 42  / 50.4 / -2.52 */
  --fs-h4: clamp(22px, 1.98vw, 30px); /* 30  / 38.4 / -0.32 */
  --fs-h5: clamp(18px, 1.48vw, 22.4px); /* 22.4/ 28.8 / 0 */
  --fs-lead: clamp(15px, 1.1vw, 16.6px); /* 16.6/ 25.2 / -0.36 */
  --fs-body: clamp(14px, 0.97vw, 14.7px); /* 14.7/ 24   / -0.32 */
  --fs-label: clamp(12px, 0.85vw, 12.8px); /* 12.8/ 21   / -0.28 */
  --fs-stat: clamp(40px, 4.1vw, 62px); /* 62  / 62   / -4 */

  --lh-display: 1.166;
  --lh-h2: 1.187;
  --lh-h3: 1.3;
  --lh-h4: 1.28;
  --lh-h5: 1.286;
  --lh-lead: 1.518;
  --lh-body: 1.633;
  --lh-label: 1.64;

  --ls-display: -0.0424em;
  --ls-h2: -0.0647em;
  --ls-h3: -0.0651em;
  --ls-price: -0.06em;
  --ls-h4: -0.0107em;
  --ls-h5: 0em;
  --ls-lead: -0.0217em;
  --ls-body: -0.0218em;
  --ls-label: -0.0219em;
  --ls-stat: -0.0645em;

  /* ---------- 间距刻度（4pt 九档） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-20: 80px;
  --sp-30: 120px;

  /* ---------- 布局 ---------- */
  --design-w: 1512; /* 设计稿基准宽度 */
  --container: 1260px; /* 内容容器 */
  --gutter: clamp(20px, 8.33vw, 126px); /* 容器左右留白（1512 下为 126） */
  --header-h: 85px;
  /* 设计稿把 fixed 页眉烘进了首屏截图，导出时已裁掉顶部 85px，背景图因此从页眉下方开始绘制 */
  --hero-bg-offset: 86px;
  --header-pad: clamp(18px, 5.29vw, 80px); /* 页眉左右留白（1512 下为 80） */

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 7px; /* 徽标 / 标签 */
  --r-md: 12px; /* 卡片 */
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- 阴影与模糊 ---------- */
  --sh-card: 0 24px 24px rgba(0, 0, 0, 0.3);
  --sh-float: 0 20px 60px rgba(0, 0, 0, 0.45);
  --sh-accent: 0 0 40px rgb(var(--c-accent-rgb) / 0.28);
  --blur-glass: saturate(140%) blur(10px);
  --blur-float: saturate(160%) blur(22px);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;

  /* ---------- 渐变（设计稿实测） ---------- */
  --grad-hero-fade: linear-gradient(
    180deg,
    rgba(1, 1, 5, 0) 0%,
    rgba(1, 1, 5, 0.85) 62%,
    #010105 100%
  );
  --grad-header: linear-gradient(
    180deg,
    #010104 0%,
    rgba(1, 1, 3, 0.72) 42%,
    rgba(1, 1, 3, 0) 100%
  );
  --grad-text-fade: linear-gradient(
    90deg,
    rgba(238, 238, 238, 0) 30%,
    #eeeeee 50%,
    rgba(238, 238, 238, 0) 70%
  );
}