/* ============================================================
 * variables.css — 设计令牌（颜色 / 间距 / 圆角 / 阴影 / 动效）
 * 所有颜色、圆角、间距、缓动集中管理，便于整体调性调整。
 * ============================================================ */
:root {
  /* 背景层次：深黑 → 蓝黑 → 墨蓝 */
  --bg-0: #070a12;
  --bg-1: #0b1020;
  --bg-2: #0e1530;
  --bg-grad:
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(20,35,70,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 90%, rgba(15,30,60,0.4) 0%, transparent 55%),
    radial-gradient(120% 100% at 50% 0%, #0e1530 0%, #0b1020 45%, #070a12 100%);

  /* 面板（低透深色） */
  --panel: rgba(16, 22, 40, 0.55);
  --panel-strong: rgba(18, 25, 46, 0.78);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-soft: rgba(255, 255, 255, 0.06);

  /* 文字 */
  --ink: #eaf0fb;       /* 暖白主文字 */
  --ink-2: #9aa6c0;     /* 次级 */
  --ink-3: #5e6a86;     /* 弱化 */

  /* 强调色：电光蓝 / 冷银 / 低饱和紫 / 在线绿 */
  --accent: #5b8fd6;
  --accent-2: #8aa6e0;
  --silver: #c7d2e6;
  --violet: #6b5f9e;
  --online: #5fe3b0;
  --glow: rgba(91, 143, 214, 0.40);

  /* 圆角体系（统一） */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* 阴影：大范围低透明，避免硬黑阴影 */
  --shadow-soft: 0 24px 60px -28px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 18px 48px -24px rgba(0, 0, 0, 0.7);

  /* 间距 */
  --gap: clamp(16px, 2.4vw, 32px);
  --pad-x: clamp(20px, 6vw, 96px);
  --maxw: 1280px;

  /* 统一缓动 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-mid: 360ms;
  --t-slow: 700ms;

  /* 层级 */
  --z-rain: 0;
  --z-fog: 1;
  --z-content: 10;
  --z-nav: 50;
  --z-progress: 60;
  --z-settings: 70;
  --z-debug: 80;

  --font-cn: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-en: "Inter", "Arial", system-ui, sans-serif;
}