/**
 * Hero typography: [data-twb-hero-root] only (no :root).
 * Skins must set --base-h1 .. --base-h3, --base-p with px (e.g. 48px), and matching unitless
 * --base-h1-px .. --base-p-px (e.g. 48) for the fluid middle term. Same for gaps/buttons:
 * --base-gap-* , --base-gap-*-px , --base-btn-font-size , --base-btn-*-px (optional; defaults match hero-center).
 * Chromium rejects
 * calc(48px / 1920 * 100vw) (length×vw); use calc(100vw * var(--base-h1-px) / 1920) instead.
 * Autoscale: twb-hero-autoscale.css multiplies resolved sizes.
 */
[data-twb-hero-root] {
  --twb-typo-min-ratio: 0.75;
  --twb-typo-ref-width: 1920;

  --twb-typo-size-h1: clamp(
    calc(var(--base-h1, 48px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-h1-px, 48) / var(--twb-typo-ref-width, 1920)),
    var(--base-h1, 48px)
  );
  --twb-typo-size-h2: clamp(
    calc(var(--base-h2, 48px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-h2-px, 48) / var(--twb-typo-ref-width, 1920)),
    var(--base-h2, 48px)
  );
  --twb-typo-size-h3: clamp(
    calc(var(--base-h3, 9px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-h3-px, 9) / var(--twb-typo-ref-width, 1920)),
    var(--base-h3, 9px)
  );
  --twb-typo-size-p: clamp(
    calc(var(--base-p, 20px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-p-px, 20) / var(--twb-typo-ref-width, 1920)),
    var(--base-p, 20px)
  );

  --twb-typo-gap-badge-title: clamp(
    calc(var(--base-gap-badge-title, 48px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-gap-badge-title-px, 48) / var(--twb-typo-ref-width, 1920)),
    var(--base-gap-badge-title, 48px)
  );
  --twb-typo-gap-title-desc: clamp(
    calc(var(--base-gap-title-desc, 48px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-gap-title-desc-px, 48) / var(--twb-typo-ref-width, 1920)),
    var(--base-gap-title-desc, 48px)
  );
  --twb-typo-gap-desc-actions: clamp(
    calc(var(--base-gap-desc-actions, 64px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-gap-desc-actions-px, 64) / var(--twb-typo-ref-width, 1920)),
    var(--base-gap-desc-actions, 64px)
  );
  --twb-typo-gap-actions: clamp(
    calc(var(--base-gap-actions, 20px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-gap-actions-px, 20) / var(--twb-typo-ref-width, 1920)),
    var(--base-gap-actions, 20px)
  );

  --twb-typo-btn-font-size: clamp(
    calc(var(--base-btn-font-size, 20px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-btn-font-size-px, 20) / var(--twb-typo-ref-width, 1920)),
    var(--base-btn-font-size, 20px)
  );
  --twb-typo-btn-pad-y: clamp(
    calc(var(--base-btn-pad-y, 28px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-btn-pad-y-px, 28) / var(--twb-typo-ref-width, 1920)),
    var(--base-btn-pad-y, 28px)
  );
  --twb-typo-btn-pad-x: clamp(
    calc(var(--base-btn-pad-x, 60px) * var(--twb-typo-min-ratio, 0.75)),
    calc(100vw * var(--base-btn-pad-x-px, 60) / var(--twb-typo-ref-width, 1920)),
    var(--base-btn-pad-x, 60px)
  );
}