/* ============================================================
   X1 DESIGN SYSTEM · variables.css
   X1 / DIGITAL ASSET / AI / TRADING / FUTURE / PROFESSIONAL
   ------------------------------------------------------------
   设计 Token：颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 / 层级
   ============================================================ */

:root {
  /* ---------- 品牌色 ---------- */
  --x1-primary:        #3b82f6;   /* X1 Blue 电光蓝（主色） */
  --x1-primary-strong: #2563eb;   /* 强调蓝（hover/active） */
  --x1-primary-soft:   rgba(59, 130, 246, 0.12);
  --x1-primary-glow:   rgba(59, 130, 246, 0.35);

  /* ---------- 涨跌色 ---------- */
  --x1-up:     #16c784;   /* 上涨 绿 */
  --x1-down:   #ea3943;   /* 下跌 红 */
  --x1-warning:#f0b90b;   /* 警告 黄 */

  /* ---------- 背景色（深色科技风） ---------- */
  --x1-bg-0:      #060a14;              /* 最深层背景 */
  --x1-bg-1:      #0a0f1c;              /* 主背景 */
  --x1-bg-2:      #0f1626;              /* 卡片加深 */
  --x1-bg-3:      #151e33;              /* 浮层/弹窗 */
  --x1-bg-4:      #1c2740;              /* 输入框/hover 态 */

  /* ---------- 半透明卡片 ---------- */
  --x1-surface:    rgba(21, 30, 51, 0.72);
  --x1-surface-2:  rgba(28, 39, 64, 0.55);

  /* ---------- 边框（细蓝/灰蓝） ---------- */
  --x1-border:      rgba(86, 120, 180, 0.22);
  --x1-border-soft: rgba(86, 120, 180, 0.12);
  --x1-border-strong: rgba(90, 140, 255, 0.4);

  /* ---------- 文字 ---------- */
  --x1-text-1: #eaf1ff;              /* 主文字 白 */
  --x1-text-2: #9fb0d0;              /* 次文字 灰蓝 */
  --x1-text-3: #5d6f92;              /* 弱文字 */
  --x1-text-4: rgba(234, 241, 255, 0.38);  /* 占位/禁用 */
  --x1-link:   #5b9bff;

  /* ---------- 阴影 / 发光 ---------- */
  --x1-shadow-1:  0 2px 8px rgba(0,0,0,0.4);
  --x1-shadow-2:  0 8px 24px rgba(0,0,0,0.5);
  --x1-shadow-3:  0 16px 48px rgba(0,0,0,0.6);
  --x1-glow-primary: 0 0 24px rgba(59, 130, 246, 0.25);
  --x1-glow-up:       0 0 18px rgba(22, 199, 132, 0.22);
  --x1-glow-down:     0 0 18px rgba(234, 57, 67, 0.22);

  /* ---------- 圆角 ---------- */
  --x1-radius-sm:  6px;
  --x1-radius-md:  10px;
  --x1-radius-lg:  14px;
  --x1-radius-xl:  20px;
  --x1-radius-full: 999px;

  /* ---------- 间距（8pt 网格） ---------- */
  --x1-space-1: 4px;
  --x1-space-2: 8px;
  --x1-space-3: 12px;
  --x1-space-4: 16px;
  --x1-space-5: 20px;
  --x1-space-6: 24px;
  --x1-space-8: 32px;
  --x1-space-10: 40px;
  --x1-space-12: 48px;
  --x1-space-16: 64px;

  /* ---------- 字体 ---------- */
  --x1-font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  --x1-font-num: 'Rajdhani', 'Inter', 'DIN Alternate', monospace;  /* 数字/行情 */
  --x1-font-size-xs: 11px;
  --x1-font-size-sm: 12px;
  --x1-font-size-md: 13px;
  --x1-font-size-base: 14px;
  --x1-font-size-lg: 16px;
  --x1-font-size-xl: 18px;
  --x1-font-size-2xl: 22px;
  --x1-font-size-3xl: 28px;
  --x1-font-size-4xl: 36px;
  --x1-font-size-hero: 48px;

  /* ---------- 动效（克制） ---------- */
  --x1-speed-fast: 0.12s;
  --x1-speed:      0.2s;
  --x1-speed-slow: 0.32s;
  --x1-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --x1-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 布局 ---------- */
  --x1-sidebar-w:      224px;
  --x1-sidebar-w-collapsed: 68px;
  --x1-header-h:       56px;
  --x1-mobile-tabbar-h: 56px;
  --x1-content-max:    1440px;

  /* ---------- 层级 z-index ---------- */
  --x1-z-header:   100;
  --x1-z-sidebar:  200;
  --x1-z-modal:    1000;
  --x1-z-toast:    2000;
  --x1-z-wallet:   3000;
}

/* ---------- 深色滚动条（兼容） ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(120,150,200,0.4) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(120,150,200,0.35); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }