/*
 * Shared typography baseline for the public product surfaces.
 * Keep this local and deterministic: product previews must not depend on a
 * third-party font request or on one particular operating system's fonts.
 */
:root {
  --xj-font-display: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --xj-font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  --xj-font-sans: "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", ui-sans-serif, sans-serif;
  --display: var(--xj-font-display);
  --serif: var(--xj-font-serif);
  --body: var(--xj-font-sans);
  --sans: var(--xj-font-sans);
  --text-body: 15px;
  --text-label: 13px;
  --text-caption: 12px;
  --text-fine: 12px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.home-page,
body[data-page] {
  font-family: var(--xj-font-sans);
  font-size: var(--text-body);
}

body.home-page :is(h1, h2, h3, h4, h5, h6),
body[data-page] :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

/* Header navigation is supporting copy, but should remain comfortably scannable. */
body.home-page :is(.desktop-nav a, .account-btn, .header-action),
body[data-page] :is(.desktop-nav a, .account-btn, .header-action) {
  font-size: 14px;
}

/* The public pages have many compact labels; 12px is the smallest product size. */
body.home-page :is(
  .hero-footer,
  .category-label,
  .sample-label,
  .reading-shortcuts small,
  .reading-assurance,
  .calendar-identity p,
  .calendar-line,
  .calendar-link,
  .book-subtitle,
  .book-cover > small,
  .excerpt-top,
  .excerpt-reader > a,
  .excerpt-note,
  .player-title > div > span,
  .timer-options button,
  .player-status,
  .footer-links,
  .footer-note,
  .mobile-bottom a,
  .mobile-bottom button
) {
  font-size: var(--text-caption);
}

body.home-page :is(
  .hero .eyebrow,
  .section-top .eyebrow,
  .prayer-copy .eyebrow,
  .meditation .eyebrow,
  .invitation .eyebrow,
  .library-caption,
  .artifact-caption,
  .quiet-note
) {
  font-size: var(--text-caption);
}

body.home-page :is(
  .hero-description,
  .reading-card p,
  .section-description,
  .meditation-copy > p:last-child,
  .modal-description,
  .modal-list li,
  .legal-copy p
) {
  font-size: var(--text-body);
}

body[data-page] :is(
  .eyebrow,
  .mode-badge,
  .step-label,
  .section-label,
  .status-pill,
  .field-note,
  .hint,
  .field small,
  .status-note,
  .service-note,
  .field-help,
  .calendar-footnote,
  .quiet-note,
  .artifact-caption,
  .excerpt-note,
  .library-caption,
  .stage-caption,
  .footer-links,
  .footer-note,
  .bottom-nav a,
  .bottom-nav button
) {
  font-size: var(--text-caption);
}

body[data-page] :is(
  .field,
  .check,
  .preferences label,
  .definition-list,
  .purchase-box ul,
  .topic-item,
  .data-bars > div
) {
  font-size: var(--text-label);
}

body[data-page] :is(.section-description, .detail-section p, .legal-copy p) {
  font-size: var(--text-body);
}

@media (max-width: 620px) {
  body.home-page :is(.hero-actions .btn, .reading-action) {
    font-size: 14px;
  }

  body.home-page :is(
    .hero-footer,
    .category-label,
    .sample-label,
    .reading-shortcuts small,
    .reading-assurance,
    .calendar-identity p,
    .calendar-line,
    .calendar-link,
    .book-subtitle,
    .book-cover > small,
    .excerpt-top,
    .excerpt-reader > a,
    .excerpt-note,
    .player-title > div > span,
    .timer-options button,
    .player-status,
    .footer-links,
    .footer-note,
    .mobile-bottom a,
    .mobile-bottom button
  ) {
    font-size: var(--text-caption);
  }

  body[data-page] :is(
    .field,
    .check,
    .preferences label,
    .definition-list,
    .purchase-box ul,
    .topic-item,
    .data-bars > div
  ) {
    font-size: var(--text-label);
  }
}