/* ========================================
   Trade Platform - 主题变量定义
   现代化白色主题（专业交易平台风格）
   ======================================== */

:root {
  /* ========== 主色调 ========== */
  --bg-primary: #FFFFFF;          /* 主背景 */
  --bg-secondary: #F7F8FA;        /* 次要背景 */
  --bg-hover: #F1F3F5;            /* 悬停背景 */
  --bg-active: #E1E4E8;           /* 激活背景 */

  /* ========== 边框 ========== */
  --border-color: #E1E4E8;        /* 主边框 */
  --border-light: #F0F0F0;        /* 轻边框 */
  --border-dark: #D0D3D6;         /* 深边框 */

  /* ========== 文字 ========== */
  --text-primary: #1A1A1A;        /* 主文字 */
  --text-secondary: #666666;      /* 次要文字 */
  --text-tertiary: #999999;       /* 辅助文字 */
  --text-disabled: #CCCCCC;       /* 禁用文字 */
  --text-white: #FFFFFF;          /* 白色文字 */

  /* ========== 功能色 ========== */
  --color-green: #00C087;         /* 上涨/盈利 */
  --color-red: #FF4D4F;           /* 下跌/亏损 */
  --color-blue: #1890FF;          /* 链接/主操作 */
  --color-orange: #FF9800;        /* 警告 */
  --color-gray: #8C8C8C;          /* 中性灰色 */

  /* ========== 状态色 ========== */
  --status-success: #52C41A;      /* 成功 */
  --status-warning: #FAAD14;      /* 警告 */
  --status-error: #FF4D4F;        /* 错误 */
  --status-info: #1890FF;         /* 信息 */

  /* ========== 字体 ========== */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;

  --font-size-xs: 11px;           /* 辅助信息 */
  --font-size-sm: 12px;           /* 表格内容 */
  --font-size-base: 13px;         /* 正文 */
  --font-size-md: 14px;           /* 标题 */
  --font-size-lg: 16px;           /* 页面标题 */
  --font-size-xl: 18px;           /* 大标题 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== 间距（紧凑设计） ========== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;

  /* ========== 圆角 ========== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* ========== 阴影 ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ========== 过渡动画 ========== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ========== 布局尺寸 ========== */
  --topbar-height: 50px;
  --sidebar-width: 220px;
}

/* ========== 基础重置 ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 实用类 ========== */
.text-green { color: var(--color-green); }
.text-red { color: var(--color-red); }
.text-blue { color: var(--color-blue); }
.text-gray { color: var(--color-gray); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.bg-success { background-color: var(--status-success); }
.bg-warning { background-color: var(--status-warning); }
.bg-error { background-color: var(--status-error); }
.bg-info { background-color: var(--status-info); }