*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /*
     * 62.5% base: 1rem = 10px
     * Makes rem math intuitive — 1.4rem = 14px, 140rem = 1400px etc.
     * Body resets to 1.6rem so actual rendered text stays 16px.
     */
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*
     * Background on html fills the full viewport on wide screens
     * even when body is narrower.
     */
    background-color: var(--color-bg-page);
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;

    /*
     * 140rem = 1400px — the base width for every page.
     * Centered automatically with margin-inline: auto.
     * On screens wider than 1400px the body stays centred
     * and the html background fills the edges.
     */
    width: var(--container-width);
    margin-inline: auto;
}

/*
 * Ensure the HTML [hidden] attribute always wins,
 * even when a CSS rule sets display on the same element.
 * Required because .auth-feedback uses display:flex which
 * would otherwise override the native hidden attribute.
 */
[hidden] {
    display: none !important;
}

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

a {
    color: var(--color-text-accent);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: var(--font-sans);
    font-size: 1.6rem;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-primary);
}

p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ════════════════════════════════════
   Mobile (≤ 700px / 70rem)
════════════════════════════════════ */
@media (max-width: 70rem) {
    body {
        width: 100%;
    }
}