Font customisation and pairings

[pdrbrnd]

This PR makes typography a little bit more first-class citizen in this project.
As a basis for design systems, it's important that we have good ergonomics for updating the look and feel for the entire project. This is what drove the decision of introducing border radius and inset CSS vars that control the "roundness" of the entire library.
Similarly, now we introduce a bit more thoughtful way of controlling the design system's typography system (while keeping the surface area as minimal as possible).

We introduce a few typography tokens in a way it doesn't requires us to change all components to opt-in:

:root {
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-ui: var(--font-body);
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, monospace;
}

body {
  font-family: var(--font-ui);
}

The mechanism is:

• font-ui inherits font-body by default.
• font-body should be added in more strategic places where prose and paragraphs are more likely.
• if we set a different font-body and font-ui values, the font-ui will be more prevalent because it's more likely that it's a "standard" font.

This way we don't have to retro-fit all of our library to use font-ui.

it actually makes sense:
we want UI chrome to be the default inheritance (so every Button/Badge/Input etc. just works without opt-in classes). That means the body element MUST resolve to "chrome font", because everything inherits from body.

Another thing I considered was to name the css var --font-prose instead of --font-body, but I'll believe that people think of "body" as in "heading text / body text" and not the DOM element.