@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Montserrat:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Roboto:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* =========================================================
   TYPOGRAPHY TOKENS
   Raw families map to semantic roles, same as colours.css -> theme.css.
   Components must use the role tokens, never a family name.
   ========================================================= */

:root {

    /* ── Raw families ── */
    --font-montserrat: 'Montserrat', sans-serif;
    --font-roboto:     'Roboto', sans-serif;
    --font-plex-mono:  'IBM Plex Mono', ui-monospace, monospace;

    /* ── Semantic roles ── */
    --font-heading: var(--font-montserrat); /* headings, titles, display numbers */
    --font-body:    var(--font-roboto);     /* body copy, controls, everything else */
    --font-mono:    var(--font-plex-mono);  /* identifiers (accession numbers),
                                               coordinates, fixed-width readouts —
                                               the site's label voice */

}

html { font-size: 100%; } /* 16px baseline */

body {
    font-family: var(--font-body);
    font-weight: 400;
}

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

h1 { font-size: 2.986rem; /* 47.76px */ }
h2 { font-size: 2.074rem; /* 33.18px */ }
h3 { font-size: 1.728rem; /* 27.65px */ }
h4 { font-size: 1.440rem; /* 23.04px */ }
h5 { font-size: 1.200rem; /* 19.20px */ }

small { font-size: 0.750rem; /* 12px */ }

/* Botanical species names — italic */
.species-name {
    font-family: var(--font-body);
    font-style: italic;
}