/* ===== 颜色系统 ===== */
:root {
  /* 主色 */
  --color-primary: #14AFE6;
  --color-primary-hover: #48C4F2;
  --color-primary-active: #0B7FB8;
  
  /* 状态色 */
  --color-success: #41B43C;
  --color-warning: #FFD200;
  --color-error: #EB000F;
  --color-info: #14AFE6;
  
  /* 中性色 */
  --color-text-primary: #123047;
  --color-text-secondary: #557083;
  --color-text-tertiary: #8AA3AF;
  --color-border: #CDE8F2;
  --color-bg: #ffffff;
  --color-bg-secondary: #F8FCFF;
  --color-bg-tertiary: #F6F7D2;
  --color-bg-hover: #EAF8FE;
  
  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* 圆角 */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* 过渡动画 */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  
  /* 断点 */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;
}

/* 暗色模式 */
[data-theme="dark"] {
  --color-primary: #4EC8F3;
  --color-primary-hover: #77D8FA;
  --color-primary-active: #14AFE6;
  --color-success: #63D05E;
  --color-warning: #FFD84D;
  --color-error: #FF5A63;
  --color-info: #4EC8F3;
  --color-text-primary: #EAF8FE;
  --color-text-secondary: #B5CCD6;
  --color-text-tertiary: #7C9CAC;
  --color-border: rgba(151, 213, 235, .22);
  --color-bg: #0B2638;
  --color-bg-secondary: #102F43;
  --color-bg-tertiary: #16384E;
  --color-bg-hover: rgba(78, 200, 243, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}