/* ═══════════════════════════════════════════════════════════════════════════
   The GreenInstall type system — the one place fonts are declared.

   Linked by index.html (the portal) and by "GreenInstall Network.html" (the
   landing page), so both surfaces resolve identical faces from identical
   files. DOCUMENTATION.html carries the same faces inline as data: URIs,
   because it has to stay a single self-contained file.

   THREE ROLES
     --display   Fraunces        the brand wordmark, numerals that carry weight
                                 (money, metrics, step numbers), and headings
                                 set at display size — 28 px and up. Never for
                                 interface chrome: labels, buttons, table text
                                 and the headings inside them stay --body.
     --body      DM Sans         every interface heading (h1-h6 default) and
                                 all running text, labels, buttons, inputs.
     --mono      JetBrains Mono  identifiers, IBANs, invoice numbers, dates in
                                 tables — anything that wants tabular figures.

   THE LADDER — every weight written in a stylesheet has a real face behind it,
   so nothing is ever synthesised or silently substituted:
     Fraunces         700  900
     DM Sans          400  400 italic  500  600  700
     JetBrains Mono   400  500  600 (also serves 700; see below)

   Latin subsets only, and only the weights the two interfaces actually use.
   font-display:swap so text paints immediately on a cold cache.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';src:url('vendor/fonts/fraunces-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('vendor/fonts/fraunces-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('vendor/fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'JetBrains Mono';src:url('vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('vendor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* The mono scale tops out at SemiBold: there is no bolder JetBrains Mono in the
   system, and a `<b>` inside a monospace run must not be faked. Declaring the
   range 600-700 makes that explicit, so a bold request resolves to a real face
   instead of falling through to no descriptor at all. */
@font-face{font-family:'JetBrains Mono';src:url('vendor/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --display:'Fraunces',Georgia,serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* The default for every surface: interface type is the body face, including
   headings. The display face is opt-in — see .display below — because it only
   works at display sizes, and both interfaces set their headings well under
   that. */
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-family:var(--body)}

/* Opt in to the display face. Used by the landing page's hero and section
   headings and by the documentation's page and section titles. */
.display{font-family:var(--display)}

/* Data type. Tabular figures are part of the role, not a separate decision. */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}