/*
 * Base reset and body background.
 * Requires 01-vars.css.
 */

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

html {
    background: var(--app-bg);
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100svh;
    margin: 0;
    color: var(--app-text);
    background-color: var(--app-bg);
    background-image:
        radial-gradient(ellipse 1200px 500px at 15% 0%,  rgba(46, 127, 255, .22), transparent 60%),
        radial-gradient(ellipse  600px 600px at 85% 5%,  rgba(14, 165, 233, .16), transparent 55%),
        radial-gradient(ellipse 1000px 700px at 50% 100%, rgba(30,  80, 200, .14), transparent 65%),
        var(--app-bg);
    background-attachment: fixed;
    padding-bottom: env(safe-area-inset-bottom);
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
}

:root[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse 1200px 500px at 15% 0%,  rgba(46, 127, 255, .09), transparent 60%),
        radial-gradient(ellipse  600px 600px at 85% 5%,  rgba(14, 165, 233, .07), transparent 55%),
        radial-gradient(ellipse 1000px 700px at 50% 100%, rgba(30,  80, 200, .05), transparent 65%),
        var(--app-bg);
}

/* Subtle grid overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--app-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--app-grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
}

.content,
noscript {
    position: relative;
    z-index: 1;
}

button {
    font: inherit;
}

/* Top progress bar */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 2px;
    background: var(--app-accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity .2s;
}

.progress-bar.on {
    opacity: 1;
    transition: transform .9s cubic-bezier(.1, 1, .2, 1);
}

/* Spin utility */
@keyframes spin {
    to { transform: rotate(360deg); }
}