/**
 * Zermatt Biotech — Base styles
 * Reset 极简化（不用 normalize 全套，只处理我们用得到的）+ typography 基础
 */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--zb-font-body);
  font-size: var(--zb-body-size);
  line-height: var(--zb-body-lh);
  color: var(--zb-ink-primary);
  background: var(--zb-surface-white);
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--zb-font-display);
  font-weight: 600;
  color: var(--zb-brand-deep);
  letter-spacing: var(--zb-tracking-tight);
}

h1 { font-size: var(--zb-h1-size); line-height: var(--zb-h1-lh); }
h2 { font-size: var(--zb-h2-size); line-height: var(--zb-h2-lh); }
h3 { font-size: var(--zb-h3-size); line-height: var(--zb-h3-lh); }
h4 { font-size: var(--zb-h4-size); line-height: var(--zb-h4-lh); font-weight: 500; }

p {
  margin: 0;
  color: var(--zb-ink-primary);
}

a {
  color: var(--zb-brand-mid);
  text-decoration: none;
  transition: color var(--zb-dur) var(--zb-ease);
}
a:hover { color: var(--zb-brand-deep); }
a:focus-visible {
  outline: 2px solid var(--zb-brand-mid);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mono */
code, .zb-mono {
  font-family: var(--zb-font-mono);
  font-size: var(--zb-mono-size);
  line-height: var(--zb-mono-lh);
}

/* Image defaults */
img, svg { display: block; max-width: 100%; height: auto; }

/* Selection */
::selection { background: var(--zb-brand-sky); color: var(--zb-brand-deep); }

/* Container */
.zb-container {
  width: 100%;
  max-width: var(--zb-max-width);
  margin: 0 auto;
  padding-left: var(--zb-sp-6);
  padding-right: var(--zb-sp-6);
}

.zb-section {
  padding-top: var(--zb-section-pad-y);
  padding-bottom: var(--zb-section-pad-y);
}
.zb-section--soft  { background: var(--zb-surface-soft); }
.zb-section--ice   { background: var(--zb-brand-ice); }
.zb-section--deep  { background: var(--zb-brand-deep); color: #fff; }
.zb-section--deep h1, .zb-section--deep h2, .zb-section--deep h3, .zb-section--deep h4 { color: #fff; }
.zb-section--deep p { color: rgba(255, 255, 255, 0.86); }

/* Eyebrow tag (pill) */
.zb-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-brand-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.zb-eyebrow--ghost {
  background: transparent;
  color: var(--zb-brand-mid);
  border: 1px solid var(--zb-brand-mid);
}

/* Utility — center text */
.zb-text-center { text-align: center; }
.zb-text-secondary { color: var(--zb-ink-secondary); }

/* Mobile typography */
@media (max-width: 767px) {
  :root {
    --zb-h1-size: 36px; --zb-h1-lh: 44px;
    --zb-h2-size: 28px; --zb-h2-lh: 36px;
    --zb-h3-size: 22px; --zb-h3-lh: 30px;
    --zb-body-size: 15px; --zb-body-lh: 24px;
    --zb-section-pad-y: var(--zb-section-pad-y-sm);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --zb-section-pad-y: var(--zb-section-pad-y-md);
  }
}

/* ─────────────────────────────────────────── VIEW TRANSITIONS (cross-doc) ── */
/* Cross-document fade transition when navigating between pages.
   Supported: Chrome 126+, Edge 126+, Safari 18+, Firefox 129+
   Older browsers: gracefully no animation, instant navigation */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
  animation-name: zb-page-fade-out;
}
::view-transition-new(root) {
  animation-name: zb-page-fade-in;
}
@keyframes zb-page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes zb-page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01ms; }
}