/* ================================================
   Typography Variables
   ================================================ */
/* Typography Styles */
/* Headings */
h1 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}

.h1-d1 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-d1);
    line-height: var(--line-height-d1);
}
.h1-d2 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-d2);
    line-height: var(--line-height-d1);
}
.h1-d3 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-d3);
    line-height: var(--line-height-d1);
}

h2 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
}

h3 {
    color: var(--text-default-heading);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}

h4 {
    color: var(--text-default-subheading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

h5 {
    color: var(--text-default-subheading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}

h6 {
    color: var(--text-default-subheading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
}

/* Body */
.body-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
}

.body-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
}

.body-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

.body-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

/* Button */
button {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-btn);
    line-height: var(--line-height-btn);
}

/* Numbers */
.number-heading {
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--text-default-heading);
}