/* Reset and page defaults on the tokens. */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--fg-1);
    min-height: 100vh;
}

[hidden] { display: none !important; }

a {
    color: var(--link);
    text-underline-offset: 0.15em;
}

button { cursor: pointer; }

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

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}