html {
    font-family: var(--wms-font-sans);
    font-size: 100%;
    line-height: var(--wms-line-height-body);
}

body {
    font-size: var(--wms-font-size-md);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--wms-color-text);
    font-weight: var(--wms-font-weight-bold);
    line-height: var(--wms-line-height-heading);
    text-wrap: balance;
}

h1 { font-size: var(--wms-font-size-4xl); }
h2 { font-size: var(--wms-font-size-3xl); }
h3 { font-size: var(--wms-font-size-2xl); }
h4 { font-size: var(--wms-font-size-xl); }
h5 { font-size: var(--wms-font-size-lg); }
h6 { font-size: var(--wms-font-size-md); }

.wms-heading-1 { font-size: var(--wms-font-size-4xl); }
.wms-heading-2 { font-size: var(--wms-font-size-3xl); }
.wms-heading-3 { font-size: var(--wms-font-size-2xl); }
.wms-heading-4 { font-size: var(--wms-font-size-xl); }
.wms-heading-5 { font-size: var(--wms-font-size-lg); }
.wms-heading-6 { font-size: var(--wms-font-size-md); }

p,
li,
dd {
    text-wrap: pretty;
}

small {
    font-size: var(--wms-font-size-sm);
}

code,
kbd,
samp,
pre {
    font-family: var(--wms-font-mono);
}

code {
    padding: 0.12em 0.38em;
    border: 1px solid var(--wms-color-border);
    border-radius: var(--wms-radius-xs);
    color: var(--wms-color-primary);
    background: var(--wms-color-surface-muted);
    font-size: 0.9em;
}

pre {
    max-width: 100%;
    overflow: auto;
    padding: var(--wms-space-5);
    border: 1px solid var(--wms-color-border);
    border-radius: var(--wms-radius-md);
    background: var(--wms-color-surface-inverse);
    color: var(--wms-color-text-inverse);
    line-height: 1.5;
}

pre code {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
}