/* ========================================================================
   宸擎科技官网 - 设计令牌（Design Tokens）
   参考：Apple / Stripe / Linear 官网白色商务基调
   ======================================================================== */

:root {
  /* ========== 色彩 ========== */
  /* 背景层 */
  --color-bg:              #ffffff;  /* 主背景 - 纯白 */
  --color-bg-subtle:       #f5f5f7;  /* 次背景 - Apple 浅灰 */
  --color-bg-dark:         #1d1d1f;  /* 深背景 - 反色 section / 页脚 */
  --color-bg-dark-subtle:  #2a2a2d;  /* 深背景次色 */

  /* 文字层 */
  --color-text:            #1d1d1f;  /* 主文字 - 接近纯黑 */
  --color-text-secondary:  #6e6e73;  /* 次文字 - Apple 中灰 */
  --color-text-tertiary:   #86868b;  /* 弱文字 - 元数据 */
  --color-text-inverse:    #f5f5f7;  /* 反色文字 - 深背景用 */
  --color-text-inverse-sub:#a1a1a6;  /* 反色次文字 */

  /* 边框/分隔 */
  --color-border:          #d2d2d7;  /* 标准分隔线 */
  --color-border-subtle:   #e4e4e7;  /* 弱分隔线 */
  --color-border-inverse:  #424245;  /* 深背景分隔 */

  /* 品牌强调色 */
  --color-accent:          #1f6feb;  /* Stripe 蓝 - 主 CTA / 链接 hover */
  --color-accent-hover:    #1858c4;  /* 强调色 hover */
  --color-accent-subtle:  rgba(31, 111, 235, 0.08);  /* 强调色浅底 */
  --color-brand:           #FF4D2E;  /* 宸擎红橙 - 数据高亮，克制使用 */
  --color-brand-subtle:    rgba(255, 77, 46, 0.08);

  /* 状态色 */
  --color-success:         #34c759;
  --color-success-subtle:  rgba(52, 199, 89, 0.08);
  --color-warning:         #ff9f0a;
  --color-error:           #ff3b30;

  /* ========== 字体 ========== */
  --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* 字号阶梯 - clamp(最小, 视口比例, 最大) */
  --text-hero:    clamp(40px, 6vw, 72px);
  --text-h1:      clamp(36px, 5vw, 56px);
  --text-h2:      clamp(28px, 4vw, 44px);
  --text-h3:      clamp(20px, 2vw, 24px);
  --text-h4:      18px;
  --text-lead:    18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 13px;
  --text-kicker:  12px;

  /* 字重 */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* 行高 */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* 字间距 */
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ========== 间距系统（4 倍数） ========== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ========== 布局 ========== */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-py:    96px;        /* section 上下间距 */
  --section-py-sm: 64px;       /* 小间距 section */
  --section-py-mobile: 64px;

  /* ========== 圆角 ========== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ========== 阴影 ========== */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 4px 16px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.12);

  /* ========== 过渡 ========== */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ========== z-index ========== */
  --z-base:    1;
  --z-sticky: 100;
  --z-nav:    1000;
  --z-modal:  2000;
  --z-toast:  3000;
}

/* ========== 响应式断点 ========== */
/*
  sm: 640px  - 手机横屏
  md: 768px  - 平板竖屏
  lg: 1024px - 平板横屏 / 小笔记本
  xl: 1280px - 桌面
  2xl: 1536px - 大桌面
*/