/* 响应式工具类 */
@layer utilities {
  /* 屏幕阅读器专用 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* 超宽屏适配 */
  @media (min-width: 1600px) {
    .container-xl {
      max-width: 1600px;
    }
  }

  /* 平板优化 */
  @media (min-width: 768px) and (max-width: 1024px) {
    .tablet-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* 移动端优化 */
  @media (max-width: 767px) {
    .mobile-safe-area {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .touch-target-min {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* 性能优化类 */
  .will-change-transform {
    will-change: transform;
  }

  .will-change-opacity {
    will-change: opacity;
  }

  .will-change-auto {
    will-change: auto;
  }

  .gpu-accelerated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* 减少动画 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 焦点可见性优化 */
  .focus-visible-outline:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* 文本可读性优化 */
  .text-balance {
    text-wrap: balance;
  }

  /* 图片优化 */
  .img-responsive {
    max-width: 100%;
    height: auto;
  }

  /* 打印优化 */
  @media print {
    .no-print {
      display: none !important;
    }
    
    .print-break-inside-avoid {
      break-inside: avoid;
    }
  }
}

/* === 全局 focus-visible 样式 - WCAG 2.4.7 === */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 移除默认 focus 样式（避免鼠标点击也显示焦点环） */
*:focus:not(:focus-visible) {
  outline: none;
}

/* skip-link 标准化 - 无障碍跳转链接 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}
