/* ==================== 设计系统 - 统一样式变量 ==================== */

/* 
 * 配色方案：采用深蓝/灰色系为主色调，符合管理系统专业感
 * 参考主流 admin 模板的中性色系搭配
 */

:root {
  /* ============ 主色调 ============ */
  --primary-color: #3b82f6;           /* 主蓝色 */
  --primary-light: #60a5fa;           /* 浅蓝 */
  --primary-lighter: #93c5fd;         /* 更浅蓝 */
  --primary-dark: #2563eb;            /* 深蓝 */
  --primary-darker: #1e40af;          /* 更深蓝 */
  
  /* ============ 辅助色 ============ */
  --success-color: #10b981;           /* 成功绿 */
  --warning-color: #f59e0b;           /* 警告橙 */
  --danger-color: #ef4444;            /* 危险红 */
  --info-color: #6366f1;              /* 信息紫 */
  
  /* ============ 中性色 ============ */
  --text-primary: #1f2937;            /* 主要文本 */
  --text-secondary: #6b7280;          /* 次要文本 */
  --text-tertiary: #9ca3af;           /* 三级文本 */
  --text-disabled: #d1d5db;           /* 禁用文本 */
  
  /* ============ 背景色 ============ */
  --bg-primary: #ffffff;              /* 主背景 */
  --bg-secondary: #f9fafb;            /* 次背景 */
  --bg-tertiary: #f3f4f6;             /* 三级背景 */
  --bg-hover: #f3f4f6;                /* 悬停背景 */
  --bg-active: #e5e7eb;               /* 激活背景 */
  
  /* ============ 侧边栏配色 ============ */
  --sidebar-bg: #1e293b;              /* 侧边栏背景 - 深蓝灰 */
  --sidebar-bg-light: #334155;        /* 侧边栏浅色 */
  --sidebar-text: #cbd5e1;            /* 侧边栏文本 */
  --sidebar-text-active: #ffffff;     /* 侧边栏激活文本 */
  --sidebar-active-bg: #3b82f6;       /* 侧边栏激活背景 */
  --sidebar-hover-bg: #334155;        /* 侧边栏悬停背景 */
  
  /* ============ 边框色 ============ */
  --border-color: #e5e7eb;            /* 主边框 */
  --border-light: #f3f4f6;            /* 浅边框 */
  --border-dark: #d1d5db;             /* 深边框 */
  
  /* ============ 阴影 ============ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ============ 圆角 ============ */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* ============ 间距 ============ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  
  /* ============ 字体大小 ============ */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;
  --font-3xl: 24px;
  --font-4xl: 28px;
  --font-5xl: 32px;
  
  /* ============ 字重 ============ */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ============ 行高 ============ */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ============ 过渡动画 ============ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ============ 层级 ============ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ============ 布局尺寸 ============ */
  --header-height: 60px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  
  /* ============ 响应式断点 ============ */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ==================== 暗色模式（可选） ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-disabled: #6b7280;
    
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-hover: #374151;
    --bg-active: #4b5563;
    
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #6b7280;
  }
}

/* ==================== 通用工具类 ==================== */

/* 文本省略 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 过渡动画 */
.transition-base {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* Flex 布局 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 卡片效果 */
.card-hover {
  transition: all var(--transition-base);
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

