/*
========================
    BASE FONT SETTINGS
=========================
*/

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-16);
    font-weight: var(--font-weight-regular);
    /* 400 */
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background-light);
}

button, input, select, textarea {
    font-family: var(--font-family-base);
}

/*
========================
    HEADINGS STYLES
=========================
*/

/* H-56 */
.h-56 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-56);
    font-weight: var(--font-weight-bold);
    /* 700 */
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-56);
}

/* H-42 */
.h-42 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-42);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-42);
}

/* H-32 */
.h-32 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-32);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    /* No letter-spacing specified */
}

/* H-26 */
.h-26 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-26);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-26);
}

/* H-24 */
.h-24 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-24);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-24);
}

/* H-22 */
.h-22-semibold {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-22);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-22);
}

/* H-20 */
.h-20 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-20);
    text-transform: var(--text-transform-uppercase);
}

/* H-18 */
.h-18 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-18);
}

/* H-16-S */
.h-16-s {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-16);
    font-weight: var(--font-weight-semibold);
    /* 600 */
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-h-16);
    text-transform: var(--text-transform-uppercase);
}

/* H-14 */
.h-14 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    /* No letter-spacing specified */
}

/*
========================
    BODY TEXT STYLES
=========================
*/

/* B-20 */
.b-20 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-20);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-b-20);
    /* 26px */
    letter-spacing: var(--letter-spacing-b-20);
}

/* B-18 */
.b-18 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-18);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-b-18);
    /* 24px */
    letter-spacing: var(--letter-spacing-b-18);
}

/* B-16 */
.b-16 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* B-14 */
.b-14 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* B-12 */
.b-12 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-12);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* B-10 */
.b-10 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-10);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}