@import "./colors.css";
@import "./animations.css";
@import "./components.css";
@import "./pages.css";

@font-face {
    font-family: "inter";
    src: URL("/external/inter.ttf") format("truetype");
}

body {
    --default-spacing: 1rem;
    --bg-color: light-dark(var(--color-grey-25), var(--color-grey-900));
    --text-color: light-dark(var(--color-grey-900), var(--color-grey-25));

    color: var(--text-color);
    fill: var(--text-color);
    background-color: var(--bg-color);
    font-size: 1rem;
    font-weight: 400;
    font-family: "inter";

    ::backdrop {
        background-color: light-dark(rgba(from #000000 r g b / 90%), rgba(from #000000 r g b / 80%));
        backdrop-filter: blur(.5rem);
    }

    @media (prefers-reduced-transparency),
    (prefers-reduced-motion) {
        ::backdrop {
            backdrop-filter: none;
        }
    }
}

* {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

b {
    font-weight: bold;
    color: light-dark(var(--color-orange-700), var(--color-orange-200));
}