/* Self-hosted typefaces - latin subsets with variable weight axes.
   Source: Google Fonts (see docs/design-system.md for the URLs); licensed
   under the SIL Open Font License, licence texts live beside the woff2 files
   in /wwwroot/fonts. Only the two above-the-fold families are preloaded. */

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* The hidden attribute must beat layout display values such as grid. */
    [hidden] {
        display: none !important;
    }
}

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        background-color: var(--color-bg);
        color: var(--color-ink);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-body);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 600;
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-heading);
        text-wrap: balance;
    }

    p {
        margin: 0;
        text-wrap: pretty;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        color: var(--color-accent);
        text-underline-offset: var(--space-1);
        text-decoration-thickness: var(--hairline);
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }

    button {
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    input {
        font: inherit;
    }

    kbd,
    code,
    pre {
        font-family: var(--font-mono);
    }

    time {
        font-variant-numeric: tabular-nums;
    }

    :focus-visible {
        outline: var(--focus-width) solid var(--color-focus);
        outline-offset: var(--focus-offset);
    }

    ::selection {
        background: var(--color-accent-soft);
        color: var(--color-ink);
    }
}