html {
  font-size: 62.5%;
}

:root {
  --noa-header-font: "Spiris-Bold", Arial, sans-serif;
  --noa-body-font: "Inter", Arial, sans-serif;
  --noa-menu-font: "Spiris-Medium", Arial, sans-serif;
  --noa-btn-font: "Spiris-Medium", Arial, sans-serif;
 
  /* ==== Font sizes ==== */
  
  /* Auxiliary */
  --noa-auxiliary-lg-font-size: 2rem; /* 20px */
  --noa-auxiliary-md-font-size: 1.6rem;    /* 16px */
  --noa-auxiliary-sm-font-size: 1.4rem;/* 14px */

  /* Headings */ 
  --noa-h1-font-size: 4rem;   /* 40px */
  --noa-h2-font-size: 3.2rem;     /* 32px */
  --noa-h3-font-size: 2.8rem;  /* 28px */
  --noa-h4-font-size: 2.4rem;   /* 24px */
  --noa-h5-font-size: 2rem;  /* 20px */
  --noa-h6-font-size: 1.8rem; /* 18px */

  /* Body */
  --noa-body-lg-font-size: 1.8rem; /* 18px */
  --noa-body-md-font-size: 1.6rem;     /* 16px */
  --noa-body-sm-font-size: 1.4rem; /* 14px */

  /* Menu */
  --noa-menu-lg-font-size: 2rem;  /* 20px */
  --noa-menu-md-font-size: 1.8rem; /* 18px */
  --noa-menu-sm-font-size: 1.4rem; /* 14px */

  /* Buttons */
  --noa-btn-lg-font-size: 1.8rem; /* 18px */
  --noa-btn-md-font-size: 1.6rem;     /* 16px */
  --noa-btn-sm-font-size: 1.2rem;  /* 12px */

  /* ==== Font colors ==== */

  --noa-text-secondary: #56565A;
  --noa-text-primary: #1D1D1E;

}

/* xs */
@media (max-width: 575px) {
 
}

/* sm-md */
@media (min-width: 576px) {
  :root {
  --noa-h1-font-size: 4.8rem;   /* 48px */
  --noa-h2-font-size: 4rem; /* 40px */
  --noa-h3-font-size: 3.2rem;   /* 32px */
  }
}

/* lg+ */
@media (min-width: 992px) {
  :root {
    /* ==== Font sizes ==== */

    /* Headings */ 
    --noa-h1-font-size: 6.4rem;    /* 64px */
    --noa-h2-font-size: 5.6rem;  /* 56px */
    --noa-h3-font-size: 4rem;    /* 40px */
    --noa-h4-font-size: 3.2rem;    /* 32px */
    --noa-h5-font-size: 2.4rem;  /* 24px */

    /* Buttons */
    --noa-btn-lg-font-size: 2rem;  /* 20px */
    --noa-btn-md-font-size: 1.8rem; /* 18px */
    --noa-btn-sm-font-size: 1.4rem; /* 14px */

    /* Menu */
    --noa-menu-lg-font-size: 2.4rem;  /* 24px */
  }
}

/* xxl+ */
@media (min-width: 1400px) {
  :root {
    /* ==== Font sizes ==== */

    /* Headings */ 
    --noa-h1-font-size: 8rem;    /* 80px */
    --noa-h2-font-size: 6.4rem;    /* 64px */
    --noa-h3-font-size: 4.8rem;    /* 48px */
  }
}

.noa-h1, .noa-h2, .noa-h3, .noa-h4, .noa-h5, .noa-h6 {
  margin: 0;
  padding: 0;
}

/* Headlines */
.noa-h1 {
  font-family: var(--noa-header-font);
  font-size: var(--noa-h1-font-size);
  line-height: 1;
}

.noa-h2 {
  font-family: var(--noa-header-font);
  font-size: var(--noa-h2-font-size);
  line-height: 1;
}

.noa-h3 {
  font-family: var(--noa-header-font);
  font-weight: 700;
  line-height: 1;
  font-size: var(--noa-h3-font-size);
  /* TODO: move to semantic headings? */
  margin: 0;
  padding: 0;
}

.noa-h4 {
  font-family: var(--noa-header-font);
  font-size: var(--noa-h4-font-size);
  line-height: 1;
}

.noa-h5 {
  font-family: var(--noa-header-font);
  font-size: var(--noa-h5-font-size);
  line-height: 1;
}

.noa-h6 {
  font-family: var(--noa-body-font);
  font-size: var(--noa-h6-font-size);
  font-weight: 700 !important;
  line-height: 1;
}

/* Body */
.noa-body-lg {
  font-family: var(--noa-body-font);
  font-size: var(--noa-body-lg-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01;
  /* TODO: move to semantic paragraphs? */
  margin: 0;
  padding: 0;
}

.noa-body-md {
  font-family: var(--noa-body-font);
  font-size: var(--noa-body-md-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01;
  /* TODO: move to semantic paragraphs? */
  margin: 0;
  padding: 0;
}

.noa-body-sm {
  font-family: var(--noa-body-font);
  font-size: var(--noa-body-sm-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.14px;
}

/* Menu  */
.noa-menu-lg {
  font-family: var(--noa-menu-font);
  font-size: var(--noa-menu-lg-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

.noa-menu-md, .accordion-button.noa-menu-md {
  font-family: var(--noa-menu-font);
  font-size: var(--noa-menu-md-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

.noa-menu-sm {
  font-family: var(--noa-menu-font);
  font-size: var(--noa-menu-sm-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

/**
* Auxiliary
*/

.noa-auxiliary-lg {
  font-family: var(--noa-menu-font);
  font-size: var(--noa-auxiliary-lg-font-size);
  font-weight: 500;
}

/* lg+ */
@media (min-width: 992px) {
  :root {
    --noa-auxiliary-lg-font-size: 2.4rem;
  } 
}

/* Button  */
/* .noa-button-lg {

} */

.noa-button-md {
  font-family: Inter;
  font-size: var(--noa-btn-lg-font-size, 1.8rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

/* .noa-button-sm {
  
} */

/* Text Colors */

.noa-text-primary {
  color: var( --noa-text-primary) !important;
}

.noa-text-secondary {
  color:  var(--noa-text-secondary) !important;
}