/** TEXT STYLES **/

/* Headlines */
.text-headline-jumbo-dark,
.text-headline-jumbo-light {
    font-size:      var(--font-size-60);
    font-weight:    var(--font-weight-light);
    letter-spacing: var(--letter-spacing-xxs);
    line-height:    var(--line-height-md);
}
.text-headline-1-dark,
.text-headline-1-light {
    font-size:      var(--font-size-46);
    font-weight:    var(--font-weight-light);
    letter-spacing: var(--letter-spacing-xs);
    line-height:    var(--line-height-md);
}
.text-headline-2-dark,
.text-headline-2-light {
    font-size:      var(--font-size-36);
    font-weight:    var(--font-weight-light);
    letter-spacing: var(--letter-spacing-sm);
    line-height:    var(--line-height-md);
}
.text-headline-3-dark,
.text-headline-3-light {
    font-size:      var(--font-size-32);
    font-weight:    var(--font-weight-light);
    letter-spacing: var(--letter-spacing-md);
    line-height:    var(--line-height-md);
}
.text-headline-4-dark,
.text-headline-4-light {
    font-size:      var(--font-size-28);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-md);
    line-height:    var(--line-height-md);
}
.text-headline-5-dark,
.text-headline-5-light {
    font-size:      var(--font-size-24);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-md);
    line-height:    var(--line-height-md);
}
.text-headline-6-dark,
.text-headline-6-light {
    font-size:      var(--font-size-20);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-md);
    line-height:    var(--line-height-md);
}
@media only screen and (max-width: 768px) {
    .text-headline-jumbo-dark,
    .text-headline-jumbo-light {
        font-size: var(--font-size-36);
    }
    .text-headline-1-dark,
    .text-headline-1-light {
        font-size: var(--font-size-32);
    }
    .text-headline-2-dark,
    .text-headline-2-light {
        font-size: var(--font-size-28);
        font-weight: var(--font-weight-semibold);
    }
    .text-headline-3-dark,
    .text-headline-3-light {
        font-size: var(--font-size-24);
    }
    .text-headline-4-dark,
    .text-headline-4-light {
        font-size: var(--font-size-20);
    }
    .text-headline-5-dark,
    .text-headline-5-light {
        font-size: var(--font-size-18);
    }
    .text-headline-6-dark,
    .text-headline-6-light {
        font-size: var(--font-size-16);
    }
}
.text-headline-jumbo-dark,
.text-headline-1-dark,
.text-headline-2-dark,
.text-headline-3-dark,
.text-headline-4-dark,
.text-headline-5-dark,
.text-headline-6-dark {
    color: var(--color-neutral-900);
}
.text-headline-jumbo-light,
.text-headline-1-light,
.text-headline-2-light,
.text-headline-3-light,
.text-headline-4-light,
.text-headline-5-light,
.text-headline-6-light {
    color: var(--color-neutral-100);
}


/* Body */
.text-body-lg-dark,
.text-body-lg-light {
    font-size:      var(--font-size-16);
    font-weight:    var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-lg);
    line-height:    var(--line-height-lg);
}
.text-body-lg-bold-dark,
.text-body-lg-bold-light {
    font-size:      var(--font-size-16);
    font-weight:    var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-lg);
    line-height:    var(--line-height-lg);
}
.text-body-md-dark,
.text-body-md-light {
    font-size:      var(--font-size-14);
    font-weight:    var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-xl);
    line-height:    var(--line-height-lg);
}
.text-body-md-bold-dark,
.text-body-md-bold-light {
    font-size:      var(--font-size-14);
    font-weight:    var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-xl);
    line-height:    var(--line-height-lg);
}
@media only screen and (max-width: 768px) {
    .text-body-lg-dark,
    .text-body-lg-light,
    .text-body-lg-bold-dark,
    .text-body-lg-bold-light {
        font-size: var(--font-size-14);
    }
}
.text-body-lg-bold-dark,
.text-body-md-bold-dark {
    color: var(--color-neutral-900);
}
.text-body-lg-dark,
.text-body-md-dark {
    color: var(--color-neutral-600);
}
.text-body-lg-light,
.text-body-lg-bold-light,
.text-body-md-light,
.text-body-md-bold-light {
    color: var(--color-neutral-300);
}


/* Labels */
.text-label-sm-dark,
.text-label-sm-light {
    font-size:      var(--font-size-12);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xxl);
    line-height:    var(--line-height-lg);
}
.text-label-sm-uppercase-dark,
.text-label-sm-uppercase-light {
    font-size:      var(--font-size-12);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xxl);
    line-height:    var(--line-height-lg);
    text-transform: uppercase;
}
.text-label-md-dark,
.text-label-md-light {
    font-size:      var(--font-size-14);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xl);
    line-height:    var(--line-height-lg);
}
.text-label-md-uppercase-dark,
.text-label-md-uppercase-light {
    font-size:      var(--font-size-14);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xxxl);
    line-height:    var(--line-height-lg);
    text-transform: uppercase;
}
.text-label-sm-dark,
.text-label-sm-uppercase-dark,
.text-label-md-dark,
.text-label-md-uppercase-dark {
    color: var(--color-tertiary-700);
}
.text-label-sm-light,
.text-label-sm-uppercase-light,
.text-label-md-light,
.text-label-md-uppercase-light {
    color: var(--color-tertiary-500);
}