/* =================================================================
   CSS Variables - CSS变量系统
   ================================================================= */

/* ==================== 文件说明 ====================
 * 文件名称: variables.css（原 color.css）
 * 所属层级: base（基础层）
 * 文件用途: 定义全站CSS变量（颜色、间距、字体等）
 * 核心功能: 支持明亮/暗色主题切换
 * 依赖关系: 需在 reset.css 之后加载
 * 维护说明: 所有颜色和尺寸变量集中管理，便于主题定制
 * ================================================== */

/* ==================== 目录结构 ====================
 * 1. 主色调系统（Primary Colors）
 * 2. 品牌色系统（Brand Colors）
 * 3. 功能色系统（Functional Colors）
 * 4. 背景色系统（Background Colors）
 * 5. 文字颜色系统（Text Colors）
 * 6. 边框颜色系统（Border Colors）
 * 7. 投影系统（Shadow System）
 * 8. 暗色主题适配（Dark Mode）
 * ================================================== */

/* 明亮模式（默认） */
:root {
  /* 主色调 */
  --primary-color: #0066FF;
  --primary-hover: #0052CC;
  --primary-active: #0041A3;
  
  /* 品牌色（特殊强调色） */
  --brand-green-light: #7FFF00;
  --brand-green-dark: #32CD32;
  --brand-black: #000000;
  
  /* 成功色（涨） */
  --success-color: #00C087;
  --success-light: #E6F9F3;
  
  /* 危险色（跌） */
  --danger-color: #FF4D4F;
  --danger-light: #FFF1F0;
  
  /* 警告色 */
  --warning-color: #FFA940;
  --warning-light: #FFF7E6;
  
  /* 排名徽章颜色 */
  --rank-gold: #FFD700;
  --rank-gold-dark: #FFA500;
  --rank-silver: #C0C0C0;
  --rank-silver-dark: #808080;
  --rank-bronze: #CD7F32;
  --rank-bronze-dark: #8B4513;
  
  /* 渐变色（用于封面等装饰） */
  --gradient-purple: #667eea;
  --gradient-purple-dark: #764ba2;
  --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  
  /* 标签颜色 */
  --tag-green: #34d399;
  --tag-green-bg: rgba(52, 211, 153, 0.1);
  --tag-orange: #fb923c;
  --tag-orange-bg: rgba(251, 146, 60, 0.1);
  
  /* 背景色 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F8FA;
  --bg-tertiary: #F0F2F5;
  --bg-hover: #E8EAED;
  
  /* 文字颜色 */
  --text-primary: #1A1D1F;
  --text-secondary: #6C757D;
  --text-tertiary: #ADB5BD;
  --text-white: #FFFFFF;
  
  /* 边框颜色 */
  --border-light: #E8EAED;
  --border-normal: #D1D5DB;
  --border-dark: #9CA3AF;
  --border-color: #E8EAED; /* 别名，指向 border-light */
  --border-hover: #0066FF; /* 悬停边框色，使用主色调 */
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 12px rgba(0, 102, 255, 0.3);
  --shadow-primary-hover: 0 6px 16px rgba(0, 102, 255, 0.4);
  
  /* 卡片/模块背景 */
  --card-bg: #FFFFFF;
  --card-border: #E8EAED;
  
  /* 导航栏 */
  --nav-bg: #FFFFFF;
  --nav-text: #1A1D1F;
  --nav-hover: #F7F8FA;
  
  /* ==================== 间距系统 ====================
   * 页面大块之间的间距原子化
   * 使用场景：section、card的padding和margin
   * ================================================== */
  
  /* 基础间距（元素内部小间距） */
  --spacing-xs: 4px;            /* 超小间距 - icon与文字 */
  --spacing-sm: 8px;            /* 小间距 - 紧密元素 */
  --spacing-md: 12px;           /* 中间距 - 常规元素 */
  --spacing-lg: 16px;           /* 大间距 - 卡片内部 */
  --spacing-xl: 20px;           /* 超大间距 - 分组元素 */
  
  /* Section/Card 内边距 (Padding) */
  --section-padding-sm: 20px;   /* 小卡片/移动端 */
  --section-padding-md: 24px;   /* 中卡片 */
  --section-padding-lg: 32px;   /* 大卡片/桌面端 */
  --section-padding-xl: 40px;   /* 超大区域 */
  
  /* Section 之间的间距 (Margin) */
  --section-gap-sm: 20px;       /* 小间距 */
  --section-gap-md: 24px;       /* 中间距 */
  --section-gap-lg: 32px;       /* 大间距 */
  --section-gap-xl: 40px;       /* 超大间距 */
  --section-gap-2xl: 60px;      /* 特大间距 */
  --section-gap-3xl: 80px;      /* 巨大间距 */
}

/* 黑暗模式 */
[data-theme="dark"] {
  /* 主色调 */
  --primary-color: #3B82F6;
  --primary-hover: #60A5FA;
  --primary-active: #2563EB;
  
  /* 品牌色（特殊强调色） */
  --brand-green-light: #7FFF00;
  --brand-green-dark: #32CD32;
  --brand-white: #FFFFFF;
  
  /* 成功色（涨） */
  --success-color: #10B981;
  --success-light: #064E3B;
  
  /* 危险色（跌） */
  --danger-color: #EF4444;
  --danger-light: #7F1D1D;
  
  /* 警告色 */
  --warning-color: #F59E0B;
  --warning-light: #78350F;
  
  /* 排名徽章颜色（暗色模式保持一致） */
  --rank-gold: #FFD700;
  --rank-gold-dark: #FFA500;
  --rank-silver: #C0C0C0;
  --rank-silver-dark: #808080;
  --rank-bronze: #CD7F32;
  --rank-bronze-dark: #8B4513;
  
  /* 渐变色（暗色模式稍微调整） */
  --gradient-purple: #7c3aed;
  --gradient-purple-dark: #6d28d9;
  --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  
  /* 标签颜色（暗色模式保持一致） */
  --tag-green: #34d399;
  --tag-green-bg: rgba(52, 211, 153, 0.1);
  --tag-orange: #fb923c;
  --tag-orange-bg: rgba(251, 146, 60, 0.1);
  
  /* 背景色 */
  --bg-primary: #070808;
  --bg-secondary: #1A1D1F;
  --bg-tertiary: #252830;
  --bg-hover: #2D3139;
  
  /* 文字颜色 */
  --text-primary: #E8EAED;
  --text-secondary: #ADB5BD;
  --text-tertiary: #6C757D;
  --text-white: #FFFFFF;
  
  /* 边框颜色 */
  --border-light: #252830;
  --border-normal: #363A43;
  --border-dark: #4B5563;
  --border-color: #252830; /* 别名，指向 border-light */
  --border-hover: #3B82F6; /* 悬停边框色，使用主色调 */
  
  /* 阴影 */
  --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);
  --shadow-primary: 0 4px 12px rgba(59, 130, 246, 0.3);
  --shadow-primary-hover: 0 6px 16px rgba(59, 130, 246, 0.4);
  
  /* 卡片/模块背景 */
  --card-bg: #1A1D1F;
  --card-border: #252830;
  
  /* 导航栏 */
  --nav-bg: #070808;
  --nav-text: #E8EAED;
  --nav-hover: #1A1D1F;
}

/* 平滑过渡动画 - 只应用于需要主题切换动画的元素 */
:root,
[data-theme="dark"],
[data-theme="light"],
body,
.card,
.btn,
button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}