/* ============================================================
   CS Design Tokens
   文件: cs-starter/assets/css/tokens.css
   用途: 所有 CSS 变量定义 (深色/浅色模式)
   ============================================================ */

:root {
  /* ── 深色模式背景 ── */
  --bg-void: #05060a;
  --bg-base: #090b10;
  --bg-card: #121622;
  --bg-elevated: #1a1f35;
  --bg-border: rgba(255, 255, 255, 0.06);
  --bg-input: #0d1017;

  /* ── 浅色模式背景 ── */
  --bg-light-base: #F4F7FA;
  --bg-light-card: #FFFFFF;
  --bg-light-elevated: #F0F2F5;
  --bg-light-border: rgba(0, 0, 0, 0.08);
  --bg-light-input: #FFFFFF;

  /* ── 文字 (深色模式) ── */
  --t1: #edf0f7;
  --t2: #9aa3be;
  --t3: #566078;

  /* ── 文字 (浅色模式) ── */
  --t1-light: #1F2328;
  --t2-light: #57606A;
  --t3-light: #8B949E;

  /* ── 语义色 ── */
  --live: #22C55E;
  --live-bg: rgba(34, 197, 94, 0.12);
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --accent-bg: rgba(59, 130, 246, 0.12);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --wc-primary: #D4213D;
  --wc-gold: #FFD700;
  --wc-primary-bg: rgba(212, 33, 61, 0.12);

  /* ── 字体 ── */
  --fd: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --fm: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* ── 间距 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── 圆角 ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ── 阴影 ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  /* ── 过渡 ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  /* ── 布局 ── */
  --header-h: 56px;
  --sidebar-w: 260px;
  --content-max: 1200px;
  --footer-h: 200px;

  /* ── Z-index ── */
  --z-dropdown: 50;
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ── 浅色模式覆写 ── */
body.light-mode {
  --bg-base: var(--bg-light-base);
  --bg-card: var(--bg-light-card);
  --bg-elevated: var(--bg-light-elevated);
  --bg-border: var(--bg-light-border);
  --bg-input: var(--bg-light-input);
  --t1: var(--t1-light);
  --t2: var(--t2-light);
  --t3: var(--t3-light);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}