@font-face {
    font-family: 'SFProText-Semibold';
    src: url("./fonts/SFProText-Semibold.woff2") format("woff2"), 
         url("./fonts/SFProText-Semibold.woff") format("woff"), 
         url("./fonts/SFProText-Semibold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
  font-family: 'Roboto';
  src: url("./fonts/Roboto-VariableFont_wdth\,wght.woff2") format("woff2"), 
       url("./fonts/Roboto-VariableFont_wdth\,wght.woff") format("woff"), 
       url("./fonts/Roboto-VariableFont_wdth\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("./fonts/Roboto-Italic-VariableFont_wdth\,wght.woff2") format("woff2"), 
       url("./fonts/Roboto-Italic-VariableFont_wdth\,wght.woff") format("woff"), 
      url("./fonts/Roboto-Italic-VariableFont_wdth\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-primary: 'Roboto', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}