/* base.css —— reset、排版基线、焦点可见、动效降级。依赖：tokens.css */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text-2);
  font-family: var(--site-font-sans);
  font-size: var(--site-body-md);
  line-height: var(--site-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }

/* ---------- 排版基线 ---------- */
.display-hero {
  font-size: var(--site-display-hero);
  line-height: var(--site-lh-hero);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--site-text-1);
}

.display-section {
  font-size: var(--site-display-section);
  line-height: var(--site-lh-section);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--site-text-1);
}

.display-sub {
  font-size: var(--site-display-sub);
  line-height: var(--site-lh-sub);
  font-weight: 600;
  color: var(--site-text-1);
}

.lead {
  font-size: var(--site-lead);
  line-height: var(--site-lh-lead);
  color: var(--site-text-2);
  max-width: 68ch;
}

.eyebrow {
  font-size: var(--site-eyebrow);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--site-accent);
  text-transform: none;
}

.body-md { font-size: var(--site-body-md); line-height: var(--site-lh-body); }
.body-sm { font-size: var(--site-body-sm); line-height: 1.6; }
.body-xs { font-size: var(--site-body-xs); line-height: 1.5; }
.muted { color: var(--site-text-3); }

.num {
  font-family: var(--site-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- 深色区文本反转 ---------- */
.on-dark .display-hero,
.on-dark .display-section,
.on-dark .display-sub,
.on-dark .section__title { color: var(--site-ink-text-1); }
.on-dark .lead { color: var(--site-ink-text-2); }
.on-dark .muted { color: var(--site-ink-text-3); }
.on-dark .eyebrow { color: var(--site-ink-text-2); }

/* ---------- 焦点可见（AC-11） ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--site-ring-light);
  border-radius: var(--site-radius-xs);
}
.on-dark :focus-visible,
.on-dark:focus-visible { box-shadow: var(--site-ring-dark); }

/* ---------- 跳过导航 ---------- */
.skip-link {
  position: absolute;
  left: var(--site-gutter);
  top: -60px;
  z-index: var(--site-z-toast);
  padding: 10px 16px;
  background: var(--site-surface);
  color: var(--site-accent);
  border-radius: var(--site-radius-md);
  box-shadow: var(--site-shadow-raised);
  font-size: var(--site-body-sm);
  transition: top var(--site-dur-fast) var(--site-ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- 图标 ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
}
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--spin { animation: site-spin 600ms linear infinite; }

@keyframes site-spin { to { transform: rotate(360deg); } }

/* ---------- 屏幕阅读器专用 ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 进场动效（AC-09 / AC-10） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--site-dur-reveal) var(--site-ease-reveal),
    transform var(--site-dur-reveal) var(--site-ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .icon--spin { animation: none; }
}