/* ======================================================
 * 文件: tokens.css
 * 职责: 定义全站的设计变量(Design Tokens)
 * 可修改性: 完全可修改，修改后全站样式会统一变化
 * 可删除性: 不可删除，其他CSS文件依赖此文件的变量
 * 学习知识点: CSS变量、设计系统、主题配置
 * ====================================================== */

/* :root 是CSS的根选择器，定义的变量可在全站使用 */
:root {
  /* ==================== 颜色系统 ==================== */
  /* 主色调 - 网站的核心品牌色 */
  --color-primary: #3b82f6;           /* 蓝色主色 */
  --color-primary-hover: #2563eb;     /* 鼠标悬停时的主色 */
  --color-primary-light: #dbeafe;     /* 主色的浅色背景 */
  
  /* 辅助色 - 用于强调和特殊标记 */
  --color-accent: #f59e0b;            /* 橙色辅助色 */
  --color-accent-hover: #d97706;      /* 悬停时的辅助色 */
  
  /* 成功/警告/错误状态色 */
  --color-success: #10b981;           /* 成功状态 - 绿色 */
  --color-warning: #f59e0b;           /* 警告状态 - 橙色 */
  --color-error: #ef4444;             /* 错误状态 - 红色 */
  
  /* 文字颜色层级 */
  --color-text-primary: #1f2937;      /* 主要文字 - 深灰色 */
  --color-text-secondary: #6b7280;    /* 次要文字 - 中灰色 */
  --color-text-muted: #9ca3af;        /* 辅助文字 - 浅灰色 */
  
  /* 背景颜色 */
  --color-bg-primary: #ffffff;        /* 主背景 - 白色 */
  --color-bg-secondary: #f3f4f6;      /* 次要背景 - 浅灰 */
  --color-bg-tertiary: #e5e7eb;       /* 第三背景 - 中灰 */
  
  /* 边框颜色 */
  --color-border: #e5e7eb;            /* 普通边框 */
  --color-border-light: #f3f4f6;      /* 浅色边框 */
  
  /* 阴影颜色 */
  --color-shadow: rgba(0, 0, 0, 0.1); /* 阴影颜色 */
  
  /* ==================== 字体系统 ==================== */
  /* 字体族 - 优先使用系统字体，保证加载速度 */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', monospace; /* 代码字体 */
  
  /* 字体大小 - 使用rem单位，便于整体缩放 */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px - 正文基准 */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  
  /* 字体粗细 */
  --font-weight-normal: 400;          /* 普通粗细 */
  --font-weight-medium: 500;          /* 中等粗细 */
  --font-weight-semibold: 600;        /* 半粗体 */
  --font-weight-bold: 700;            /* 粗体 */
  
  /* ==================== 间距系统 ==================== */
  /* 基础间距单位 - 所有间距都是8px的倍数 */
  --spacing-1: 0.25rem;               /* 4px */
  --spacing-2: 0.5rem;                /* 8px */
  --spacing-3: 0.75rem;               /* 12px */
  --spacing-4: 1rem;                  /* 16px */
  --spacing-5: 1.25rem;               /* 20px */
  --spacing-6: 1.5rem;                /* 24px */
  --spacing-8: 2rem;                  /* 32px */
  --spacing-10: 2.5rem;               /* 40px */
  --spacing-12: 3rem;                 /* 48px */
  --spacing-16: 4rem;                 /* 64px */
  --spacing-20: 5rem;                 /* 80px */
  
  /* ==================== 圆角系统 ==================== */
  --radius-sm: 0.375rem;              /* 6px */
  --radius-md: 0.5rem;                /* 8px */
  --radius-lg: 0.75rem;               /* 12px */
  --radius-xl: 1rem;                  /* 16px */
  --radius-full: 9999px;              /* 完全圆角(圆形) */
  
  /* ==================== 阴影系统 ==================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --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);
  
  /* ==================== 过渡动画 ==================== */
  --transition-fast: 0.15s ease;      /* 快速过渡 */
  --transition-normal: 0.25s ease;    /* 正常过渡 */
  --transition-slow: 0.35s ease;      /* 慢速过渡 */
  
  /* ==================== 布局系统 ==================== */
  --container-max-width: 1280px;      /* 最大容器宽度 */
  --container-padding: 1rem;          /* 容器内边距 */
  
  /* 侧边栏宽度 */
  --sidebar-width: 300px;             /* 侧边栏固定宽度 */
  
  /* 断点 - 响应式设计的屏幕宽度分界点 */
  --breakpoint-sm: 640px;             /* 小屏幕 */
  --breakpoint-md: 768px;             /* 平板 */
  --breakpoint-lg: 1024px;            /* 桌面端 */
  --breakpoint-xl: 1280px;            /* 大屏幕 */
}

/* 深色模式变量 - 添加 'dark' 类到 html 标签即可启用 */
/* 学习知识点: CSS类选择器、主题切换 */
:root.dark {
  /* 深色模式下的颜色覆盖 */
  --color-text-primary: #f9fafb;      /* 主要文字变亮 */
  --color-text-secondary: #d1d5db;    /* 次要文字变亮 */
  --color-text-muted: #9ca3af;        /* 辅助文字保持不变 */
  --color-bg-primary: #111827;        /* 主背景变暗 */
  --color-bg-secondary: #1f2937;      /* 次要背景变暗 */
  --color-bg-tertiary: #374151;       /* 第三背景变暗 */
  --color-border: #374151;            /* 边框颜色变深 */
  --color-border-light: #1f2937;      /* 浅色边框变深 */
  --color-shadow: rgba(0, 0, 0, 0.3); /* 阴影更深 */
}