@layer base, components, utilities, theme;

@import "./base.css";
@import "./components/button.css";
@import "./components/content.css";
@import "./components/field.css";
@import "./components/footer.css";
@import "./components/grid.css";
@import "./components/header.css";
@import "./components/list.css";
@import "./components/menu.css";
@import "./components/modal.css";
@import "./components/prose.css";
@import "./components/screen.css";
@import "./components/spacer.css";
@import "./components/stack.css";
@import "./components/toolbar.css";
@import "./components/toggle.css";
@import "./utilities.css";

@view-transition {
    navigation: auto;
}

@layer components {
    :root {
        color-scheme: light dark;

        --hue: 260deg;
        --horizontal-safe-space: 1rem;
        --vertical-safe-space: 2rem;
        --font-sans: sans-serif;
    }

    * {
        scrollbar-width: none;
        line-height: normal;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        overscroll-behavior: none;
    }

    body {
        background-color: light-dark(oklch(98% 0% 0deg), oklch(10% 0% 0deg));
        color: light-dark(oklch(0% 0% 0deg), oklch(100% 0% 0deg));
        height: 100dvh;
        overscroll-behavior: contain;
    }

    main {
        backdrop-filter: blur(1rem);
        background-color: light-dark(oklch(100% 0% 0deg / 80%), oklch(0% 0% 0deg / 80%));
        height: 100dvh;
        overflow: auto;
        overscroll-behavior: contain;
    }

    header+main {
        padding-block-start: 4rem;
    }

    main:has(+footer) {
        padding-block-end: 6rem;
    }

    iframe {
        display: block;
        width: 100dvw;
        height: 100dvh;
        border: none;
        background-color: transparent;
    }

    svg {
        display: block;
    }

}