/* ========================================
   CSS 变量定义
   用于统一管理颜色、尺寸、断点等
   ======================================== */

:root {
  /* 颜色变量 */
  --primary-color: #259ad6;
  --primary-hover: #1476F9;
  --text-color: #333;
  --text-light: #666;
  --text-lighter: #999;
  --border-color: #eee;
  --bg-color: #f3f8fe;
  --white: #fff;
  --error-color: #E84026;
  
  /* 字体大小 */
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-size-xlarge: 18px;
  --font-size-xxlarge: 20px;
  
  /* 间距 */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;
  
  /* 容器宽度 */
  --container-max-width: 1200px;
  --container-padding: 15px;
  
  /* 圆角 */
  --border-radius-sm: 3px;
  --border-radius-md: 5px;
  --border-radius-lg: 8px;
  --border-radius-full: 50%;
  
  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
  
  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 响应式断点 (用于JS) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1260px;
  
  /* 头部高度 */
  --header-height-desktop: 80px;
  --header-height-mobile: 60px;
  
  /* Z-index层级 */
  --z-index-dropdown: 100;
  --z-index-sticky: 1000;
  --z-index-fixed: 9000;
  --z-index-modal: 9999;
  --z-index-tooltip: 10000;
}

/* 响应式字体大小调整 */
@media screen and (max-width: 768px) {
  :root {
    --font-size-base: 13px;
    --font-size-small: 11px;
    --font-size-large: 14px;
    --font-size-xlarge: 16px;
    --font-size-xxlarge: 18px;
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    
    --container-padding: 10px;
  }
}

/* 使用示例：
.button {
  background-color: var(--primary-color);
  color: var(--white);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-normal);
}

.button:hover {
  background-color: var(--primary-hover);
}
*/