/* ===========================================================================
   Venturis Typography
   ---------------------------------------------------------------------------
   Single source of truth for the Venturis typeface system.

     Titles      Bricolage Grotesque — 200 to 800, optical size 12 to 96
     Body copy   Inter               — 300 to 800

   Bricolage Grotesque is one face doing both title roles. It replaced the
   Instrument Serif / Syne split: the landing page ran a one-weight serif, the
   app ran a display sans, and the two were drifting apart. One family across
   both surfaces means the site has a single title voice again.

   It is a grotesque built on deliberately irregular widths — the skeleton is
   plain, the proportions are not. That is the whole point: it reads as simple
   at a glance and as specific on a second look, which is the opposite of the
   interchangeable geometric sans every other tool uses.

   Unlike Instrument Serif it carries real 200-800 cuts, so rules asking for
   600 or 700 now get a genuine bold instead of being forced back to 400.
   Hierarchy can come from weight as well as size. Nothing needs
   `font-synthesis-weight` any more — there is no synthesis to suppress.

   It has a true optical-size axis (12-96), so `font-optical-sizing: auto` is
   now set on headings as well as body. Large titles tighten their spacing and
   sharpen their joins automatically; small headings open back up.

   Both faces are open-source Google Fonts, so nothing needs licensing or
   self-hosting.

   This file loads BEFORE any other stylesheet on all pages, so the import
   here is the only font request the site makes. Do not re-import these
   families elsewhere.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

/* ---------------------------------------------------------------------- Tokens */

:root {
    /* Body copy — Inter. */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Editorial titles — Bricolage Grotesque. The fallback chain is sans: the
       face is a grotesque, so falling back to Georgia would flip the page's
       voice between the font loading and arriving. */
    --font-title: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Product UI titles. Same family as --font-title — the two roles are kept
       as separate tokens so a future brief can split them again without
       touching every rule that reads one or the other. */
    --font-display: var(--font-title);

    /* Condensed label / instrument face. A third role outside the title/body
       specification — it carries the cartographic UI voice (axis labels,
       readouts, small caps) and is deliberately left as-is. */
    --font-mono: 'IBM Plex Sans Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;

    /* Aliases used by data.css. Kept pointing at the same three roles so the
       system has one definition, not two. */
    --heading-font: var(--font-display);
    --body-font: var(--font);
    --mono-font: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;

    /* Weight scale. Bricolage Grotesque covers 200-800 and Inter 300-800, so
       both are continuous across this range. Existing rules at 650, 750 and
       760 land on the variable axis directly rather than snapping to a cut. */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --weight-display-regular: 400;
    --weight-display-medium: 500;
    --weight-display-bold: 700;
}

/* The mild negative tracking pulls display sizes together without flattening
   the irregular widths; raise it toward 0 if titles start to look cramped.
   font-optical-sizing is on because the face carries a real opsz axis — large
   titles tighten and small headings open up on their own. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-display-regular);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}

body {
    font-family: var(--font);
    font-weight: var(--weight-regular);
    font-optical-sizing: auto;
}