/**
 * Framework - Typography base (CSS)
 * ================================
 * Font-family is a TOKEN, not a component concern. The four families live in
 * the Bricks global variables (category "Font Family") and Bricks itself emits
 * them into :root - this file only consumes them:
 *
 *   --font-body      body copy, UI, buttons
 *   --font-heading   h1-h6 and anything that reads as a heading
 *   --font-display   opt-in secondary display face
 *   --font-mono      code / tabular figures
 *
 * Retheming a project = change those four variables. Nothing in this file, and
 * no c- component class, ever names a font family.
 *
 * Layer order (weakest -> strongest):
 *   body        0,0,0,1   --font-body
 *   h1-h6       0,0,0,1   --font-heading
 *   .u-font-*   0,0,1,0   opt-in override, defined in utilities.css
 *
 * The var() fallbacks are not decoration: dropped into a project whose
 * variables are not set up yet, text degrades to a sane system stack instead
 * of silently inheriting whatever came before it.
 *
 * Bricks' theme-style font-family fields are deliberately left EMPTY. Fill one
 * in and Bricks emits its own body / h1-h6 rules at the same specificity as
 * these, so source order picks the winner - the exact tug-of-war this file
 * exists to prevent.
 *
 * Added 2026-09-08.
 */

body {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
}