:root {
  /*FONTS*/
  --font-family-heading: var(--ff-heading, 'Fira Sans');
  --font-family-text: var(--ff-text, 'Fira Sans');
  --font-weight-text: var(--fw-text, 400);
  --font-weight-heading: var(--fw-heading, 700);

  --headline-xs: clamp(calc(var(--body-text-size) * 0.82), 2vw, calc(var(--body-text-size) * 1.4));
  --headline-s: clamp(calc(var(--body-text-size) * 1), 2.5vw, calc(var(--body-text-size) * 1.7));
  --headline-m: clamp(calc(var(--body-text-size) * 1.15), 3vw, calc(var(--body-text-size) * 2));
  --headline-l: clamp(calc(var(--body-text-size) * 1.3), 4vw, calc(var(--body-text-size) * 2.2));
  --headline-xl: clamp(calc(var(--body-text-size) * 1.6), 5vw, calc(var(--body-text-size) * 2.8));
  --headline-xxl: clamp(calc(var(--body-text-size) * 2), 7vw, calc(var(--body-text-size) * 3.1));

  transition-behavior: allow-discrete;
  interpolate-size: allow-keywords;
}