/*
 * Default rendering of bare HTML elements, so unstyled markup already matches
 * the design system. The .mo-* utility classes below give the same result on
 * an element that carries a different tag for semantic reasons.
 */

body {
    background-color: var(--mo-surface-default);
    color: var(--mo-text-body);
    font-family: var(--mo-font-family);
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-body);
    line-height: var(--mo-line-height-body-md);
}

h1,
.mo-h1,
h2,
.mo-h2,
h3,
.mo-h3,
h4,
.mo-h4,
h5,
.mo-h5,
h6,
.mo-h6 {
    color: var(--mo-text-heading);
    font-family: var(--mo-font-family);
}

h1,
.mo-h1 {
    font-size: var(--mo-font-size-h1);
    font-weight: var(--mo-font-weight-h1);
    line-height: var(--mo-line-height-h1);
}

h2,
.mo-h2 {
    font-size: var(--mo-font-size-h2);
    font-weight: var(--mo-font-weight-h2);
    line-height: var(--mo-line-height-h2);
}

h3,
.mo-h3 {
    font-size: var(--mo-font-size-h3);
    font-weight: var(--mo-font-weight-h3);
    line-height: var(--mo-line-height-h3);
}

h4,
.mo-h4 {
    font-size: var(--mo-font-size-h4);
    font-weight: var(--mo-font-weight-h4);
    line-height: var(--mo-line-height-h4);
}

h5,
.mo-h5 {
    font-size: var(--mo-font-size-h5);
    font-weight: var(--mo-font-weight-h5);
    line-height: var(--mo-line-height-h5);
}

h6,
.mo-h6 {
    font-size: var(--mo-font-size-h6);
    font-weight: var(--mo-font-weight-h6);
    line-height: var(--mo-line-height-h6);
    /* H6 is the only heading set in capitals, for every H6 and not just the
       Figma specimen — confirmed by the designer. */
    text-transform: uppercase;
}

.mo-body-sm {
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

.mo-body-md {
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
}

.mo-body-lg {
    font-size: var(--mo-font-size-body-lg);
    line-height: var(--mo-line-height-body-lg);
}

.mo-caption {
    font-size: var(--mo-font-size-caption);
    font-weight: var(--mo-font-weight-caption);
    line-height: var(--mo-line-height-caption);
}

.mo-caption--strong {
    font-weight: var(--mo-font-weight-caption-strong);
}