@charset "utf-8";


/* === { LAYERS } === */

@layer universe, galaxies, atoms, molecules, forces;

@import url("galaxies.css") layer(galaxies);
@import url("atoms.css") layer(atoms);
@import url("molecules.css") layer(molecules);
@import url("forces.css") layer(forces);


/* === { FONTS } === */

/* --- { INSTRUMENT SANS } --- */

@font-face {
    font-display: swap;
    font-family: "Instrument Sans";
    font-stretch: 75% 100%;
    font-style: normal;
    font-weight: 400 700;
    src: url("../fonts/instrument-sans_regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Instrument Sans";
    font-stretch: 75% 100%;
    font-style: italic;
    font-weight: 400 700;
    src: url("../fonts/instrument-sans_italic.woff2") format("woff2");
}

/* --- { INSTRUMENT SERIF } --- */

@font-face {
    font-display: swap;
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/instrument-serif_regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/instrument-serif_italic.woff2") format("woff2");
}


/* === { UNIVERSE } === */

@layer universe {
    /* --- { RESET } --- */

    *,
    *::after,
    *::before {
        box-sizing: border-box;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-stretch: inherit;
        line-height: inherit;
        margin: 0;
        padding: 0;
    }

    img,
    picture,
    svg,
    video {
        display: block;
        max-width: 100%;
    }

    /* --- { BASE } --- */

    html {
        font-family: "Instrument Sans", sans-serif;
        font-size: clamp(100%, 90% + 0.5vw, 125%);
        font-stretch: 75%;
        line-height: 1.5;
        scroll-behavior: smooth;
        text-size-adjust: 100%;
    }

    /* --- { COLORS } --- */

    :root {
        --u_color_dark: hsl(0 0 0);
        --u_color_light: hsl(0 0 100);

        --u_color_background: light-dark(var(--u_color_light), var(--u_color_dark));
        --u_color_foreground: light-dark(var(--u_color_dark), var(--u_color_light));
    }

    /* --- { THEMES } --- */

    [data-theme="dark"] {
        --u_theme: dark;
        color-scheme: dark;
    }

    [data-theme="light"] {
        --u_theme: light;
        color-scheme: light;
    }

    @container style(--u_theme: dark) {
        [data-theme="inverted"] {
            --u_theme: light;
            color-scheme: light;
        }
    }

    @container style(--u_theme: light) {
        [data-theme="inverted"] {
            --u_theme: dark;
            color-scheme: dark;
        }
    }

    /* --- { FOCUS } --- */

    :focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* --- { SELECTION } --- */

    ::selection {
        background-color: var(--u_color_foreground);
        color: var(--u_color_background);
    }
}