/* Pool Guardian brand typography.
 *
 * Inter for body, Space Grotesk for display — the same pairing the marketing
 * site uses. The portal and app previously used a bare system stack, so they
 * rendered in Segoe UI on Windows and SF on macOS and looked like nothing in
 * particular.
 *
 * Served as TTF rather than woff2 because no brotli encoder was available when
 * these were vendored. Converting them later is a drop-in improvement — around
 * a third of the size — and needs no markup changes.
 *
 * font-display: swap so text paints immediately in the fallback and reflows
 * when the face arrives. A legal document that is invisible for 400ms is worse
 * than one that briefly renders in Arial.
 */

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Only the bold weight is vendored — Space Grotesk is used for headings and
 * the wordmark, never for body copy. Mapping 500/600 to the same file keeps
 * an intermediate weight from falling back to a different family mid-heading.
 */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/static/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --pg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --pg-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pg-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Display face for headings and the wordmark.
 *
 * Deliberately set here rather than in each template: the page stylesheets set
 * margin/colour/weight on headings but not font-family, so these rules apply
 * without being overridden and without editing nine files.
 *
 * Body copy is NOT included — Space Grotesk is a geometric display face and is
 * tiring to read at paragraph length.
 */
h1, h2, h3,
.pg-page-title,
.pg-section-title,
.admin-header-title,
.pg-logo,
.sidebar-brand,
.modal-title,
.pg-modal-title {
    font-family: var(--pg-font-display);
    letter-spacing: -0.01em;
}

/* Keep monospace contexts monospace — device IDs, MAC addresses, versions and
 * log output all rely on fixed advance width. */
code, pre, kbd, samp, .mono {
    font-family: var(--pg-font-mono);
}