@font-face {
  font-family: "Roboto Delta";
  src: url('../fonts/RobotoDelta_v2-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* breakpoint variables */
  --bp-small: 25;
  --bp-medium: 45;
  --bp-large: 55;
  --bp-xlarge: 65;

  /* colors */
  --color-bg: #f9f9fd;
  --color-text: #414141;
  
  /* initial px value for text */ 
  --rem-px: 16;

  --text-wght: 375;
  --text-wdth: 95;
  --text-opsz: 16;
  --text-GRAD: 0;
  
  /* set px value sizes */
  --p-size-s-px: 16;
  --p-size-m-px: 18;
  --p-size-l-px: 20;
  
  --h1-size-s-px: 32;
  --h1-size-m-px: 45;
  --h1-size-l-px: 60;

  /* set scale values */
  --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
  --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
  --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
  --p-lh-min: 1.2;
  --p-lh-mid: 1.4;
  --p-lh-max: 1.6;
  --p-wdth-min: 80;
  --p-wdth-mid: 92.5;
  --p-wdth-max: 100;

  --h1-size-min: calc( var(--h1-size-s-px) / var(--rem-px) );
  --h1-size-mid: calc( var(--h1-size-m-px) / var(--rem-px) );
  --h1-size-max: calc( var(--h1-size-l-px) / var(--rem-px) );
  --h1-lh-min: 1.05;
  --h1-lh-mid: 1.075;
  --h1-lh-max: 1.1;
  --h1-wdth-min: 80;
  --h1-wdth-mid: 87.5;
  --h1-wdth-max: 115;


}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Roboto Delta", Helvetica, arial, sans-serif;
  font-weight: var(--text-wght);
  font-stretch: calc( var(--text-wdth) * 1% );
  font-variation-settings: 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
}

h1 {
  --text-opsz: calc( var(--h1-size-min) * 16 );
  --text-wght: 525;
  font-size: calc( var(--h1-size-min) * 1em );
  font-stretch: calc( var(--h1-wdth-min) * 1% );
  font-weight: var(--text-wght);
  font-variation-settings: 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
  line-height: var(--h1-lh-min);
  margin: 1rem auto;
  max-width: 96vw;
  transition: all 1s ease-in-out;
}
  @media screen and (min-width: 25em) {
    h1 {
      --text-wght: 575;
      line-height: calc(( var(--h1-lh-min) * 1em ) + ( var(--h1-lh-max) - var(--h1-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
      font-size: calc(( var(--h1-size-min) * 1em ) + ( var(--h1-size-max) - var(--h1-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    }
  }
  @media screen and (min-width: 45em) {
    h1 {
      --text-opsz: calc( var(--h1-size-mid) * 16 );
      --text-wght: 625;
      font-stretch: calc( var(--h1-wdth-mid) * 1% );
      max-width: 40rem;
    }
  }
  @media screen and (min-width: 55em) {
    h1 {
      --text-wght: 725;
      max-width: 42rem;
    }
  }
  @media (min-width: 65em) {
    h1 {
      --text-opsz: calc( var(--h1-size-max) * 16 );
      --text-wght: 800;
      font-size: calc( var(--h1-size-max) * 1em );
      font-stretch: calc( var(--h1-wdth-max) * 1% );
      line-height: var(--h1-lh-max);
      max-width: 44rem;
    }
  }

p {
  --text-wght: 400;
  --text-GRAD: -0.1;
  font-size: calc( var(--p-size-min) * 1em );
  font-stretch: calc( var(--p-wdth-min) * 1% );
  font-weight: var(--text-wght);
  font-variation-settings: 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
  line-height: var(--p-lh-min);
  margin: 0 auto 1em;
  max-width: 96vw;
  transition: all 1s ease-in-out;
}
  @media screen and (min-width: 25em) {
    p {
      --text-wght: 375;
      line-height: calc(( var(--p-lh-min) * 1em ) + ( var(--p-lh-max) - var(--p-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
      font-size: calc(( var(--p-size-min) * 1em ) + ( var(--p-size-max) - var(--p-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    }
  }
  @media screen and (min-width: 45em) {
    p {
      --text-opsz: 18;
      --text-wght: 350;
      font-stretch: calc( var(--p-wdth-mid) * 1% );
      max-width: 40rem;
    }
  }
  @media screen and (min-width: 55em) {
    p {
      --text-wght: 300;
      max-width: 42rem;
    }
  }
  @media (min-width: 65em) {
    p {
      --text-opsz: 20;
      font-size: calc( var(--p-size-max) * 1em );
      font-stretch: calc( var(--p-wdth-max) * 1% );
      line-height: var(--p-lh-max);
      max-width: 44rem;
    }
  }

.dark {
  --color-text: #f9f9fd;
  --color-bg: #414141;
}
.dark p {
    --text-GRAD: 0.25;
    letter-spacing: 0.015em;
}

.contrast {
  --color-text: #212121;
  --color-bg: #fafafe;
}
.contrast p {
    --text-GRAD: 0.75;
    letter-spacing: 0.005em;
}

.bigtext {
  --p-size-s-px: 20;
  --p-size-m-px: 24;
  --p-size-l-px: 28;
  --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
  --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
  --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
}

.spacing {
  --p-lh-min: 2.2;
  --p-lh-mid: 2.4;
  --p-lh-max: 2.6;
}
.spacing p {
  word-spacing: 0.75em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f9f9fd;
    --color-bg: #414141;
  }
  p {
    --text-GRAD: 0.25;
    letter-spacing: 0.015em;
  }
}