/* =======================================
   Typography — Text Styles
   Fonts: Sora · Caveat (Google Fonts)
   ======================================= */


/* --- Display --- */


/* Display 1 */
.text-display-1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-57);
  line-height: var(--line-height-64);
}


/* Display 2 */
.text-display-2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-45);
  line-height: var(--line-height-52);
}


/* Display 3 */
.text-display-3 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-36);
  line-height: var(--line-height-40);
}


/* --- Headings --- */


/* Heading 1 */
.text-heading-1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  margin-bottom: var(--spacing-1); /* paragraph spacing */
}


/* Heading 2 */
.text-heading-2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-28);
  line-height: var(--line-height-32);
  margin-bottom: var(--spacing-0-5); /* paragraph spacing */
}


/* Heading 3 */
.text-heading-3 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
}


/* Heading 4 */
.text-heading-4 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
}


/* --- Subtitles --- */


/* Subtitle 1 */
.text-subtitle-1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  margin-bottom: var(--spacing-1); /* paragraph spacing */
}


/* Subtitle 2 */
.text-subtitle-2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-14);
  line-height: var(--line-height-24);
  margin-bottom: var(--spacing-1); /* paragraph spacing */
}


/* --- Body --- */


/* Body 1 */
.text-body-1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: var(--line-height-28);
  letter-spacing: var(--letter-spacing-extended-s);
  margin-bottom: var(--spacing-2); /* paragraph spacing */
}


/* Body 2 */
.text-body-2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  line-height: var(--line-height-24);
  letter-spacing: var(--letter-spacing-extended-s);
}


/* --- Labels --- */


/* Label 1 */
.text-label-1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}


/* Label 2 */
.text-label-2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}


/* --- Utility --- */


/* Button */
.text-button {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-extended-m);
}


/* --- Handwriting --- */


/* Hand 1 */
.text-hand-1 {
  font-family: var(--font-family-hand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-32);
  line-height: var(--line-height-38);
}


/* Hand 2 */
.text-hand-2 {
  font-family: var(--font-family-hand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
}