@layer base {
    html, body {
        height: 100%;
    }

    body {
        margin: 0;
        background: var(--paper);
        color: var(--text);
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
        font-family: var(--font-display);
        font-weight: 600;
        text-wrap: balance;
        margin: 0;
        color: var(--text);
    }

    a {
        color: inherit;
    }

    button {
        font-family: inherit;
    }

    :focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

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