html {
    font-size:   var(--font-scaling-desktop);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-on-background-strong);
}

@media (--m) {
    html {
        font-size: var(--font-scaling-tablet);
    }
}

@media (--s) {
    html {
        font-size: var(--font-scaling-mobile);
    }
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

.font-size-inherit {
    font-size: inherit;
}

.font-weight-inherit {
    font-weight: inherit;
}

.font-display {
    font-family: var(--font-family-heading);

    &.font-strong, & > .font-strong {
        font-weight: var(--font-weight-display-strong);
    }

    &.font-default, & > .font-default {
        font-weight: var(--font-weight-display-default);
    }

    &.font-xl, & > .font-xl {
        font-size:   calc(var(--font-size-display-xl) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-display-xl) * var(--line-height-heading-multiplier));
        letter-spacing: -0.05em;
    }
    
    &.font-l, & > .font-l {
        font-size:   calc(var(--font-size-display-l) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-display-l) * var(--line-height-heading-multiplier));
        letter-spacing: -0.04em;
    }
    
    &.font-m, & > .font-m {
        font-size:   calc(var(--font-size-display-m) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-display-m) * var(--line-height-heading-multiplier));
        letter-spacing: -0.03em;
    }
    
    &.font-s, & > .font-s {
        font-size:   calc(var(--font-size-display-s) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-display-s) * var(--line-height-heading-multiplier));
        letter-spacing: -0.02em;
    }

    &.font-xs, & > .font-xs {
        font-size:   calc(var(--font-size-display-xs) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-display-xs) * var(--line-height-heading-multiplier));
    }
}

.font-heading {
    font-family: var(--font-family-heading);

    &.font-strong, & > .font-strong {
        font-weight: var(--font-weight-heading-strong);
    }

    &.font-default, & > .font-default {
        font-weight: var(--font-weight-heading-default);
    }

    &.font-xl, & > .font-xl {
        font-size:   calc(var(--font-size-heading-xl) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-heading-xl) * var(--line-height-heading-multiplier));
    }
    
    &.font-l, & > .font-l {
        font-size:   calc(var(--font-size-heading-l) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-heading-l) * var(--line-height-heading-multiplier));
    }
    
    &.font-m, & > .font-m {
        font-size:   calc(var(--font-size-heading-m) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-heading-m) * var(--line-height-heading-multiplier));
    }
    
    &.font-s, & > .font-s {
        font-size:   calc(var(--font-size-heading-s) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-heading-s) * var(--line-height-heading-multiplier));
    }
    
    &.font-xs, & > .font-xs {
        font-size:   calc(var(--font-size-heading-xs) * var(--font-size-heading-multiplier));
        line-height: calc(var(--line-height-heading-xs) * var(--line-height-heading-multiplier));
    }
}

.font-body {
    font-family: var(--font-family-body);

    &.font-strong, & > .font-strong {
        font-weight: var(--font-weight-body-strong);
    }

    &.font-default, & > .font-default {
        font-weight: var(--font-weight-body-default);
    }

    &.font-xl, & > .font-xl {
        font-size:   calc(var(--font-size-body-xl) * var(--font-size-body-multiplier));
        line-height: calc(var(--line-height-body-xl) * var(--line-height-body-multiplier));
    }
    
    &.font-l, & > .font-l {
        font-size:   calc(var(--font-size-body-l) * var(--font-size-body-multiplier));
        line-height: calc(var(--line-height-body-l) * var(--line-height-body-multiplier));
    }
    
    &.font-m, & > .font-m {
        font-size:   calc(var(--font-size-body-m) * var(--font-size-body-multiplier));
        line-height: calc(var(--line-height-body-m) * var(--line-height-body-multiplier));
    }
    
    &.font-s, & > .font-s {
        font-size:   calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
        line-height: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
    }
    
    &.font-xs, & > .font-xs {
        font-size:   calc(var(--font-size-body-xs) * var(--font-size-body-multiplier));
        line-height: calc(var(--line-height-body-xs) * var(--line-height-body-multiplier));
    }
}

.font-label {
    font-family: var(--font-family-label);

    &.font-strong, & > .font-strong {
        font-weight: var(--font-weight-label-strong);
    }

    &.font-default, & > .font-default {
        font-weight: var(--font-weight-label-default);
    }

    &.font-l, & > .font-l {
        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
    }
    
    &.font-m, & > .font-m {
        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
    }
    
    &.font-s, & > .font-s {
        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
    }
}

.font-code {
    font-family: var(--font-family-code);

    &.font-strong, & > .font-strong {
        font-weight: var(--font-weight-code-strong);
    }

    &.font-default, & > .font-default {
        font-weight: var(--font-weight-code-default);
    }

    &.font-l, & > .font-l {
        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
    }
    
    &.font-m, & > .font-m {
        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
    }
    
    &.font-s, & > .font-s {
        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
    }
}