/*
 * Hipotuca typography system.
 * Keep type decisions here so global changes do not require template edits.
 */

:root {
  --type-heading-family: "Space Grotesk", sans-serif;
  --type-body-family: "Manrope", sans-serif;

  --type-h1-size: 80px;
  --type-h1-line-height: 85px;
  --type-h1-weight: 700;

  --type-h2-size: 36px;
  --type-h2-line-height: 1;
  --type-h2-weight: 700;

  --type-h3-size: 22px;
  --type-h3-line-height: 1;
  --type-h3-weight: 500;

  --type-body-size: 18px;
  --type-body-line-height: 1;
  --type-body-weight: 400;

  --type-small-size: 15px;
  --type-small-line-height: 1;
  --type-small-weight: 400;
}

body {
  font-family: var(--type-body-family) !important;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  font-style: normal;
  letter-spacing: 0;
}

body h1,
body .type-h1 {
  font-family: var(--type-heading-family) !important;
  font-size: var(--type-h1-size) !important;
  line-height: var(--type-h1-line-height) !important;
  font-weight: var(--type-h1-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

body h2,
body .type-h2 {
  font-family: var(--type-heading-family) !important;
  font-size: var(--type-h2-size) !important;
  line-height: var(--type-h2-line-height) !important;
  font-weight: var(--type-h2-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

body h3,
body .type-h3 {
  font-family: var(--type-heading-family) !important;
  font-size: var(--type-h3-size) !important;
  line-height: var(--type-h3-line-height) !important;
  font-weight: var(--type-h3-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

body .type-body-regular {
  font-family: var(--type-body-family) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line-height) !important;
  font-weight: var(--type-body-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

body .text-base {
  font-family: var(--type-body-family) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line-height) !important;
  letter-spacing: 0 !important;
}

body .type-body-small,
body small {
  font-family: var(--type-body-family) !important;
  font-size: var(--type-small-size) !important;
  line-height: var(--type-small-line-height) !important;
  font-weight: var(--type-small-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

body .text-sm,
body .text-xs {
  font-family: var(--type-body-family) !important;
  font-size: var(--type-small-size) !important;
  line-height: var(--type-small-line-height) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 1023px) {
  :root {
    --type-h1-size: 60px;
    --type-h1-line-height: 64px;
  }
}

@media (max-width: 639px) {
  :root {
    --type-h1-size: 42px;
    --type-h1-line-height: 46px;
  }
}