@layer site-reset, site-foundation, site-components;

@import url("./accessibility.css") layer(site-components);
@import url("./brand.css") layer(site-components);
@import url("./header-bar.css") layer(site-components);
@import url("./immersive-page.css") layer(site-components);
@import url("./motion-control.css") layer(site-components);
@import url("./navigation.css") layer(site-components);

@layer site-reset {

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

    html,
    body {
        margin: 0;
        padding: 0;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }
}

@layer site-foundation {
    :root {
        color-scheme: dark;

        --site-background-start: #000;
        --site-background-end: #0a0a0a;
        --site-foreground: #fff;
        --site-muted: #888;
        --site-accent: #aaf3e6;
        --site-edge-inset: 2rem;
        --site-font-sans:
            -apple-system,
            blinkmacsystemfont,
            "Segoe UI",
            sans-serif;
        --site-font-mono: ui-monospace, monospace;
    }

    body {
        min-height: 100vh;
        min-height: 100svh;
        overflow-x: hidden;
        background:
            linear-gradient(180deg,
                var(--site-background-start) 0%,
                var(--site-background-end) 100%);
        color: var(--site-foreground);
        font-family: var(--site-font-sans);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}