/* ============================================================================
   Reset and base elements
   --------------------------------------------------------------------------
   Box model, document defaults and the handful of bare-element rules. Nothing
   here knows about a component; everything here applies to the whole page.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
}
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
img { max-width: 100%; }

/* The theme is written to <html data-theme> by theme.js before first paint, so
   there is no flash of the wrong palette. Transitioning the swap would make the
   flash into a fade, which is worse; only interactive elements animate. */
::selection { background: var(--brand-soft); color: var(--brand-on-soft); }