/*
 * 主样式表 - 贝有科技官网
 * 模块化CSS架构入口文件
 *
 * 架构顺序：
 * 1. 设计系统变量
 * 2. 基础重置和排版
 * 3. 布局系统
 * 4. 组件样式
 * 5. 页面特定样式
 * 6. 工具类
 */

/* === 基础样式 === */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* === 布局系统 === */
@import url('./layout/grid.css');

/* === 组件样式 === */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/navigation.css');

/* === 工具类 === */
@import url('./utilities/spacing.css');
@import url('./utilities/animations.css');

/* === 页面特定样式 === */
@import url('./pages/home.css');
@import url('./pages/blog.css');

/*
 * 关键CSS - 首屏内容
 * 这些样式会被内联到HTML中以提高性能
 */
.critical-above-fold {
  /* 首屏关键样式将在这里定义 */
  /* 这部分将在性能优化阶段实施 */
}

/*
 * 渐进增强样式
 * 为支持现代CSS特性的浏览器提供增强体验
 */
@supports (backdrop-filter: blur(10px)) {
  .header--scrolled {
    backdrop-filter: blur(20px);
  }

  .card--glass {
    backdrop-filter: blur(10px);
  }
}

@supports (background-clip: text) {
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/*
 * 打印样式
 */
@media print {
  .header,
  .footer,
  .btn,
  .nav-menu {
    display: none !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #000;
  }

  * {
    background: white !important;
    color: black !important;
  }
}

/*
 * 高对比度模式支持
 */
@media (prefers-contrast: high) {
  .btn {
    border-width: 3px;
  }

  .card {
    border-width: 2px;
    border-color: var(--text-primary);
  }

  a {
    text-decoration: underline;
  }
}