/* Make old code backwards compatible with old cosma versions */

/* Font weight */
.font-light {
font-weight: 300 !important;
}

.font-normal {
font-weight: 400 !important;
}

.font-semibold {
font-weight: 600 !important;
}

.font-bold {
font-weight: 700;
}

/* Font sizes */
.font-xs {
font-size: var(--size-heading-xxsmall) !important;
}

.font-s {
font-size: var(--size-body-medium) !important;
}

.font-standard {
font-size: var(--size-body-medium) !important;
}

.font-m {
font-size: var(--size-heading-xsmall) !important;
}

.font-l {
font-size: var(--size-heading-small) !important;
}

.font-xl {
font-size: var(--size-heading-medium) !important;
}

.font-xxl {
font-size: var(--size-heading-large) !important;
}

.font-xxxl {
font-size: var(--size-heading-xlarge) !important;
}

/* Font heading sizes */
.font-h1 {
font-size: var(--size-heading-large) !important;
line-height: var(--line-height-heading-large) !important;
font-weight: 700 !important;
}

.font-h2 {
font-size: var(--size-heading-medium) !important;
line-height: var(--line-height-heading-medium) !important;
font-weight: 700 !important;
}

.font-h3 {
font-size: var(--size-heading-medium) !important;
line-height: var(--line-height-heading-medium) !important;
font-weight: 700 !important;
}

.font-h4 {
font-size: var(--size-heading-small) !important;
line-height: var(--line-height-heading-small) !important;
font-weight: 600 !important;
}

.font-h5,
.font-h6 {
font-size: var(--size-heading-xsmall) !important;
line-height: var(--line-height-heading-xsmall) !important;
font-weight: 600 !important;
}

.font-h1,
.font-h2,
.font-h3 {
font-weight: 700;
}

.font-h4,
.font-h5,
.font-h6 {
font-weight: 600;
}

.font-h1,
.font-h2,
.font-h3,
.font-h4,
.font-h5,
.font-h6 {
margin-bottom: 0.4em;
}

/* Font line sizes */
.font-line-xs,
.font-line-s {
line-height: 1.4 !important;
}

.font-line-standard {
line-height: 1.61 !important;
}

/* Font colors */
.font-brand,
.font-brand-primary,
.font-brandorange {
color: var(--color-text-brand) !important;
}

.font-error {
color: var(--color-text-danger) !important;
}

.font-confirm {
color: var(--color-text-success) !important;
}

.font-info {
color: var(--color-link-blue) !important;
}

.font-warning {
color: var(--color-text-warning) !important;
}

.font-white {
color: var(--color-text-inversive) !important;
}

.font-regular {
color: var(--color-text-charcoal) !important;
}

.font-lightgray {
color: var(--gray-850) !important;
}
}