/* =============================================================
   设计令牌（Design Tokens）— 双轨视觉语言
   亮轨 track-tech：理性/科学（浅底 + 科技蓝）
   暗轨 track-music：感性/沉浸（深底 + 律动橙）
   ============================================================= */
:root {
  /* —— 品牌色：科技蓝（IoT/AI 专业线） —— */
  --primary:        #1a6ff5;
  --primary-dark:   #0d4fc0;
  --primary-light:  #e8f2ff;
  --primary-glow:   rgba(26, 111, 245, .15);

  /* —— 品牌色：律动橙（音乐/艺术线） —— */
  --accent:         #ff5722;
  --accent-dark:    #d84315;
  --accent-light:   #fff3ed;
  --accent-glow:    rgba(255, 87, 34, .15);

  /* —— 中性色 —— */
  --bg:             #ffffff;
  --bg-soft:        #f8fafc;
  --bg-mute:        #f1f5f9;
  --text:           #0f172a;
  --text-2:         #475569;
  --text-mute:      #94a3b8;
  --border:         #dbe2ec;
  --border-soft:    #eef2f7;
  --border-strong:  #cdd6e2;

  /* —— 功能色 —— */
  --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6;

  /* —— 渐变 —— */
  --grad-tech:   linear-gradient(135deg, #1a6ff5 0%, #0d4fc0 50%, #0a3d8f 100%);
  --grad-music:  linear-gradient(135deg, #ff5722 0%, #e91e63 50%, #9c27b0 100%);
  --grad-hero:   linear-gradient(135deg, #1a6ff5 0%, #6366f1 40%, #a855f7 70%, #ff5722 100%);
  --grad-soft:   linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

  /* —— 字体 —— */
  --font-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:    'Noto Sans SC', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* —— 字号阶梯 —— */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem; --t-xl:1.25rem;
  --t-2xl:1.5rem; --t-3xl:1.875rem; --t-4xl:2.25rem; --t-5xl:3rem; --t-6xl:3.75rem;

  /* —— 间距（8px 基准，连续补全，避免缺失令牌导致 calc() 整条声明失效 —— */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s7:1.75rem; --s8:2rem; --s9:2.25rem; --s10:2.5rem; --s11:2.75rem; --s12:3rem;
  --s13:3.25rem; --s14:3.5rem; --s15:3.75rem; --s16:4rem; --s17:4.25rem; --s18:4.5rem;
  --s19:4.75rem; --s20:5rem; --s22:5.5rem; --s24:6rem;

  /* —— 圆角 / 阴影 / 动效 —— */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --sh-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --sh-xl: 0 20px 25px rgba(0,0,0,.10), 0 8px 10px rgba(0,0,0,.06);
  --sh-glow: 0 0 40px rgba(26,111,245,.15);
  --tf-fast:150ms ease; --tf:300ms ease; --tf-slow:500ms ease;
  --tf-spring:500ms cubic-bezier(.34,1.56,.64,1);

  --nav-h: 68px;
  --maxw: 1200px;

  /* —— 表面 / 层级（卡片、弹层、芯片）—— 必须先在根定义，否则卡片无底色 */
  --bg-card:    #ffffff;            /* 亮轨卡片底色 */
  --surface:    var(--bg-card);     /* 组件底色别名（学术页等使用） */
  --surface-2:  var(--bg-mute);     /* 次级表面（输入框、芯片底） */
  --elevated:   #ffffff;
  --shadow-card: var(--sh-md);      /* 卡片阴影别名 */
  --text-muted: var(--text-mute);   /* 别名，避免 --text-muted 未定义 */
  --text-soft:  var(--text-2);      /* 别名 */
  --chip-bg:    var(--bg-mute);     /* 关键词芯片底 */
  --chip-fg:    var(--text-2);      /* 关键词芯片字 */
  --music:      var(--accent);      /* 音乐品牌主色（律动橙）；平台卡用各自品牌色覆盖 */
  --hairline:   var(--border-soft); /* 区块/版本分隔线（清晰分界） */
}

/* 亮轨作用域：显式给卡片底色，并兼容 body[data-track="tech"] 写法 */
.track-tech, body[data-track="tech"] {
  --bg-card: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--bg-mute);
  --elevated: #ffffff;
}

/* 暗轨作用域：覆盖中性色为深色，强调色保持律动橙；兼容 body[data-track="music"] */
.track-music, body[data-track="music"] {
  --bg:        #0a0a0f;
  --bg-soft:   #121217;
  --bg-mute:   #1a1a22;
  --text:      #f5f6fa;
  --text-2:    #c2c6d2;
  --text-mute: #8b8fa3;
  --border:    rgba(255,255,255,.12);
  --border-soft: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.18);
  --bg-card:   #15151c;
  --surface:   #15151c;
  --surface-2: #1a1a22;
  --elevated:  #1c1c26;
  --shadow-card: 0 10px 30px rgba(0,0,0,.45);
  --chip-bg:   rgba(255,255,255,.08);
  --chip-fg:   #c2c6d2;
  --sh-md: 0 10px 30px rgba(0,0,0,.45);
  --sh-lg: 0 18px 40px rgba(0,0,0,.55);
}