/*
 * fonts.css — the platform's and the website's fonts, in one place. Change a font here and every page follows.
 *   --lt-font-head  headings: Bricolage Grotesque (600, 800)
 *   --lt-font-body  body text: Atkinson Hyperlegible (400, 700), made for easy reading
 *   --lt-font-ui    the rest (buttons, menus, labels, tags, numbers): Nunito (600–800)
 * Sobre Ruedas keeps its own playful heading font (Fredoka); it isn't set here.
 * The fonts themselves load from Google Fonts with one link on each page (the same address everywhere).
 * Pages and their own styles use var(--lt-font-head / -body / -ui); the defaults below are for elements nothing styles.
 */
:root {
  --lt-font-head: 'Bricolage Grotesque', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lt-font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lt-font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:where(body) { font-family: var(--lt-font-body); }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--lt-font-head); }
:where(button, input, select, textarea, label, legend, nav, th, summary, .btn, .tag, .badge, .chip, .pill) { font-family: var(--lt-font-ui); }
/* Buttons always use the interface font, even where a page tells them to copy the text around them (font: inherit),
   which would otherwise give them the body font. Text inside a button that has its own font keeps it. */
button, input[type=button], input[type=submit], input[type=reset] { font-family: var(--lt-font-ui) !important; }