/* TYPOGRAPHY SYSTEM - START */

@font-face {
  font-family: "Inter";
  src: url("/assets/typeface/Inter-VariableFont_opsz\,wght.ttf")
    format("truetype");
  font-weight: 100 400 500 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/typeface/Inter-Italic-VariableFont_opsz\,wght.ttf")
    format("truetype");
  font-weight: 100 400 500 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  font-stretch: 0%; /* Note that font-stretch is a % of normal width */
  font-style: normal; /* See note below */
  font-weight: 500 600 700 800 900;
  src: url(/assets/typeface/Manrope-VariableFont_wght.ttf) format("woff2");
}

@font-face {
  font-family: "Quizlo";
  font-style: normal;
  src: url(/assets/typeface/Quizlo.ttf);
}

:root {
  /* CLASS-BASED TYPOGRAPHY BASE */
  /* You can change the font body size (base value), which will also impact the overall hierarchy sizing, but the ideal base font size should be between 16px and 18px. */
  --class-font-body: 14px;
  /* Refer to typscool.com to pick the most appropriate ratio from the scale. You can also tune the ratio and font size for tablet and mobile. Check out code lines 38 and 48 below. */
  --class-scale-ratio: 1.25;

  /* HEADING DEFAULTS */
  --class-heading-font:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --class-heading-weight: 700;
  --class-heading-leading: 1.2;
  --class-heading-tracking: -0.025em;
  --class-heading-color: inherit;

  /* BODY TEXT DEFAULTS */
  --class-body-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --class-body-weight: inherit;
  --class-body-leading: 1.55;
  --class-body-tracking: 0em;
  --class-body-color: #111111;

  /* HEADING FONT SIZES */
  --class-h6: calc(var(--class-font-body) * var(--class-scale-ratio));
  --class-h5: calc(var(--class-h6) * var(--class-scale-ratio));
  --class-h4: calc(var(--class-h5) * var(--class-scale-ratio));
  --class-h3: calc(var(--class-h4) * var(--class-scale-ratio));
  --class-h2: calc(var(--class-h3) * var(--class-scale-ratio));
  --class-h1: calc(var(--class-h2) * var(--class-scale-ratio));

  /* BODY TEXT SIZES */
  --class-body-sm: calc(var(--class-font-body) / var(--class-scale-ratio));
  --class-body-md: var(--class-font-body);
  --class-body-lg: calc(var(--class-font-body) * var(--class-scale-ratio));
}

/* Tablet (Medium Screens) */
@media (max-width: 1024px) {
  :root {
    --class-font-body: 16.5px;
    --class-scale-ratio: 1.190;
    --class-heading-leading: 1.15;
    --class-body-leading: 1.6;
  }
}

/* Mobile (Small Screens) */
@media (max-width: 768px) {
  :root {
    --class-font-body: 14.25px;
    --class-scale-ratio: 1.160;
    --class-heading-leading: 1.15;
    --class-body-leading: 1.6;
  }
}

/* HEADING CLASSES */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--class-heading-font);
  font-weight: var(--class-heading-weight);
  line-height: var(--class-heading-leading);
  color: var(--class-heading-color);
  letter-spacing: var(--class-heading-tracking);
  /*Update margin*/
  /* margin-bottom: 0.4em; */
}

.h1 {
  font-size: var(--class-h1);
}
.h2 {
  font-size: var(--class-h2);
}
.h3 {
  font-size: var(--class-h3);
}
.h4 {
  font-size: var(--class-h4);
}
.h5 {
  font-size: var(--class-h5);
}
.h6 {
  font-size: var(--class-h6);
}

/* BODY TEXT CLASSES */
.body-sm,
.body-md,
.body-lg,
.button,
.link,
.selection-label *,
.selection-label.active,
.nav-link {
  font-family: var(--class-body-font);
  font-weight: var(--class-body-weight);
  line-height: var(--class-body-leading);
  color: var(--class-body-color);
  letter-spacing: var(--class-body-tracking);
  /*Update margin*/

  /* margin-bottom: 1em; */
}

.body-sm,
.selection-label *,
.selection-label.active,
.link.small {
  font-size: var(--class-body-sm);
  /* color: red; */
}
.body-md,
.button,
.link,
.nav-link {
  font-size: var(--class-body-md);
  /* color: blue; */
}
.body-lg,
.button-big,
.link.large {
  font-size: var(--class-body-lg);
  /* color: green; */
}

/* Custom weights */

.weight-regular {
  font-weight: 400;
}

.weight-medium,
.button-big,
.button,
.link,
.selection-label * {
  font-weight: 500;
}

.weight-semi-bold {
  font-weight: 600;
}

/* Custom width */

.para {
  text-transform: balance;
}

.para-width-lg {
  max-width: 90ch;
}

.para-width-md {
  max-width: 60ch;
}

.para-width-sm {
  max-width: 45ch;
}

.para-width-xs {
  max-width: 30ch;
}

.para-close {
  margin-bottom: 0;
}

.text-alter {
  color: var(#ffffff);
}

.text-is-minor {
  color: #555555;
}
/* Imteractive components */

.chat-bubble {
  font-size: var(--class-body-md);
  font-family: var(--class-body-font);
  font-weight: 400;
  line-height: var(--class-body-leading);
  letter-spacing: var(--class-body-tracking);
}

@media (max-width: 769px) {
  .chat-bubble {
    font-size: var(--class-body-md);
    font-weight: 440;
  }
}

/* TYPOGRAPHY SYSTEM - END */