/* ═══════════════════════════════════════════════════════════════════
   百盛AI · 丝路智能网络 — Design Tokens v1.0
   深色科技风 · 零外部依赖 · 移动端友好
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 色彩体系 (6层) ─────────────────────────────────────────── */

  /* 1. 主色 Primary — 紫蓝渐变系 */
  --color-primary:        #6c5ce7;   /* 基础紫 */
  --color-primary-100:    #8b7df0;   /* 浅紫 hover */
  --color-primary-200:    #a78bfa;   /* 更浅 装饰 */
  --color-primary-300:    #c4b5fd;   /* 最浅 背景点缀 */
  --color-primary-400:    #5b4bd5;   /* 深紫 active */
  --color-primary-500:    #4a3db3;   /* 最深 深沉底 */
  --color-primary-glow:   rgba(108,92,231,0.35); /* 发光色 */

  /* 2. 辅色 Secondary — 青色科技感 */
  --color-secondary:      #00d4ff;   /* 亮青 */
  --color-secondary-100:  #33ddff;   /* 浅青 */
  --color-secondary-200:  #0ab8e0;   /* 深青 */
  --color-secondary-glow: rgba(0,212,255,0.3);

  /* 3. 强调色 Accent — 暖金点缀 */
  --color-accent:         #f0a500;   /* 琥珀金 */
  --color-accent-100:     #f5c04d;   /* 浅金 */
  --color-accent-glow:    rgba(240,165,0,0.25);

  /* 4. 中性色 Neutral — 层次暗色 */
  --neutral-0:            #ffffff;
  --neutral-50:           #f0f0fa;
  --neutral-100:          #e0e0ec;   /* 正文 */
  --neutral-200:          #b8b8cc;   /* 次级文 */
  --neutral-300:          #8e8ea6;   /* 占位符 */
  --neutral-400:          #6b6b82;   /* 禁用文 */
  --neutral-500:          #4a4a60;   /* 边框 */
  --neutral-600:          #33334a;   /* 卡片面 */
  --neutral-700:          #1e1e33;   /* 悬浮面 */
  --neutral-800:          #13131f;   /* 背景中层 */
  --neutral-900:          #0a0a14;   /* 背景深层 */
  --neutral-950:          #06060d;   /* 最深底 */

  /* 5. 功能色 Semantic */
  --color-success:        #00d68f;   /* 成功绿 */
  --color-success-bg:     rgba(0,214,143,0.12);
  --color-warning:        #ff9f43;   /* 警告橙 */
  --color-warning-bg:     rgba(255,159,67,0.12);
  --color-error:          #ff6b6b;   /* 错误红 */
  --color-error-bg:       rgba(255,107,107,0.12);
  --color-info:           #45a7ff;   /* 信息蓝 */

  /* 6. 背景色 Background */
  --bg-root:              #06060d;
  --bg-page:              #0a0a14;
  --bg-surface:           #13131f;
  --bg-card:              #1a1a2e;
  --bg-card-hover:        #22223a;
  --bg-glass:             rgba(19,19,31,0.6);
  --bg-glass-border:      rgba(108,92,231,0.12);
  --bg-overlay:           rgba(0,0,0,0.6);

  /* ── 渐变预设 ──────────────────────────────────────────────── */

  --gradient-primary:     linear-gradient(135deg, #6c5ce7 0%, #a855f7 50%, #4a3db3 100%);
  --gradient-secondary:   linear-gradient(135deg, #00d4ff 0%, #0ab8e0 50%, #6c5ce7 100%);
  --gradient-accent:      linear-gradient(135deg, #f0a500 0%, #ff9f43 50%, #ff6b6b 100%);
  --gradient-hero:        linear-gradient(160deg, #0a0a14 0%, #1a1040 30%, #101830 60%, #0a0a14 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(108,92,231,0.3), rgba(0,212,255,0.15), rgba(240,165,0,0.1));
  --gradient-text:        linear-gradient(135deg, #a78bfa 0%, #00d4ff 100%);

  /* ── 字体体系 ───────────────────────────────────────────────── */

  /* 字族 — 系统字体栈 零外部依赖 */
  --font-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                   'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono',
                   'Menlo', 'Noto Sans Mono', monospace;
  --font-display:  var(--font-sans);  /* 展示标题用系统黑体即可 */

  /* 字号阶梯 — 基于 8px 网格 */
  --text-xs:       0.75rem;    /* 12px — 标签/辅助 */
  --text-sm:       0.8125rem;  /* 13px — 小正文 */
  --text-base:     0.9375rem;  /* 15px — 正文 */
  --text-md:       1.0625rem;  /* 17px — 强调正文 */
  --text-lg:       1.25rem;    /* 20px — 小标题 */
  --text-xl:       1.5rem;     /* 24px — 标题 */
  --text-2xl:      2rem;       /* 32px — 大标题 */
  --text-3xl:      2.5rem;     /* 40px — Hero */
  --text-4xl:      3.5rem;     /* 56px — 超大 */

  /* 字重 */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* 行高 */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;
  --leading-loose:  1.8;

  /* ── 间距体系 (4px 基准) ───────────────────────────────────── */

  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* 页面容器 */
  --content-max: 1200px;
  --content-narrow: 800px;
  --section-pad: var(--space-16);

  /* ── 圆角体系 ───────────────────────────────────────────────── */

  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ── 阴影体系 ───────────────────────────────────────────────── */

  --shadow-xs:     0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:     0 2px 4px rgba(0,0,0,0.3), 0 1px 3px rgba(108,92,231,0.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(108,92,231,0.08);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.5), 0 4px 12px rgba(108,92,231,0.1);
  --shadow-xl:     0 16px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(108,92,231,0.12);
  --shadow-glow:   0 0 20px var(--color-primary-glow);
  --shadow-glow-sm:0 0 10px rgba(108,92,231,0.2);
  --shadow-cyan:   0 0 16px var(--color-secondary-glow);

  /* ── 过渡动画 ───────────────────────────────────────────────── */

  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-lazy:  600ms;

  /* ── Z-Index ────────────────────────────────────────────────── */

  --z-base:        0;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-overlay:     300;
  --z-modal:       400;
  --z-toast:       500;
}

/* ── 暗色滚动条 (Webkit) ──────────────────────────────────────── */

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-root); }
::-webkit-scrollbar-thumb  { background: var(--neutral-500); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ── 全局选择高亮 ────────────────────────────────────────────── */

::selection {
  background: rgba(108,92,231,0.35);
  color: var(--neutral-0);
}