@font-face {
  font-family: CircularStd;
  src: url("./CircularStd-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: CircularStd;
  src: url("./CircularStd-Medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: CircularStd;
  src: url("./CircularStd-Book.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 450;
}

@font-face {
  font-family: CircularStd;
  src: url("./CircularStd-Light.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

:root {
  --font-family: "CircularStd", sans-serif;
  --fonts-weight-bold: 700;
  --fonts-weight-medium: 500;
  --fonts-weight-regular: 450;
  --fonts-weight-light: 300;

  /* new tokens */
  --des-direction-title-font-family: "CircularStd", sans-serif;
  --des-direction-text-font-family: "CircularStd", sans-serif;
  --des-direction-direction: "LTR";
  --des-direction-weight-bold: 700;
  --des-direction-weight-wide-bold: 700;
  --des-direction-weight-medium: 500;
  --des-direction-weight-wide-medium: 500;
  --des-direction-weight-regular: 450;
  --des-direction-weight-light: 300;
}