/* ═══════════════════════════════════════════════════════════════
   Iteration 1 - 基础完善实施
   基于 Iteration 2 的洞察创建基础优化版本
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 简化版设计系统
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 基础动画时长 */
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;

  /* 基础缓动 */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* 基础间距 */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* 基础阴影 */
  --shadow-sm: 0 2px 8px rgba(42, 35, 70, 0.08);
  --shadow-md: 0 8px 24px rgba(42, 35, 70, 0.12);
  --shadow-lg: 0 16px 40px rgba(42, 35, 70, 0.16);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 基础动画协调 - 统一过渡时长
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.button,
.primary-action {
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 核心性能优化 - GPU加速
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card,
.button,
.hero-content {
  will-change: transform;
}

.product-card:not(:hover),
.button:not(:hover) {
  will-change: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 基础交互增强
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.button:hover,
.primary-action:hover {
  transform: translateY(-2px);
}

.button:active,
.primary-action:active {
  transform: translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. Focus状态优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*:focus-visible {
  outline: 2px solid rgba(154, 123, 230, 0.5);
  outline-offset: 3px;
  transition: outline-offset var(--duration-fast);
}

/* Reduced Motion: 统一由 civilization-tokens.css 处理 */