/* ============================================================
   锐捷极简以太彩光 5.0 专题页 · 设计令牌 (Design Tokens)
   延续锐捷官网/落地页既有视觉语言：锐捷红 + 暗蓝科技基底
   所有组件样式必须引用本文件变量，禁止硬编码色值/字号
   ============================================================ */

:root {
  /* ---------- 品牌色 Brand ---------- */
  --rj-red:            #E60039;   /* Figma / 锐捷官网品牌红 */
  --rj-red-deep:       #C50031;   /* hover / pressed */
  --rj-red-soft:       #FFF0F2;   /* 浅底标签、表格高亮行 */
  --rj-red-line:       rgba(230,0,18,.24);

  /* ---------- 暗蓝科技基底 Deep ---------- */
  --deep-900:          #08132A;   /* Hero 最深 */
  --deep-800:          #0C1A33;   /* 深色区块主底 */
  --deep-700:          #132B5E;   /* 渐变高点 */
  --deep-600:          #1B3D80;
  --deep-text:         #9FB8D6;   /* 深底上的次级文字 */
  --deep-line:         rgba(255,255,255,.12);

  /* ---------- 中性色 Neutral ---------- */
  --ink:               #2A2B2E;   /* Figma 深色文字 */
  --ink-2:             #6A6B6D;   /* Figma 中色文字 */
  --ink-3:             #9B9FA8;   /* Figma 浅色文字 */
  --line:              #E3E5E6;
  --line-soft:         #F1F3F5;
  --bg:                #FFFFFF;
  --bg-soft:           #F7F8FA;   /* 交替区块底 */
  --bg-mute:           #FAFBFC;

  /* ---------- 语义色（仅用于表格判定，不参与品牌表达） ---------- */
  --ok:                #0E8A45;
  --warn:              #B8860B;

  /* ---------- 光效 Glow（"彩光"意象，纯 CSS 无位图） ---------- */
  --glow-cyan:         rgba(0,196,255,.30);
  --glow-violet:       rgba(120,80,255,.26);
  --glow-red:          rgba(230,0,18,.22);
  --spectrum: linear-gradient(90deg,#E60012 0%,#FF7A18 18%,#FFC400 34%,#28C76F 52%,#00C4FF 70%,#5A6CFF 86%,#A855F7 100%);

  /* ---------- 字体 Typography ---------- */
  /* 全局不指定字体，使用电脑默认字体（含数字） */
  --font-sans: system-ui, sans-serif;
  --font-num:  var(--font-sans);

  /* 字阶（桌面基准，移动端在 base.css 中降级） */
  --fs-display:  48px;   --lh-display: 1.25;
  --fs-h1:       44px;   --lh-h1:      1.18;
  --fs-h2:       36px;   --lh-h2:      1.25;
  --fs-h3:       18px;   --lh-h3:      1.5;
  --fs-h4:       18px;   --lh-h4:      1.45;
  --fs-body:     16px;   --lh-body:    1.5;
  --fs-sm:       14px;   --lh-sm:      1.5;
  --fs-xs:       12px;   --lh-xs:      1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   700;

  /* ---------- 栅格 Grid ---------- */
  --container:      1400px;   /* Figma 桌面画板内容宽度 */
  --container-wide: 1400px;
  --gutter:         24px;
  --pad-x:          24px;

  /* ---------- 间距 Spacing（4 的倍数） ---------- */
  --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-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --section-y:      96px;   /* 区块上下留白（桌面） */
  --section-y-sm:   56px;   /* 区块上下留白（移动） */

  /* ---------- 圆角 Radius ---------- */
  --r-sm: 4px;  --r-md: 4px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

  /* ---------- 阴影 Elevation ---------- */
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 4px 16px rgba(16,24,40,.07);
  --sh-3: 0 12px 32px rgba(16,24,40,.10);
  --sh-red: 0 8px 24px rgba(230,0,18,.22);

  /* ---------- 动效 Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.4,0,.2,1);
  --dur-1: .16s;  --dur-2: .28s;  --dur-3: .56s;

  /* ---------- 层级 Z-index ---------- */
  --z-nav: 100;  --z-drawer: 110;  --z-toast: 200;

  /* ---------- 吸顶导航高度（锚点定位需同步） ---------- */
  --nav-h: 86px;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 32px;
    --fs-h1:      28px;
    --fs-h2:      24px;
    --fs-h3:      19px;
    --fs-h4:      16px;
    --fs-body:    15px;
    --pad-x:      16px;
    --gutter:     16px;
    --nav-h:      64px;
  }
}