:root {
  --ft-width-min: 24; /* em */
  --ft-width-max: 90; /* em */
  --ft-font-min: 1; /* rem */
  --ft-font-max: 1.5; /* rem */
  --ft-ratio-min: 1.125;
  --ft-ratio-max: 1.25;
}

:root {
  --ft-screen: clamp(
    var(--ft-width-min) * 1em,
    100vmin,
    var(--ft-width-max) * 1em
  );
  --ft-lerp: calc(
    (var(--ft-screen) - (var(--ft-width-min) * 1em)) /
      (var(--ft-width-max) - var(--ft-width-min))
  );
  font-size: calc(
    var(--ft-font-min) * 1em + (var(--ft-font-max) - var(--ft-font-min)) *
      var(--ft-lerp)
  );
  min-height: 0vw; /* Safari fix */

  --ft-font-ratio: min(
    var(--ft-lerp) * var(--ft-ratio-max) * var(--ft-font-max),
    1rem
  );

  --ft-min-1: var(--ft-ratio-min);
  --ft-min-2: var(--ft-ratio-min) * var(--ft-min-1);
  --ft-min-3: var(--ft-ratio-min) * var(--ft-min-2);
  --ft-min-4: var(--ft-ratio-min) * var(--ft-min-3);
  --ft-min-5: var(--ft-ratio-min) * var(--ft-min-4);
  --ft-min-6: var(--ft-ratio-min) * var(--ft-min-5);

  --ft-max-1: var(--ft-ratio-max);
  --ft-max-2: var(--ft-ratio-max) * var(--ft-max-1);
  --ft-max-3: var(--ft-ratio-max) * var(--ft-max-2);
  --ft-max-4: var(--ft-ratio-max) * var(--ft-max-3);
  --ft-max-5: var(--ft-ratio-max) * var(--ft-max-4);
  --ft-max-6: var(--ft-ratio-max) * var(--ft-max-5);

  --fluid-0: 1rem;
  --fluid-1: calc(
    1rem * var(--ft-min-1) + var(--ft-font-ratio) *
      (var(--ft-max-1) - var(--ft-min-1))
  );
  --fluid-2: calc(
    1rem * var(--ft-min-2) + var(--ft-font-ratio) *
      (var(--ft-max-2) - var(--ft-min-2))
  );
  --fluid-3: calc(
    1rem * var(--ft-min-3) + var(--ft-font-ratio) *
      (var(--ft-max-3) - var(--ft-min-3))
  );
  --fluid-4: calc(
    1rem * var(--ft-min-4) + var(--ft-font-ratio) *
      (var(--ft-max-4) - var(--ft-min-4))
  );
  --fluid-5: calc(
    1rem * var(--ft-min-5) + var(--ft-font-ratio) *
      (var(--ft-max-5) - var(--ft-min-5))
  );
  --fluid-6: calc(
    1rem * var(--ft-min-6) + var(--ft-font-ratio) *
      (var(--ft-max-6) - var(--ft-min-6))
  );
}