/* ==========================================================================
   设计变量：颜色、尺寸、阴影、动画统一在此定义，其它样式文件只引用变量
   ========================================================================== */
:root {
  /* 主色板 */
  --color-bg: #0b1020;
  --color-bg-soft: #121933;
  --color-surface: #182142;
  --color-surface-2: #1f2a52;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-text: #eef2ff;
  --color-text-muted: #a3aed0;
  --color-text-dim: #7c88ab;

  /* 品牌色与状态色 */
  --color-primary: #5b7cfa;
  --color-primary-hover: #7290ff;
  --color-primary-active: #4a68e0;
  --color-primary-soft: rgba(91, 124, 250, 0.16);
  --color-success: #31d0aa;
  --color-warning: #f7b955;
  --color-danger: #f0596b;
  --color-danger-soft: rgba(240, 89, 107, 0.16);

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, #5b7cfa 0%, #8b5cf6 100%);
  --gradient-page: radial-gradient(1200px 600px at 15% -10%, rgba(91, 124, 250, 0.28), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(139, 92, 246, 0.22), transparent 55%), var(--color-bg);

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(4, 8, 20, 0.28);
  --shadow-md: 0 10px 30px rgba(4, 8, 20, 0.36);
  --shadow-lg: 0 24px 60px rgba(4, 8, 20, 0.5);
  --shadow-glow: 0 0 0 4px rgba(91, 124, 250, 0.22);

  /* 尺寸 */
  --header-height: 60px;
  --toolbar-height: 76px;
  --sidebar-width: 320px;
  --max-content-width: 1180px;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC',
    'Hiragino Sans GB', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* 动画 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  --z-header: 100;
  --z-sidebar: 200;
  --z-modal: 900;
  --z-toast: 1000;
}