/**
 * 主样式文件 - Main Stylesheet
 * 包含网站的核心样式和布局
 * 使用现代CSS特性和最佳实践
 */

/*
 * 导入其他样式文件
 * 按照依赖顺序导入
 */
@import url('reset.css');
@import url('variables.css');
@import url('header.css');
@import url('page-topbar.css');

/*
 * 导入Google Fonts
 * 使用display=swap优化字体加载性能
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/*
 * 基础样式 - Base Styles
 * 设置全局的基础样式
 */
html {
  /* 设置根字体大小，便于rem单位计算 */
  font-size: 16px;

  /* 启用平滑滚动 */
  scroll-behavior: smooth;

  /* 优化字体渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* 设置字体族 */
  font-family: var(--font-family-primary);

  /* 设置基础字体大小和行高 */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);

  /* 设置文本颜色 */
  color: #333333;

  /* 设置背景为白色 */
  background: #ffffff;

  /* 确保最小高度为视窗高度 */
  min-height: 100vh;

  /* 防止水平滚动 */
  overflow-x: hidden;
}
/* 全站去除链接下划线 */
a, a:visited, a:hover, a:active {
  text-decoration: none !important;
}

/* 去除导航链接的装饰性下划线效果（若存在） */
.nav-menu .nav-link::after,
.navbar-nav .nav-link::after {
  content: none !important;
  display: none !important;
}


/*
 * 容器系统 - Container System
 * 响应式容器，限制最大宽度并居中内容
 */
.container {
  /* 设置最大宽度 */
  max-width: var(--container-xl);

  /* 水平居中 */
  margin-left: auto;
  margin-right: auto;

  /* 设置水平内边距 */
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);

  /* 设置宽度为100% */
  width: 100%;
}

/* 响应式容器变体 */
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/*
 * 网格系统 - Grid System
 * 基于CSS Grid的响应式网格
 */
.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/*
 * Flexbox工具类 - Flexbox Utilities
 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/*
 * 间距工具类 - Spacing Utilities
 */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }

.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/*
 * 文本工具类 - Text Utilities
 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/*
 * 颜色工具类 - Color Utilities
 */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/*
 * 卡片组件 - Card Component
 * 玻璃拟态风格的卡片
 */
.card {
  /* 玻璃拟态背景 */
  background: var(--glass-background);
  backdrop-filter: var(--glass-backdrop-filter);
  -webkit-backdrop-filter: var(--glass-backdrop-filter);

  /* 边框 */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);

  /* 内边距 */
  padding: var(--spacing-6);

  /* 阴影 */
  box-shadow: var(--shadow-lg);

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

.card:hover {
  /* 悬停时增强效果 */
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/*
 * 按钮组件 - Button Component
 * 现代化的按钮样式
 */
.btn {
  /* 基础样式 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);

  /* 内边距 */
  padding: var(--spacing-3) var(--spacing-6);

  /* 字体样式 */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;

  /* 边框和圆角 */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);

  /* 光标和用户选择 */
  cursor: pointer;
  user-select: none;

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

  /* 文本装饰 */
  text-decoration: none;

  /* 防止换行 */
  white-space: nowrap;
}

/* 主要按钮样式 */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* 强调按钮样式 */
.btn-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  color: var(--color-gray-900);
  border-color: var(--color-accent);
}

.btn-accent:hover {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* 轮廓按钮样式 */
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

/* 按钮大小变体 */
.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
}

/*
 * 响应式设计 - Responsive Design
 * 移动优先的响应式断点
 */

/* 小屏幕设备 (640px及以上) */
@media (min-width: 640px) {
  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:text-lg { font-size: var(--font-size-lg); }
}

/* 中等屏幕设备 (768px及以上) */
@media (min-width: 768px) {
  .container {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:text-xl { font-size: var(--font-size-xl); }
  .md\:text-2xl { font-size: var(--font-size-2xl); }
}

/* 大屏幕设备 (1024px及以上) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:text-2xl { font-size: var(--font-size-2xl); }
  .lg\:text-3xl { font-size: var(--font-size-3xl); }
}

/* 超大屏幕设备 (1280px及以上) */
@media (min-width: 1280px) {
  .xl\:text-4xl { font-size: var(--font-size-4xl); }
  .xl\:text-5xl { font-size: var(--font-size-5xl); }
}