/* ---------- Font Scale Engine ---------- */

:root {
  --font-scale-range: calc(var(--font-scale-breakpoint) - var(--font-scale-min-width));
  --font-scale-range-wide: calc(var(--font-scale-breakpoint-wide) - var(--font-scale-wide-start));

  --font-scale-display-slope: calc((var(--font-size-display-max) - var(--font-size-display-min)) / var(--font-scale-range));
  --font-scale-display-intercept: calc(var(--font-size-display-min) - var(--font-scale-display-slope) * var(--font-scale-min-width));
  --font-scale-display-slope-wide: calc((var(--font-size-display-max) * var(--font-scale-ratio) - var(--font-size-display-max)) / var(--font-scale-range-wide));
  --font-scale-display-intercept-wide: calc(var(--font-size-display-max) - var(--font-scale-display-slope-wide) * var(--font-scale-wide-start));

  --font-scale-h1-slope: calc((var(--font-size-h1-max) - var(--font-size-h1-min)) / var(--font-scale-range));
  --font-scale-h1-intercept: calc(var(--font-size-h1-min) - var(--font-scale-h1-slope) * var(--font-scale-min-width));
  --font-scale-h1-slope-wide: calc((var(--font-size-h1-max) * var(--font-scale-ratio) - var(--font-size-h1-max)) / var(--font-scale-range-wide));
  --font-scale-h1-intercept-wide: calc(var(--font-size-h1-max) - var(--font-scale-h1-slope-wide) * var(--font-scale-wide-start));

  --font-scale-h2-slope: calc((var(--font-size-h2-max) - var(--font-size-h2-min)) / var(--font-scale-range));
  --font-scale-h2-intercept: calc(var(--font-size-h2-min) - var(--font-scale-h2-slope) * var(--font-scale-min-width));
  --font-scale-h2-slope-wide: calc((var(--font-size-h2-max) * var(--font-scale-ratio) - var(--font-size-h2-max)) / var(--font-scale-range-wide));
  --font-scale-h2-intercept-wide: calc(var(--font-size-h2-max) - var(--font-scale-h2-slope-wide) * var(--font-scale-wide-start));

  --font-scale-h3-slope: calc((var(--font-size-h3-max) - var(--font-size-h3-min)) / var(--font-scale-range));
  --font-scale-h3-intercept: calc(var(--font-size-h3-min) - var(--font-scale-h3-slope) * var(--font-scale-min-width));
  --font-scale-h3-slope-wide: calc((var(--font-size-h3-max) * var(--font-scale-ratio) - var(--font-size-h3-max)) / var(--font-scale-range-wide));
  --font-scale-h3-intercept-wide: calc(var(--font-size-h3-max) - var(--font-scale-h3-slope-wide) * var(--font-scale-wide-start));

  --font-size-display: clamp(calc(var(--font-size-display-min) / 10 * 1rem),
      calc(var(--font-scale-display-intercept) / 10 * 1rem + var(--font-scale-display-slope) * 100 * 1vw),
      clamp(calc(var(--font-size-display-max) / 10 * 1rem),
        calc(var(--font-scale-display-intercept-wide) / 10 * 1rem + var(--font-scale-display-slope-wide) * 100 * 1vw),
        calc(var(--font-size-display-max) * var(--font-scale-ratio) / 10 * 1rem)));

  --font-size-h1: clamp(calc(var(--font-size-h1-min) / 10 * 1rem),
      calc(var(--font-scale-h1-intercept) / 10 * 1rem + var(--font-scale-h1-slope) * 100 * 1vw),
      clamp(calc(var(--font-size-h1-max) / 10 * 1rem),
        calc(var(--font-scale-h1-intercept-wide) / 10 * 1rem + var(--font-scale-h1-slope-wide) * 100 * 1vw),
        calc(var(--font-size-h1-max) * var(--font-scale-ratio) / 10 * 1rem)));

  --font-size-h2: clamp(calc(var(--font-size-h2-min) / 10 * 1rem),
      calc(var(--font-scale-h2-intercept) / 10 * 1rem + var(--font-scale-h2-slope) * 100 * 1vw),
      clamp(calc(var(--font-size-h2-max) / 10 * 1rem),
        calc(var(--font-scale-h2-intercept-wide) / 10 * 1rem + var(--font-scale-h2-slope-wide) * 100 * 1vw),
        calc(var(--font-size-h2-max) * var(--font-scale-ratio) / 10 * 1rem)));

  --font-size-h3: clamp(calc(var(--font-size-h3-min) / 10 * 1rem),
      calc(var(--font-scale-h3-intercept) / 10 * 1rem + var(--font-scale-h3-slope) * 100 * 1vw),
      clamp(calc(var(--font-size-h3-max) / 10 * 1rem),
        calc(var(--font-scale-h3-intercept-wide) / 10 * 1rem + var(--font-scale-h3-slope-wide) * 100 * 1vw),
        calc(var(--font-size-h3-max) * var(--font-scale-ratio) / 10 * 1rem)));

  --font-size-h4: calc(var(--font-size-h4-min) / 10 * 1rem);

  --font-size-h5: calc(var(--font-size-h5-min) / 10 * 1rem);

  --font-size-h6: calc(var(--font-size-h6-min) / 10 * 1rem);

  --font-size-body: calc(var(--font-size-body-min) / 10 * 1rem);

  --font-size-body-2: calc(var(--font-size-body-2-min) / 10 * 1rem);

  --font-size-button: calc(var(--font-size-button-min) / 10 * 1rem);

  --font-size-sub: calc(var(--font-size-sub-min) / 10 * 1rem);
}

/* NOTE: media query conditions can't read CSS custom properties (var() doesn't
   resolve there), so this 1280px must be kept in sync with --font-scale-breakpoint
   in variables.css by hand (or by re-running this generator). */
@media (min-width: 1280px) {
  :root {
    --font-size-h4: calc(var(--font-size-h4-max) / 10 * 1rem);
    --font-size-h5: calc(var(--font-size-h5-max) / 10 * 1rem);
    --font-size-h6: calc(var(--font-size-h6-max) / 10 * 1rem);
    --font-size-body: calc(var(--font-size-body-max) / 10 * 1rem);
    --font-size-body-2: calc(var(--font-size-body-2-max) / 10 * 1rem);
    --font-size-button: calc(var(--font-size-button-max) / 10 * 1rem);
    --font-size-sub: calc(var(--font-size-sub-max) / 10 * 1rem);
  }
}