/* TYPOGRAPHY SYSTEM - START */
@font-face {
  font-family: "Phudu";
  src: url(/assets/Phudu-VariableFont_wght.ttf);
  font-weight: 600 700 800;
}

: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: 16px;
  /* 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.28;

  /* HEADING DEFAULTS */
  --class-heading-font:
    "Phudu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --class-heading-weight: 600;
  --class-heading-leading: 1;
  --class-heading-tracking: 0em;
  --class-heading-color: inherit;

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

  /* 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: 768px) {
  :root {
    --class-font-body: 18px;
    --class-scale-ratio: 1.2;
    --class-heading-leading: 1;
    --class-body-leading: 1.6;
  }
}

/* Mobile (Small Screens) */
@media (max-width: 390px) {
  :root {
    --class-font-body: 17.5px;
    --class-scale-ratio: 1.14;
    --class-heading-leading: 1;
    --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.5em;
}

.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 {
  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,
.button-primary.small,
.button-seceondary.small {
  font-size: var(--class-body-sm);
}
.body-md,
.button-primary,
.button-seceondary {
  font-size: var(--class-body-md);
}
.body-lg {
  font-size: var(--class-body-lg);
}

/* TYPOGRAPHY SYSTEM - END */