/*
 * LifeByLogic typography foundation v1
 *
 * Opt-in only. Pages must carry data-lbl-typography="v1" so this file
 * cannot change the homepage, assessments, results, or report generation.
 */

body[data-lbl-typography="v1"] :is(main, footer) {
  --lbl-font-display: "Fraunces", Georgia, Cambria, serif;
  --lbl-font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lbl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --lbl-type-micro: 0.8125rem;
  --lbl-type-meta: 0.875rem;
  --lbl-type-supporting: 0.9375rem;
  --lbl-type-control: 1rem;
  --lbl-type-body: clamp(1rem, 0.98rem + 0.2vw, 1.0625rem);
  --lbl-type-reading: clamp(1.0625rem, 1.02rem + 0.25vw, 1.125rem);
  --lbl-leading-compact: 1.4;
  --lbl-leading-body: 1.65;
  --lbl-leading-reading: 1.72;

  /* Bridge existing template tokens onto one readable scale. */
  --font-display: var(--lbl-font-display);
  --font-body: var(--lbl-font-body);
  --font-mono: var(--lbl-font-mono);
  --text-xs: var(--lbl-type-micro);
  --text-sm: var(--lbl-type-supporting);
  --text-base: var(--lbl-type-body);

  /* 5.17:1 on #0B0D12 and 4.95:1 on #10131A. */
  --lbl-color-muted: #7b8497;
  --gray-400: var(--lbl-color-muted);
  --text-muted: var(--lbl-color-muted);
  --ink-muted: var(--lbl-color-muted);

  font-family: var(--font-body);
  font-size: var(--lbl-type-body);
  line-height: var(--lbl-leading-body);
}

body[data-lbl-typography="v1"] :is(main, footer) :where(button, input, select, textarea) {
  font-family: var(--font-body);
}

/* Tools hub: statuses and comparison labels carry meaning, so they are metadata, not decoration. */
body[data-lbl-typography="v1"][data-lbl-template="tools-hub"] :is(main, footer) :is(
  .tool-status,
  .hero-stat-label,
  .footer-col .footer-heading,
  .lbl-tools-faq .ltf-kicker,
  .lbl-compare-tables .lct-kicker,
  .lbl-compare-tables th,
  .lbl-quick-answer .lqa-kicker
) {
  font-family: var(--font-mono);
  font-size: var(--lbl-type-micro);
  line-height: var(--lbl-leading-compact);
  letter-spacing: 0.08em;
}

body[data-lbl-typography="v1"][data-lbl-template="tools-hub"] :is(main, footer) :is(
  .lbl-compare-tables .lct-sub,
  .lbl-tools-faq p
) {
  font-size: var(--lbl-type-control);
  line-height: 1.6;
}

body[data-lbl-typography="v1"][data-lbl-template="tools-hub"] :is(main, footer) .lbl-compare-tables table {
  font-size: var(--lbl-type-supporting);
}

body[data-lbl-typography="v1"][data-lbl-template="tools-hub"] :is(main, footer) .tool-card.coming-soon {
  opacity: 0.72;
}

/* Learn articles: editorial metadata should remain subordinate without becoming unreadable. */
body[data-lbl-typography="v1"][data-lbl-template="learn-article"] :is(main, footer) :is(
  .footer-col .footer-heading,
  .article-meta-label,
  .lab-tool-meta,
  .share-tooltip,
  .article-category,
  .tldr-label,
  .chart-label,
  .species-card-status,
  .faq-section-label,
  .citation-label,
  .sources-label,
  .next-read-card-lab,
  .data-table-label,
  .data-table thead th,
  .data-table thead th em,
  .confound-box-label,
  .dim-panel-label,
  .tool-cta-label,
  .care-box-label,
  .lab-tools-label,
  .cite-style,
  .share-footer-label,
  .legal-disclaimer .ld-label,
  .lblx-title
) {
  font-family: var(--font-mono);
  font-size: var(--lbl-type-micro);
  line-height: var(--lbl-leading-compact);
}

body[data-lbl-typography="v1"][data-lbl-template="learn-article"] :is(main, footer) :is(.hero-btn, .tool-cta-btn) {
  font-size: var(--lbl-type-control);
  min-height: 44px;
}

body[data-lbl-typography="v1"][data-lbl-template="learn-article"] :is(main, footer) :is(
  .article-body p,
  .tldr-box p
) {
  font-size: var(--lbl-type-reading);
  line-height: var(--lbl-leading-reading);
}

body[data-lbl-typography="v1"][data-lbl-template="learn-article"] :is(main, footer) .lblx-btn {
  width: 44px;
  height: 44px;
}

body[data-lbl-typography="v1"][data-lbl-template="learn-article"] :is(main, footer) .lblx-like {
  font-family: var(--font-mono);
}

/* Glossary entries: bylines, TOC labels, and citation controls are functional metadata. */
body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) {
  --lbl-type-micro: 0.875rem;
  --lbl-type-body: 1.0625rem;
  --lbl-type-reading: 1.125rem;
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) :is(
  .entry-byline-spec,
  .footer-col .footer-heading,
  .legal-meta-label,
  .tldr-label,
  .contact-block-label,
  .quick-answer-eyebrow,
  .entry-toc-label,
  .dsm-card-eyebrow,
  .compare-card-head,
  .data-table th,
  .nuance-callout-eyebrow,
  .myth-tag,
  .crosslinks-eyebrow,
  .cta-panel-eyebrow,
  .edu-note-label,
  .cite-format-label,
  .cite-format-copy,
  .entry-stamp,
  .ref-list a.ref-doi,
  .lbl-essay-kicker,
  .lbl-educational-label,
  .lblx-title
) {
  font-family: var(--font-mono);
  font-size: var(--lbl-type-micro);
  line-height: var(--lbl-leading-compact);
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) :is(
  .entry-byline-person,
  .legal-meta-row,
  .related-lab,
  .cite-format > summary,
  .cite-copy
) {
  font-family: var(--font-mono);
  font-size: var(--lbl-type-meta);
  line-height: var(--lbl-leading-compact);
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) :is(
  .legal-section p,
  .legal-section li,
  .quick-answer p
) {
  font-size: var(--lbl-type-body);
  line-height: var(--lbl-leading-reading);
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) :is(
  .cite-format > summary,
  .cite-copy
) {
  min-height: 44px;
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) .lblx-btn {
  width: 44px;
  height: 44px;
}

body[data-lbl-typography="v1"][data-lbl-template="glossary-entry"] :is(main, footer) .lblx-like {
  font-family: var(--font-mono);
}

@media (max-width: 767px) {
  body[data-lbl-typography="v1"] :is(main, footer) :where(
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"]
  ) {
    font-size: 1rem !important;
  }

  body[data-lbl-typography="v1"][data-lbl-template="tools-hub"] :is(main, footer) .filter {
    min-height: 44px;
  }
}