/* ============================================================
   OpsDash Design Tokens
   来源: DESIGN.md 第 2-8 章
   规则: 禁止硬编码颜色/字号/间距，全部使用 --od-* token
   ============================================================ */

:root {
  /* --- 2.1 主色与背景（深色） --- */
  --od-primary: #00d4ff;
  --od-primary-light: #38bdf8;
  --od-primary-dark: #0284c7;
  --od-bg-base: #0a0f1e;
  --od-bg-surface: #0f172a;
  --od-bg-elevated: #1e293b;
  --od-bg-card: rgba(30, 41, 59, 0.7);

  /* --- 2.2 文字与边框 --- */
  --od-text-primary: rgba(255, 255, 255, 0.92);
  --od-text-secondary: rgba(255, 255, 255, 0.65);
  --od-text-tertiary: rgba(255, 255, 255, 0.40);
  --od-border: rgba(255, 255, 255, 0.08);
  --od-border-glow: rgba(0, 212, 255, 0.25);

  /* --- 2.3 语义色 --- */
  --od-success: #22d3ee;
  --od-warning: #fbbf24;
  --od-danger: #f43f5e;
  --od-info: #60a5fa;

  /* --- 2.4 强调色 --- */
  --od-accent-purple: #a78bfa;
  --od-accent-pink: #f472b6;
  --od-accent-green: #34d399;

  /* --- 2.5 玻璃效果 --- */
  --od-glass-bg: rgba(15, 23, 42, 0.6);
  --od-glass-border: rgba(255, 255, 255, 0.08);
  --od-glass-blur: 12px;

  /* --- 3. 字体 --- */
  --od-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --od-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* --- 3. 字号梯度 --- */
  --od-text-xs: 12px;
  --od-text-sm: 13px;
  --od-text-base: 14px;
  --od-text-lg: 16px;
  --od-text-xl: 18px;
  --od-text-2xl: 20px;
  --od-text-3xl: 24px;
  --od-text-4xl: 30px;

  /* --- 4. 间距 (4px 倍数) --- */
  --od-space-xs: 4px;
  --od-space-sm: 8px;
  --od-space-md: 12px;
  --od-space-lg: 16px;
  --od-space-xl: 24px;
  --od-space-2xl: 32px;
  --od-space-3xl: 40px;
  --od-space-4xl: 48px;

  /* --- 5. 圆角 --- */
  --od-radius-sm: 6px;
  --od-radius-md: 8px;
  --od-radius-lg: 12px;

  /* --- 6. 阴影与发光（深色 — 青色辉光） --- */
  --od-glow-sm: 0 0 8px rgba(0, 212, 255, 0.3);
  --od-glow-md: 0 0 16px rgba(0, 212, 255, 0.4);
  --od-glow-lg: 0 0 24px rgba(0, 212, 255, 0.5);
  --od-text-glow: 0 0 12px rgba(0, 212, 255, 0.4);
  --od-icon-glow: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));

  /* --- 7. Z-index --- */
  --od-z-base: 1;
  --od-z-dropdown: 10;
  --od-z-sticky: 100;
  --od-z-modal: 1000;
  --od-z-toast: 2000;
  --od-z-max: 9999;

  /* --- 8. 过渡 --- */
  --od-transition-fast: 0.15s ease;
  --od-transition-normal: 0.25s ease;
  --od-transition-slow: 0.4s ease;
}

/* ============================================================
   浅色模式覆盖
   网站内容区通过 [data-theme="light"] 切换
   ============================================================ */
[data-theme="light"] {
  --od-primary: #0284c7;
  --od-primary-light: #0ea5e9;
  --od-primary-dark: #0369a1;
  --od-bg-base: #f0f2f5;
  --od-bg-surface: #ffffff;
  --od-bg-elevated: #ffffff;
  --od-bg-card: rgba(255, 255, 255, 0.85);

  --od-text-primary: rgba(0, 0, 0, 0.88);
  --od-text-secondary: rgba(0, 0, 0, 0.65);
  --od-text-tertiary: rgba(0, 0, 0, 0.45);
  --od-border: rgba(0, 0, 0, 0.06);
  --od-border-glow: rgba(2, 132, 199, 0.15);

  --od-success: #10b981;
  --od-warning: #f59e0b;
  --od-danger: #ef4444;
  --od-info: #3b82f6;

  --od-accent-purple: #7c3aed;
  --od-accent-pink: #ec4899;
  --od-accent-green: #10b981;

  --od-glass-bg: rgba(255, 255, 255, 0.7);
  --od-glass-border: rgba(0, 0, 0, 0.06);

  --od-glow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --od-glow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --od-glow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --od-text-glow: none;
  --od-icon-glow: none;
}