/* Typography master. The one layer that says which face the portal is set in, at which weight,
   and at which step of the scale. It restates the Bulma rules that own those three things so the
   answer lives in tokens.css instead of in a generated bundle, and it sits directly after the
   vendor layers so a page stylesheet can still overrule it.

   Values here are the values the portal already rendered. Nothing in this file is a design
   decision; the decisions are the token names it points at. */

body,
button,
input,
select,
textarea {
    font-family: var(--font-family-base);
}

/* Bulma's heading shapes are the same face as body text today. They are listed anyway, because
   the design system sets headings in a second family, and this is the seam where that arrives. */
.title,
.subtitle,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
}

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

body {
    font-size: var(--text-size-300);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

/* The icon chips on an editable message are deliberately not here. Four page stylesheets each
   carried the same Font Awesome face and weight for `.notification span[type=…]:before`, which
   looks like duplication this layer should absorb, and absorbing it was a mistake: those sheets
   are page sheets, so hoisting the rules into a layer that every document loads applied an icon
   face on pages that never had one. It is also styling nothing. All four sheets set the same
   pseudo-element to `display: none`, so the glyph has never rendered, and a face on a pseudo that
   is not displayed is unobservable. The content codes stay with the page that knows which chip it
   is drawing, and the day one of them is meant to be visible it needs a component stylesheet
   loaded by those pages, not a global one. */