/**
 * 家脉云 CSS 变量定义
 * 
 * 【文档引用】UI设计规范-V1.0.md
 * 
 * @description 定义全局CSS变量，严格按照UI设计规范
 * @version V1.3.0
 */

:root {
  /* ==================== 配色变量 - 严格按照UI设计规范 ==================== */
  
  /* 主色调 - 蓝色 */
  --primary-color: #1e40af;
  --primary-color-dark: #1e3a8a;
  
  /* 强调色 - 橙色（仅用于主按钮和重要提醒！） */
  --accent-color: #f97316;
  --accent-color-dark: #ea580c;
  
  /* 状态色 */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  
  /* 中性色 */
  --white: #ffffff;
  --background-light: #f8fafc;
  --border-color: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  /* ==================== 间距变量 - 严格按照UI设计规范 ==================== */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 页面边距 */
  --page-padding: 24px;
  --max-width: 1200px;
  
  /* ==================== 圆角变量 - 严格按照UI设计规范 ==================== */
  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  
  /* ==================== 阴影变量 ==================== */
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* ==================== 过渡变量 ==================== */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ==================== 字体变量 ==================== */
  
  /* 字体家族 */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  
  /* 字号 - 严格按照UI设计规范 */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-xs: 12px;
  
  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-h1: 1.3;
  --line-height-h2: 1.4;
  --line-height-h3: 1.4;
  --line-height-body: 1.6;
  --line-height-small: 1.5;
  
  /* ==================== 层级变量 ==================== */
  
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal-overlay: 2000;
  --z-modal: 2001;
  --z-toast: 3000;
}

/* ==================== 移动端变量覆盖 ==================== */
@media (max-width: 768px) {
  :root {
    /* 字号适配 */
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 16px;
    --font-size-body: 15px;
    --font-size-small: 13px;
    
    /* 间距适配 */
    --page-padding: 16px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
  }
}