* {
  box-sizing: border-box;
}

/* Fonts */

@font-face {
  font-family: "Root UI";
  font-style: normal;
  font-display: swap;
  src: url("../fonts/pt-root-ui_vf.woff2") format("woff2-variations"),
    url("../fonts/pt-root-ui_vf.woff") format("woff-variations");
}

body {
  font-family: "Root UI";
  -webkit-font-smoothing: antialiased;
  font-weight: 400;  
}

/* Density */

:root {
  --ids__density: 1.6;
}

body {
  font-size: 1em;
  line-height: var(--ids__density);
}


html {
  /* Font-size calculation using variables */

  --mobile-font-size-min: 14;
  --mobile-font-size-max: 32;

  --desktop-font-size-min: 11.5;
  --desktop-font-size-max: 22.5;

  --mobile-viewport-min: 320;
  --mobile-desktop-breakpoint: 768;
  --desktop-viewport-max: 1500;

  font-size: calc(var(--mobile-font-size-min) * 1px);

  @media screen and (min-width: 320px) {
    font-size: calc(
      var(--mobile-font-size-min) * 1px +
        (var(--mobile-font-size-max) - var(--mobile-font-size-min)) *
        (
          (100vw - var(--mobile-viewport-min) * 1px) /
            (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))
        )
    );
  }

  @media screen and (min-width: 768px) {
    font-size: calc(
      var(--desktop-font-size-min) * 1px +
        (var(--desktop-font-size-max) - var(--desktop-font-size-min)) *
        (
          (100vw - var(--mobile-desktop-breakpoint) * 1px) /
            (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))
        )
    );
  }

  @media screen and (min-width: 1500px) {
    font-size: calc(var(--desktop-font-size-max) * 1px);
  }

  
}

/* Smooth scroll for anchored links */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}