/* imported from components/theme/src/tokens */

:root {
  /* Font weight */
  --typography-weight-bold: 700;
  --typography-weight-semi-bold: 600;
  --typography-weight-regular: 400;

  /* Font face */
  --typography-font-code: roboto mono, sfmono-regular, consolas,
    "Liberation Mono", menlo, courier, monospace;
  --typography-font-fallback: -apple-system, blinkmacsystemfont, "Segoe UI",
    roboto, sans-serif;
  --typography-font-heading: "Sharp Sans", var(--typography-font-fallback);
  --typography-font-body: "Inter", var(--typography-font-fallback);

  /* Heading primary */
  --typography-size-heading-primary: 24px;
  --typography-line-height-heading-primary: 34px;
  --typography-heading-primary: normal var(--typography-weight-bold)
    var(--typography-size-heading-primary) /
    var(--typography-line-height-heading-primary) var(--typography-font-heading);

  /* Heading section */
  --typography-size-heading-section: 18px;
  --typography-line-height-heading-section: 24px;
  --typography-heading-section: normal var(--typography-weight-bold)
    var(--typography-size-heading-section) /
    var(--typography-line-height-heading-section) var(--typography-font-heading);

  /* Heading sub */
  --typography-size-heading-sub-section: 16px;
  --typography-line-height-heading-sub-section: 22px;
  --typography-heading-sub-section: normal var(--typography-weight-bold)
    var(--typography-size-heading-sub-section) /
    var(--typography-line-height-heading-sub-section)
    var(--typography-font-heading);

  /* Heading smallest */
  --typography-size-heading-smallest: 14px;
  --typography-line-height-heading-smallest: 20px;
  --typography-heading-smallest: normal var(--typography-weight-bold)
    var(--typography-size-heading-smallest) /
    var(--typography-line-height-heading-smallest)
    var(--typography-font-heading);

  /* P1 */
  --typography-size-p1: 18px;
  --typography-line-height-p1: 24px;
  --typography-p1-regular: normal var(--typography-weight-regular)
    var(--typography-size-p1) / var(--typography-line-height-p1)
    var(--typography-font-body);
  --typography-p1-semibold: normal var(--typography-weight-semi-bold)
    var(--typography-size-p1) / var(--typography-line-height-p1)
    var(--typography-font-body);
  --typography-p1-bold: normal var(--typography-weight-bold)
    var(--typography-size-p1) / var(--typography-line-height-p1)
    var(--typography-font-body);

  /* P2 */
  --typography-size-p2: 16px;
  --typography-line-height-p2: 22px;
  --typography-p2-regular: normal var(--typography-weight-regular)
    var(--typography-size-p2) / var(--typography-line-height-p2)
    var(--typography-font-body);
  --typography-p2-semibold: normal var(--typography-weight-semi-bold)
    var(--typography-size-p2) / var(--typography-line-height-p2)
    var(--typography-font-body);
  --typography-p2-bold: normal var(--typography-weight-bold)
    var(--typography-size-p2) / var(--typography-line-height-p2)
    var(--typography-font-body);

  /* P3 */
  --typography-size-p3: 14px;
  --typography-line-height-p3: 20px;
  --typography-p3-regular: normal var(--typography-weight-regular)
    var(--typography-size-p3) / var(--typography-line-height-p3)
    var(--typography-font-body);
  --typography-p3-semibold: normal var(--typography-weight-semi-bold)
    var(--typography-size-p3) / var(--typography-line-height-p3)
    var(--typography-font-body);
  --typography-p3-bold: normal var(--typography-weight-bold)
    var(--typography-size-p3) / var(--typography-line-height-p3)
    var(--typography-font-body);

  /* P4 */
  --typography-size-p4: 12px;
  --typography-line-height-p4: 18px;
  --typography-p4-regular: normal var(--typography-weight-regular)
    var(--typography-size-p4) / var(--typography-line-height-p4)
    var(--typography-font-body);
  --typography-p4-semibold: normal var(--typography-weight-semi-bold)
    var(--typography-size-p4) / var(--typography-line-height-p4)
    var(--typography-font-body);
  --typography-p4-bold: normal var(--typography-weight-bold)
    var(--typography-size-p4) / var(--typography-line-height-p4)
    var(--typography-font-body);
}


@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/RobotoMono-Regular.woff2") format("woff2"),
    url("../fonts/RobotoMono-Regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/RobotoMono-Italic.woff2") format("woff2"),
    url("../fonts/RobotoMono-Italic.woff") format("woff");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/RobotoMono-SemiBold.woff2") format("woff2"),
    url("../fonts/RobotoMono-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/RobotoMono-SemiBoldItalic.woff2") format("woff2"),
    url("../fonts/RobotoMono-SemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/RobotoMono-Bold.woff2") format("woff2"),
    url("../fonts/RobotoMono-Bold.woff") format("woff");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/RobotoMono-BoldItalic.woff2") format("woff2"),
    url("../fonts/RobotoMono-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
    url("../fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/Inter-Italic.woff2") format("woff2"),
    url("../fonts/Inter-Italic.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2"),
    url("../fonts/Inter-SemiBold.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
    url("../fonts/Inter-SemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/Inter-Bold.woff2") format("woff2"),
    url("../fonts/Inter-Bold.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
    url("../fonts/Inter-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Sharp Sans";
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
  src: url("../fonts/SharpSans-Bold.woff2") format("woff2"),
    url("../fonts/SharpSans-Bold.woff") format("woff");
}

@font-face {
  font-family: "Sharp Sans";
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
  src: url("../fonts/SharpSans-BoldItalic.woff2") format("woff2"),
    url("../fonts/SharpSans-BoldItalic.woff") format("woff");
}