/* #region ==========================================================
   TYPOGRAPHY

   Global typography styles.

   Contains:
   - Headings
   - Paragraphs
   - Lists
   - Shared text styles

   ========================================================== */

/* #region ========== Headings ========== */
h1, 
h2, 
h3, 
h4, 
h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;

  color: var(--color-heading)
}

h1 { 
    font-size: clamp(2.6rem, 7vw, 5.6rem); 
}

h2 { 
    font-size: clamp(1.9rem, 4.6vw, 3.6rem); 
    font-weight: 900; 
    letter-spacing: -0.02em; 
}

h3 { 
    font-size: clamp(1.15rem, 2vw, 1.5rem); 
    font-weight: 700; 
}

h4 { 
    font-size: 0.85rem; 
    font-weight: 700; 
    letter-spacing: 0.14em; 
    text-transform: uppercase; 
}
h5 {
    font-size: 1rem;
    font-weight: 700;
}
/* #endregion */


/* #region ========== Paragraphs ========== */
p, 
li {
  margin-top: 0;
}
/* #endregion */


/* #region ========== Eyebrows ========== */
.eyebrow {
  font-family: var(--font-accent);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent-muted);
  display: inline-block;
  margin-bottom: 18px;
}

.eyebrow-light { 
    color: var(--color-accent-hover); 
}
/* #endregion */