/* ======================================================
 * 文件: base.css
 * 职责: 定义全站的基础样式和布局规则
 * 可修改性: 可修改，修改会影响全站基础样式
 * 可删除性: 不可删除，其他组件样式依赖此文件
 * 学习知识点: CSS重置、盒模型、布局、响应式
 * ====================================================== */

/* ==================== CSS重置 ==================== */
/* 清除浏览器默认样式，确保各浏览器表现一致 */
/* 学习知识点: 全局选择器、CSS重置 */
*,
*::before,
*::after {
  margin: 0;                          /* 清除默认外边距 */
  padding: 0;                         /* 清除默认内边距 */
  box-sizing: border-box;             /* 盒模型设为border-box */
}

/* ==================== HTML和Body基础样式 ==================== */
html {
  font-family: var(--font-family-sans); /* 使用设计变量中的字体 */
  font-size: 16px;                    /* 设置基准字体大小 */
  scroll-behavior: smooth;            /* 平滑滚动效果 */
}

body {
  color: var(--color-text-primary);   /* 使用设计变量中的文字颜色 */
  background-color: var(--color-bg-primary); /* 使用设计变量中的背景色 */
  line-height: 1.6;                   /* 设置行高，提高可读性 */
  -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
  -moz-osx-font-smoothing: grayscale;  /* macOS字体抗锯齿 */
}

/* ==================== 链接样式 ==================== */
/* 学习知识点: 链接伪类选择器 */
a {
  color: var(--color-primary);        /* 链接颜色使用主色 */
  text-decoration: none;              /* 去掉下划线 */
  transition: color var(--transition-normal); /* 颜色过渡动画 */
}

a:hover {
  color: var(--color-primary-hover); /* 鼠标悬停时颜色变深 */
}

/* ==================== 标题样式 ==================== */
/* 学习知识点: 标题层级、字体大小、粗细 */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold); /* 使用设计变量中的字体粗细 */
  line-height: 1.2;                   /* 标题行高更小 */
  margin-bottom: var(--spacing-4);    /* 标题下方留白 */
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* ==================== 段落样式 ==================== */
p {
  margin-bottom: var(--spacing-4);    /* 段落下方留白 */
}

/* ==================== 图片样式 ==================== */
img {
  max-width: 100%;                    /* 图片最大宽度100%，防止溢出 */
  height: auto;                       /* 高度自动，保持比例 */
  display: block;                     /* 块级显示 */
}

/* ==================== 容器样式 ==================== */
/* 学习知识点: max-width、margin auto、响应式容器 */
.container {
  max-width: var(--container-max-width); /* 使用设计变量中的最大宽度 */
  margin: 0 auto;                     /* 水平居中 */
  padding: 0 var(--container-padding); /* 左右内边距 */
}

/* ==================== 网格布局系统 ==================== */
/* 学习知识点: CSS Grid布局 */
.grid {
  display: grid;                      /* 使用Grid布局 */
  gap: var(--spacing-6);              /* 网格间距 */
}

/* 两列网格 */
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
}

/* 三列网格 */
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
}

/* 侧边栏布局: 主内容区 + 侧边栏 */
.grid-sidebar {
  grid-template-columns: 1fr var(--sidebar-width); /* 主内容区自适应，侧边栏固定宽度 */
}

/* ==================== 弹性布局系统 ==================== */
/* 学习知识点: CSS Flexbox布局 */
.flex {
  display: flex;                      /* 使用Flex布局 */
}

.flex-col {
  flex-direction: column;             /* 垂直方向排列 */
}

.items-center {
  align-items: center;                /* 垂直居中 */
}

.justify-center {
  justify-content: center;            /* 水平居中 */
}

.justify-between {
  justify-content: space-between;     /* 两端对齐 */
}

.flex-wrap {
  flex-wrap: wrap;                    /* 换行 */
}

.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

/* ==================== 卡片基础样式 ==================== */
.card {
  background-color: var(--color-bg-primary); /* 卡片背景 */
  border-radius: var(--radius-lg);    /* 圆角 */
  box-shadow: var(--shadow-md);       /* 阴影 */
  border: 1px solid var(--color-border); /* 边框 */
  overflow: hidden;                   /* 裁剪溢出内容 */
  transition: all var(--transition-normal); /* 所有属性过渡动画 */
}

.card:hover {
  box-shadow: var(--shadow-lg);       /* 悬停时阴影变大 */
  transform: translateY(-2px);        /* 悬停时轻微上移 */
}

/* ==================== 按钮基础样式 ==================== */
/* 学习知识点: 按钮样式、伪类、过渡 */
.btn {
  display: inline-flex;               /* 内联弹性布局 */
  align-items: center;                /* 垂直居中 */
  justify-content: center;            /* 水平居中 */
  padding: var(--spacing-3) var(--spacing-6); /* 内边距 */
  border-radius: var(--radius-md);    /* 圆角 */
  font-weight: var(--font-weight-medium); /* 字体粗细 */
  font-size: var(--font-size-base);   /* 字体大小 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  border: none;                       /* 去掉边框 */
  transition: all var(--transition-normal); /* 过渡动画 */
  text-decoration: none;              /* 去掉下划线 */
}

/* 主按钮样式 */
.btn-primary {
  background-color: var(--color-primary); /* 主色背景 */
  color: white;                       /* 白色文字 */
}

.btn-primary:hover {
  background-color: var(--color-primary-hover); /* 悬停时背景变深 */
}

/* 次要按钮样式 */
.btn-secondary {
  background-color: var(--color-bg-secondary); /* 次要背景色 */
  color: var(--color-text-primary);   /* 主要文字色 */
  border: 1px solid var(--color-border); /* 边框 */
}

.btn-secondary:hover {
  background-color: var(--color-bg-tertiary); /* 悬停时背景变深 */
}

/* ==================== 标签基础样式 ==================== */
.tag {
  display: inline-flex;               /* 内联弹性布局 */
  align-items: center;                /* 垂直居中 */
  padding: var(--spacing-1) var(--spacing-3); /* 内边距 */
  border-radius: var(--radius-full);  /* 完全圆角 */
  font-size: var(--font-size-xs);     /* 小号字体 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  background-color: var(--color-primary-light); /* 主色浅色背景 */
  color: var(--color-primary);        /* 主色文字 */
}

/* ==================== 响应式工具类 ==================== */
/* 学习知识点: CSS媒体查询、响应式设计 */

/* 隐藏类 */
.hidden {
  display: none !important;           /* 强制隐藏 */
}

/* 仅在小屏幕显示 */
@media (max-width: var(--breakpoint-md)) {
  .hidden-mobile {
    display: none !important;         /* 移动端隐藏 */
  }
  
  /* 移动端单列网格 */
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr;       /* 变为单列 */
  }
  
  /* 移动端侧边栏布局变为单列 */
  .grid-sidebar {
    grid-template-columns: 1fr;       /* 变为单列 */
  }
}

/* 仅在大屏幕显示 */
@media (min-width: var(--breakpoint-lg)) {
  .hidden-desktop {
    display: none !important;         /* 桌面端隐藏 */
  }
}

/* ==================== 滚动条样式 ==================== */
/* 自定义滚动条外观 */
/* 学习知识点: CSS滚动条伪类 */
::-webkit-scrollbar {
  width: 8px;                         /* 滚动条宽度 */
  height: 8px;                        /* 滚动条高度 */
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary); /* 滚动条轨道背景 */
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-tertiary); /* 滚动条滑块背景 */
  border-radius: var(--radius-full);  /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted); /* 悬停时变亮 */
}

/* ==================== 动画类 ==================== */
/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;                       /* 初始透明度0 */
    transform: translateY(20px);      /* 初始位置向下20px */
  }
  to {
    opacity: 1;                       /* 结束透明度1 */
    transform: translateY(0);         /* 结束位置恢复 */
  }
}

/* 使用淡入动画的类 */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards; /* 应用动画 */
}

/* 延迟动画 - 用于列表项依次显示 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }