/*
  Typography tokens extracted from the legacy Handy-Clean-Website stylesheets.
  --font-family is overridden per-site at build time from site.config.json's
  theme.fontFamily when set (build.js injects an inline <style> override in <head>).
*/
:root {
    --font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --font-size-base: 14px;
    --font-size-base-desktop: 16px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-small: 0.9rem;
    --font-size-body: 1rem;
    --font-size-h4: 1.2rem;
    --font-size-h3: 2rem;
    --font-size-h2: 1.8rem;
    --font-size-h1: 2.4rem;
    --font-size-banner: 1.3rem;
    --line-height-base: 1.5;
}

html {
    font-size: var(--font-size-base);
}

@media (min-width: 768px) {
    html {
        font-size: var(--font-size-base-desktop);
    }
}

body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, button, input, textarea, select, label, li {
    font-family: var(--font-family);
}

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

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