/* Semantic case typography. Sizes and leading have one source of truth. */
:root {
  --case-display-size:60px; --case-display-leading:72px;
  --case-title-size:40px; --case-title-leading:52px;
  --case-accent-size:32px; --case-accent-leading:44px;
  --case-label-size:24px; --case-label-leading:32px;
  --case-body-size:20px; --case-body-leading:28px;
}
/* Device mode is set before page content renders by case-type.js.
   No viewport dimensions or orientation participate in the token cascade. */
:root[data-case-type-mode="tablet"] {
  --case-accent-size:26px; --case-accent-leading:36px;
}
:root[data-case-type-mode="phone"] {
  --case-display-size:40px; --case-display-leading:48px;
  --case-title-size:32px; --case-title-leading:42px;
  --case-accent-size:24px; --case-accent-leading:34px;
  --case-label-size:18px; --case-label-leading:26px;
  --case-body-size:18px; --case-body-leading:26px;
}
/* Prevent Safari's landscape text inflation without disabling user zoom. */
[data-type] {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
[data-type="display"] { font-size:var(--case-display-size); line-height:var(--case-display-leading); }
[data-type="title"] { font-size:var(--case-title-size); line-height:var(--case-title-leading); }
[data-type="accent"] { font-size:var(--case-accent-size); line-height:var(--case-accent-leading); }
[data-type="label"] { font-size:var(--case-label-size); line-height:var(--case-label-leading); }
[data-type="body"] { font-size:var(--case-body-size); line-height:var(--case-body-leading); }

/* Contextual variant: phone landscape text + visual compositions only. */
@media (orientation:landscape) {
  :root[data-case-type-mode="phone"] [data-type-context="text-visual"] [data-type="title"] {
    font-size:28px; line-height:36px;
  }
  :root[data-case-type-mode="phone"] [data-type-context="text-visual"] [data-type="accent"] {
    font-size:20px; line-height:28px;
  }
  :root[data-case-type-mode="phone"] [data-type-context="text-visual"] [data-composition-cta] {
    font-size:18px; line-height:25px;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  :root[data-case-type-mode="phone"] [data-type-context="text-visual"] [data-composition-cta] span { width:auto; }
  /* Existing CTAs have zero padding. Fit the highlight to the smaller label
     instead of retaining the authored pixel width for the larger text. */
  :root[data-case-type-mode="phone"] [data-type-context="text-visual"] [data-composition-cta="highlight"]::before {
    left:-3px; top:4px; width:calc(100% + 6px); height:18px;
  }
}