/**
 * 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));
}

/* Heading weight is a token too. Without it the browser makes h1-h6 bold
   (700); Panton has no 700 cut, so that bold was synthetic and heavy.
   Kosakowski uses the light cut (Panton 300), like both design prototypes
   (user decision 2026-09-12). The fallback keeps a core without the token
   on the browser default. */
:root {
  --font-heading-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-heading-weight, 700);
}

/* Body bold weight is a token for the same reason. Ubuntu ships only 400 and
   500 here, so a <strong> at the browser default (700) has no real cut: the
   browser fakes it by thickening the 500 outlines - about 30 % more ink at
   exactly the same width. On the dark background that reads as blurred,
   bleeding letters (Jens, 2026-09-21). Medium 500 is a real face, so it stays
   crisp and still separates from the 400 body copy.
   :where() keeps the specificity at 0, so any component rule still wins. */
:root {
  --font-body-bold-weight: 500;
}

:where(strong, b) {
  font-weight: var(--font-body-bold-weight, 700);
}

/* Base colours. Page background and default text colour come from two palette
   tokens (Framework palette: --surface, --ink), so a re-skin changes two values.
   The fallbacks keep a core without those tokens on its original light look. */
body {
	background-color: var(--surface, #fff);
	color: var(--ink, inherit);
}

/* Bricks' own colour roles (buttons, forms, pagination, tabs ...) follow the
   palette. Each keeps Bricks' default as fallback, so a site without these
   tokens looks exactly as before. Status colours (info/success/warning/danger)
   stay on Bricks' defaults. */
:root {
	--bricks-color-primary: var(--primary, #ffd64f);
	--bricks-color-secondary: var(--secondary, #fc5778);
	--bricks-text-dark: var(--ink, #212121);
	--bricks-text-muted: var(--ink-muted, #616161);
	--bricks-text-light: var(--grey1-l-4, #9e9e9e);
	--bricks-bg-light: var(--grey1-l-10, #f5f6f7);
	--bricks-bg-dark: var(--grey1-d-8, #263238);
	--bricks-border-color: var(--grey1-l-8, #dddedf);
}

/* Bricks styles form labels at 600 - a weight Ubuntu has no face for, so the
   same fake bold as above. Bricks' own rules live in @layer bricks, so this
   unlayered rule wins even though :where() keeps it at specificity 0.
   That also overrides Bricks' checkbox/radio exception, which is why the
   "inherit" for those labels has to be restated here: the consent text is a
   full sentence and should read as body copy, not as a label. */
:where(.brxe-form) .label,
:where(.brxe-form) label {
	font-weight: var(--font-body-bold-weight, 500);
}

:where(.brxe-form) input[type="checkbox"] + .label,
:where(.brxe-form) input[type="checkbox"] + label,
:where(.brxe-form) input[type="radio"] + .label,
:where(.brxe-form) input[type="radio"] + label {
	font-weight: inherit;
}