/*
 * Brand 4.0 typography.
 *
 * The @ge/design-system package ships the Brand 4.0 @font-face declarations
 * (PP Neue Montreal, PP Nikkei Maru), the font files, and the
 * [data-theme=genesis-brand-4] token block: font-family tokens PLUS the fluid
 * clamp() Utopia type scale (--font-size-{display,heading,paragraph}-* and the
 * matching --line-height-* tokens).
 *
 * This site's base styles and typography utilities consume the brand-2 STEP
 * tokens instead (--font-family-circular-std, --font-size-0..12,
 * --line-height-0..23 — see src/styles/tailwindcss-theme.css). The design system
 * does not re-point those, so under brand-4 the family token is undefined and
 * sizes are fixed (no fluid scaling). This file re-points the consumed step
 * tokens at the DS Brand 4.0 fluid tokens, scoped to the Brand 4.0 theme only —
 * the OFF state (genesis-brand-2) is untouched because this selector cannot
 * match it.
 *
 * Slot mapping below is a sensible monotonic default; the final named-style
 * mapping is pending design sign-off (Feature 487404 dependency).
 *
 * [data-theme] is repeated in the selector intentionally: the auto-generated
 * _design-tokens.css (bundled after this file) also defines --font-size-0..12
 * and --line-height-0..12 under html[data-theme='genesis-brand-4'] with fixed
 * values on a different scale. The extra attribute lifts specificity to
 * (0,2,1) so this remap layer wins regardless of stylesheet load order.
 */
html[data-theme="genesis-brand-4"][data-theme] {
  /* ---- Font family ---- */
  /* Set the semantic primary typeface for Brand 4.0. --font-sans is routed
     through --font-primary in @theme (tailwindcss-config.css), so the base body
     font and the font-primary/font-sans utilities all switch from this one line. */
  --font-primary: var(--font-family-pp-neue-montreal);
  /* Legacy alias: existing base styles + typography @utilities still hardcode
     var(--font-family-circular-std). Point that at --font-primary so they follow
     the active brand too (remove once those references migrate to --font-primary). */
  --font-family-circular-std: var(--font-primary);
  /* Direct override beats Tailwind preflight's bare `html` selector on specificity. */
  font-family: var(--font-primary);
  /* Display/hero typeface for Brand 4.0 (PP Nikkei Maru, falling back to the
     primary face via the DS token's own fallback chain). Apply with the
     `font-display` utility / var(--font-display) on display headings. */
  --font-display: var(--font-family-pp-nikkei-maru);

  /* ---- Fluid sizes (1:1 ascending onto the DS clamp() scale) ---- */
  --font-size-0: var(--font-size-paragraph-000); /* 12px  → 12px            */
  --font-size-1: var(--font-size-paragraph-50); /* 14px  → 14px            */
  --font-size-2: var(--font-size-paragraph-100); /* 16px  → 16px (body)     */
  --font-size-3: var(--font-size-paragraph-200); /* 18px  → 16–18px fluid   */
  --font-size-4: var(--font-size-heading-400); /* 20px  → 19–23px fluid   */
  --font-size-5: var(--font-size-heading-500); /* 24px  → 21–28px fluid   */
  --font-size-6: var(--font-size-heading-600); /* 32px  → 23–33px fluid   */
  --font-size-7: var(--font-size-heading-700); /* 40px  → 26–40px fluid   */
  --font-size-8: var(--font-size-heading-800); /* 46px  → 28–48px fluid   */
  --font-size-9: var(--font-size-paragraph-jumbo); /* 56px  → 36–64px fluid   */
  --font-size-10: var(--font-size-heading-900); /* 64px  → 41–69px fluid   */
  --font-size-11: var(--font-size-display-lg); /* 90px  → 64–120px fluid  */
  --font-size-12: var(--font-size-display-xlg); /* 120px → 140–280px fluid */

  /* ---- Fluid line-heights (nearest-magnitude onto the DS clamp() scale) ---- */
  --line-height-0: var(--line-height-paragraph-50); /* ~20px */
  --line-height-1: var(--line-height-paragraph-50); /* ~20px */
  --line-height-2: var(--line-height-heading-400); /* ~28px */
  --line-height-3: var(--line-height-heading-400); /* ~28px */
  --line-height-4: var(--line-height-heading-400); /* ~28px */
  --line-height-5: var(--line-height-paragraph-200); /* ~24px */
  --line-height-6: var(--line-height-paragraph-200); /* ~24px */
  --line-height-7: var(--line-height-paragraph-200); /* ~24px */
  --line-height-8: var(--line-height-paragraph-50); /* ~20px */
  --line-height-9: var(--line-height-paragraph-50); /* ~20px */
  --line-height-10: var(--line-height-paragraph-50); /* ~20px */
  --line-height-11: var(--line-height-heading-900); /* ~72px */
  --line-height-12: var(--line-height-paragraph-jumbo); /* ~56px */
  --line-height-13: var(--line-height-heading-800); /* ~48px */
  --line-height-14: var(--line-height-heading-700); /* ~40px */
  --line-height-15: var(--line-height-heading-500); /* ~32px */
  --line-height-16: var(--line-height-display-lg); /* ~102px */
  --line-height-17: var(--line-height-display-lg); /* ~102px */
  --line-height-18: var(--line-height-heading-400); /* ~28px */
  --line-height-19: var(--line-height-heading-700); /* ~40px */
  --line-height-20: var(--line-height-paragraph-jumbo); /* ~64px */
  --line-height-21: var(--line-height-heading-500); /* ~32px */
  --line-height-22: var(--line-height-paragraph-200); /* ~24px */
  --line-height-23: var(--line-height-paragraph-50); /* ~20px */
}

/*
 * Display utilities — restore the Brand 4.0 display treatment.
 *
 * The site's base `display-*` @utilities (src/styles/tailwindcss-theme.css)
 * hardcode the brand-2 step tokens (--font-size-6/7, --font-family-circular-std).
 * The step-token remap above sends them onto the heading scale in the primary
 * (body) face, dropping the brand-4 display look. Re-assert the DS display
 * tokens + PP Nikkei Maru, scoped to the brand-4 theme ONLY — the brand-2 (flag
 * OFF) state cannot match this selector, so no font bleed (cf. 91f24d58).
 */
html[data-theme="genesis-brand-4"] .display-lg {
  font-family: var(--font-family-pp-nikkei-maru);
  font-weight: var(--font-weight-ultrabold);
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-theme="genesis-brand-4"] .display-md {
  font-family: var(--font-family-pp-nikkei-maru);
  font-weight: var(--font-weight-ultrabold);
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-display-md);
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-theme="genesis-brand-4"] .display-sm {
  font-family: var(--font-family-pp-nikkei-maru);
  font-weight: var(--font-weight-ultrabold);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-theme="genesis-brand-4"] .display-xs {
  font-family: var(--font-family-pp-nikkei-maru);
  font-weight: var(--font-weight-ultrabold);
  font-size: var(--font-size-display-xs);
  line-height: var(--line-height-display-xs);
  letter-spacing: 0;
  text-transform: uppercase;
}