/* ==========================================================================
   中山名智 · 设计 Token（设计变量 - 5 页共用）
   基于 demo.html 的暗色科技感方案 A
   ========================================================================== */

:root {
  /* —— 色彩 —— */
  --bg-primary:    #0A0B0D;          /* 主背景 */
  --bg-elev:       #111317;          /* 卡片抬升 */
  --surface:       #16181D;          /* 表面 */
  --surface-2:     #1C1F25;          /* 双层边框内层 */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text:          #F5F6F7;
  --text-mute:     #9AA0A6;
  --text-soft:     #C8CCD2;

  /* —— 火焰橙（品牌强调色） —— */
  --accent:        #FF6A2C;
  --accent-soft:   #FF8B59;
  --accent-flame:  #FFB347;

  /* —— 紫青辉光（仅 ambient / 装饰） —— */
  --glow-violet:   #7B5CFF;
  --glow-cyan:     #5CEAFF;

  /* —— 字体 —— */
  --font-display: 'Instrument Serif', 'Noto Serif SC', serif;
  --font-sans:    'Inter Tight', 'PingFang SC', 'HarmonyOS Sans SC', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* —— 圆角 —— */
  --radius:        28px;
  --radius-md:     20px;
  --radius-sm:     14px;
  --radius-pill:   9999px;

  /* —— 阴影（极克制）—— */
  --shadow-soft:   0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover:  0 8px 28px rgba(0, 0, 0, 0.35);

  /* —— 动效 —— */
  --ease:          cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-y:      20px;
  --reveal-blur:   0px;
  --reveal-dur:    900ms;

  /* —— 间距 —— */
  --section-py:    clamp(80px, 9vw, 160px);
  --gutter:        clamp(20px, 4vw, 32px);
  --max-w:         1240px;
}