/*Text utility classes*/
.body-text {
    color: var(--coolgrey100-colour);
    font-size: var(--step-0);
    font-family: var(--body-font);
    font-weight: var(--font-light);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.label-text {
    color: var(--coolgrey100-colour);
    font-size: var(--step--1);
    font-family: var(--body-font);
    font-weight: var(--font-light);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.input-text {
    color: var(--coolgrey60-colour);
    font-size: var(--step-0);
    font-family: var(--body-font);
    font-weight: var(--font-light);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.nav-button-text {
    font-family: var(--body-font);
    font-weight: var(--font-regular);
    font-size: var(--step--1);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.input-text:not(:placeholder-shown) {
    color: var(--coolgrey100-colour);
}

.sub-m {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step-0);
    line-height: var(--subtitle-height);
    letter-spacing: var(--zero-spacing);
}

.sub-s {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step--1);
    line-height: var(--subtitle-height);
    letter-spacing: var(--zero-spacing);
}

.body-l {
    font-family: var(--body-font);
    font-weight: var(--font-light);
    font-size: var(--step-1);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.body-m {
    font-family: var(--body-font);
    font-weight: var(--font-light);
    font-size: var(--step-0);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.body-s {
    font-family: var(--body-font);
    font-weight: var(--font-light);
    font-size: var(--step--1);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.body-xs {
    font-family: var(--body-font);
    font-weight: var(--font-light);
    font-size: var(--step--2);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.body-xxs {
    font-family: var(--body-font);
    font-weight: var(--font-light);
    font-size: var(--step--3);
    line-height: var(--body-height);
    letter-spacing: var(--zero-spacing);
}

.caption-2xl {
    font-family: var(--body-font);
    font-weight: var(--font-bold);
    font-size: var(--step-4);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
}

.caption-xl {
    font-family: var(--body-font);
    font-weight: var(--font-bold);
    font-size: var(--step-3);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
}

.caption-l {
    font-family: var(--body-font);
    font-weight: var(--font-bold);
    font-size: var(--step-2);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
}

.caption-m {
    font-family: var(--body-font);
    font-weight: var(--font-bold);
    font-size: var(--step-1);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
}

.button-l {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step-2);
    line-height: var(--base-line-height);
    letter-spacing: calc(var(--base-letter-spacing) * 0.5);
}

.button-m {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step-0);
    line-height: var(--base-line-height);
    letter-spacing: calc(var(--base-letter-spacing) * 0.5);
}

.button-s {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step--1);
    line-height: var(--base-line-height);
    letter-spacing: calc(var(--base-letter-spacing) * 0.5);
}

.tab {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    font-size: var(--step-0);
    line-height: var(--base-line-height);
    letter-spacing: var(--zero-spacing);
}

.bold {
    font-weight: var(--font-bold);
}

.error-text {
    color: var(--error-colour);
}