/* typography-body.css */
/* LOCKED (phase 1 scaffold) — Body roles.
   Phase 1 uses existing body font (Lora) to avoid visual regression.
   Phase 2 can swap to Lato intentionally with UX review. */

:root{
  /* Keep body roles aligned with the site's current body font token
     to avoid visual regressions while we roll out role classes. */
  --ap-typo-body-font: var(--font-body);

  --ap-body-primary-desktop: 16px;
  --ap-body-primary-tablet: 16px;
  --ap-body-primary-mobile: var(--ap-body-primary-desktop);

  --ap-body-secondary-desktop: 14px;
  --ap-body-secondary-tablet: 14px;
  --ap-body-secondary-mobile: var(--ap-body-secondary-desktop);

  --ap-body-primary-lh: 1.6;
  --ap-body-secondary-lh: 1.5;
}

.typo-body-primary{
  font-family: var(--ap-typo-body-font) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: var(--ap-body-primary-lh);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--ap-body-primary-desktop);
}
@media (max-width: 1024px){ .typo-body-primary{ font-size: var(--ap-body-primary-tablet);} }
@media (max-width: 768px){ .typo-body-primary{ font-size: var(--ap-body-primary-mobile);} }

.typo-body-secondary{
  font-family: var(--ap-typo-body-font) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: var(--ap-body-secondary-lh);
  color: var(--color-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--ap-body-secondary-desktop);
}
@media (max-width: 1024px){ .typo-body-secondary{ font-size: var(--ap-body-secondary-tablet);} }
@media (max-width: 768px){ .typo-body-secondary{ font-size: var(--ap-body-secondary-mobile);} }

.typo-list-item,
.typo-list-item li{
  font-family: var(--ap-typo-body-font) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: var(--ap-body-secondary-lh);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--ap-body-secondary-desktop);
}
@media (max-width: 768px){ .typo-list-item, .typo-list-item li{ font-size: var(--ap-body-secondary-mobile);} }


/* Scoped helper: +2 Word-point size for the CTA recommendation line (mobile only) */
@media (max-width: 768px){
  .typo-help-2up{ font-size: calc(var(--ap-body-secondary-mobile) + 2.67px); }
}