/* =============================================
   设计稿基准：1920px PC 稿
   断点：≤768px 移动端
   ============================================= */

@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/Oswald.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 颜色（待设计稿确认后填充） */
  --color-primary: #000;
  --color-bg: #fff;
  --color-text: #333;
  --color-text-secondary: #666;

  --header-nav-height: 80px;
  --site-header-offset: var(--header-nav-height);

  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Segoe UI", Arial, sans-serif;
  --font-family-oswald: 'Oswald', -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  --font-size-base: 16px;

  /* 间距基准（基于1920px设计稿，1px设计稿 ≈ 0.052vw） */
  --container-max: 1400px;
  --container-padding: 0px;
  /* 内容区两侧留白（与 .container 居中后的边距一致） */
  --page-gutter: 30px;
  --page-min-width: calc(var(--container-max) + var(--page-gutter) * 2);

  /* 过渡 */
  --transition: 0.3s ease;

  /* 可访问性（统一焦点样式） */
  --focus-ring: 0 0 0 3px rgba(211, 47, 47, 0.35);
  --focus-ring-strong: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* PC 整页最小宽度：内容区 1400 + 两侧留白各 30px（移动端单独覆盖） */
@media (min-width: 769px) {
  body {
    min-width: var(--page-min-width);
  }
}

@media (max-width: 768px) {
  body {
    min-width: 0;
  }
}

/* 统一焦点样式：仅键盘导航时显示 */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* =============================================
   断点：移动端  ≤768px
   ============================================= */
@media (max-width: 768px) {
  :root {
    --container-padding: 0px;
    /* 主导航固定在视口顶部（见 css/common/header.css） */
    --header-nav-height: 62px;
    --site-header-offset: var(--header-nav-height);
  }

  body {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-nav-height));
  }
}