@import url("./reset.css");
@import url("./colors.css");
@import url("./themes/dark.css");
@import url("./themes/light.css");

:root {
    font-size: 10px;

    --ff-1: "Inter Variable", sans-serif;
    --ff-2: "Orbitron Variable", sans-serif;

    --fs-10: 1rem;
    --fs-12: 1.2rem;
    --fs-14: 1.4rem;
    --fs-16: 1.6rem;
    --fs-18: 1.8rem;
    --fs-20: 2rem;
    --fs-22: 2.2rem;
    --fs-24: 2.4rem;
    --fs-30: 3rem;
    --fs-38: 3.8rem;
    --fs-46: 4.6rem;
    --fs-70: 7rem;

    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    --ls-0: 0em;
    --ls-04: 0.04em;
    --ls-10: 0.1em;

    --lh-08: 0.8em;
    --lh-10: 1em;
    --lh-12: 1.2em;
    --lh-15: 1.5em;

    --is-12: 1.2rem;
    --is-18: 1.8rem;
    --is-24: 2.4rem;
    --is-36: 3.6rem;

    --bw-1: 0.1rem;

    --br-06: 0.6rem;
    --br-10: 1rem;
    --br-14: 1.4rem;
    --br-20: 2rem;
    --br-24: 2.4rem;
    --br-max: 100rem;

    --bs-1: 0 0.2rem 1rem rgba(0, 4, 10, 0.25);
    --bs-2: 0 0.4rem 2rem rgba(0, 4, 10, 0.25);

    --input-height: 5.2rem;
    --min-padding-x: 4rem;
    --min-padding-x-mobile: 2rem;
    --min-section-width: 160rem;

    --faster: all 0.1s ease-in-out;
    --fast: all 0.2s ease-in-out;
    --normal: all 0.25s ease-in-out;
    --slow: all 0.4s ease-in-out;
    --slower: all 0.5s ease-in-out;

    --navbar-height: 8rem;
}

[data-font-size="small"] {
    font-size: 7px;
}

[data-font-size="default"] {
    font-size: 10px;
}

[data-font-size="large"] {
    font-size: 12px;
}

[disable-animations],
[disable-animations] * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

html {
    interpolate-size: allow-keywords;
}

* {
    font-family: var(--ff-1);

    /* One thin themed scrollbar for every scroll area. Chrome 121+ and Firefox use these
       standard properties and ignore ::-webkit-scrollbar once they are set. */
    scrollbar-width: thin;
    scrollbar-color: var(--bg-4) transparent;
}

/* Fallback for engines without the standard properties (Safari). */
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar {
        width: 0.8rem;
        height: 0.8rem;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--bg-4);
        border-radius: var(--br-max);
    }
}

:root {
    accent-color: var(--theme-color);
}

::selection {
    background-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
    color: var(--c-1);
}

input,
textarea,
[contenteditable="true"] {
    caret-color: var(--theme-color);
}

::placeholder {
    color: var(--c-4);
    opacity: 1;
}

body {
    width: 100dvw;
    height: 100dvh;

    background-color: var(--bg-1);
    color: var(--c-1);

    &.loading {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

#root {
    width: 100%;
    height: 100%;
}

svg * {
    pointer-events: none;
}

/* * {
    border-color: transparent !important;
} */