/* The Observer — type scale
   Two families only: Caslon Ionic (display/serif headlines, buttons, tags)
   and Caslon Doric (text/sans — bylines, captions, meta, UI labels).
   Scale below is the file's Mobile/App cascade (Text-Cascade page), which is
   unambiguous; desktop breakpoints reuse the same styles at the same or one
   step larger — see guidelines/typography.html for the full cascade table.
   Values are exact size/line-height pairs from the source — do not snap
   to a grid. */
:root {
  /* size/line-height pairs, "px/px" per the source cascade */
  --text-h1-size: 42px;   --text-h1-lh: 55px;   --text-h1-font: var(--font-display); --text-h1-weight: 400;
  --text-h2-size: 28px;   --text-h2-lh: 36px;   --text-h2-font: var(--font-display); --text-h2-weight: 400;
  --text-h3-size: 26px;   --text-h3-lh: 34px;   --text-h3-font: var(--font-display); --text-h3-weight: 400;
  --text-h4-size: 22px;   --text-h4-lh: 29px;   --text-h4-font: var(--font-display); --text-h4-weight: 400;
  --text-h5-size: 20px;   --text-h5-lh: 26px;   --text-h5-font: var(--font-display); --text-h5-weight: 400;
  --text-h6-size: 16px;   --text-h6-lh: 24px;   --text-h6-font: var(--font-display); --text-h6-weight: 400;

  --text-body-size: 18px;      --text-body-lh: 26px;  --text-body-font: var(--font-display); --text-body-weight: 300;
  --text-card-title-size: 18px; --text-card-title-lh: 26px; --text-card-title-font: var(--font-text); --text-card-title-weight: 400;
  --text-button-size: 16px;    --text-button-lh: 24px; --text-button-font: var(--font-display); --text-button-weight: 400;
  --text-small-size: 14px;     --text-small-lh: 21px;  --text-small-font: var(--font-display); --text-small-weight: 300;
  --text-small-label-size: 16px; --text-small-label-lh: 20px; --text-small-label-font: var(--font-display); --text-small-label-weight: 700;
  --text-sans-size: 16px;      --text-sans-lh: 23px;   --text-sans-font: var(--font-text); --text-sans-weight: 400;
  --text-sans-bold-size: 16px; --text-sans-bold-lh: 23px; --text-sans-bold-font: var(--font-text); --text-sans-bold-weight: 600;
  --text-sans-small-size: 14px; --text-sans-small-lh: 20px; --text-sans-small-font: var(--font-text); --text-sans-small-weight: 400;
  --text-caption-size: 14px;   --text-caption-lh: 20px; --text-caption-font: var(--font-text); --text-caption-weight: 400;
  --text-meta-size: 14px;      --text-meta-lh: 20px;    --text-meta-font: var(--font-text); --text-meta-weight: 400;
  --text-tab-label-size: 16px; --text-tab-label-lh: 24px; --text-tab-label-font: var(--font-display); --text-tab-label-weight: 400;

  /* Desktop-only display size (Cannon), rare use (mastheads, splash) */
  --text-cannon-size: 92px; --text-cannon-lh: 120px; --text-cannon-font: var(--font-display); --text-cannon-weight: 400;
}