/* ====== 暗色主题设计令牌 - 币安风格三层深度 ====== */
:root {
  /* 背景色 - 三层深度 */
  --bg-deep: #0a0e17;      /* 最底层背景 */
  --bg-panel: #0d1117;     /* 面板背景 */
  --bg-card: #161b22;      /* 卡片背景 */
  --bg-elevated: #1c2333;  /* 悬浮/弹窗 */

  /* 边框与分割 */
  --border-default: #30363d;
  --border-muted: #21262d;

  /* 文字 */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #484f58;

  /* 语义色 - 同影子页面 */
  --green: #2ea043;
  --red: #f85149;
  --blue: #58a6ff;
  --gold: #d29922;
  --purple: #8957e5;
  --state-info: #58a6ff;
  --state-ai: #8957e5;

  /* 边框 */
  --border-strong: #30363d;

  /* 分组卡片颜色 - 与影子页面保持一致 */
  --color-diagnostic: #8957e5;
  --color-production: #2ea043;
  --color-legacy: #58a6ff;

  /* 布局 */
  --max-width: 100%;
  --nav-height: 48px;
  --tab-bar-height: 56px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 字体大小 */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 22px;

  /* 阴影 */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 480px) {
  :root {
    --space-xl: 16px;
    --space-lg: 12px;
  }
}