@import url(https://fonts.bunny.net/css?family=cardo:400,700);
@import url(https://fonts.bunny.net/css?family=manrope:300,500,700);
@import url(https://fonts.bunny.net/css?family=merriweather:300,700);
@import url(https://fonts.bunny.net/css?family=nunito:400,600,700);
@import url(https://fonts.bunny.net/css?family=old-standard-tt:400,700);
@import url(https://fonts.bunny.net/css?family=prata:400);
@import url(https://fonts.bunny.net/css?family=roboto:400,500,700);
@import url(https://fonts.bunny.net/css?family=rufina:400,500,700);
@import url(https://fonts.bunny.net/css?family=tenor-sans:400);
@import url(https://fonts.bunny.net/css?family=space-grotesk:700);
@import url(https://fonts.bunny.net/css?family=chakra-petch:400);
@import url(https://fonts.bunny.net/css?family=noto-sans:400,700);
@import url(https://fonts.bunny.net/css?family=poppins:400,700);
@import url(https://fonts.bunny.net/css?family=fira-sans:400,700);
@import url(https://fonts.bunny.net/css?family=inter:400,700);
@import url(https://fonts.bunny.net/css?family=noto-serif:400,700);
@import url(https://fonts.bunny.net/css?family=lora:400,700);
@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,700);
@import url(https://fonts.bunny.net/css?family=space-mono:400,700);
@import url(https://fonts.bunny.net/css?family=fira-mono:400,700);
@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700);

@import "tailwindcss/theme.css";
@import "./preflight.css";
@import "tailwindcss/utilities.css";
@import "tw-animate-css";
@import "./tailwind.theme.css";

@import "./theme-variables.css";

@layer base {
    /* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */
    @font-face {
        font-family: "Inter";
        src: local("Inter") format("truetype-variations");
        font-weight: 100 900;
    }

    .shade {
        & {
            @apply font-sans text-black text-base leading-normal;
        }
    }

    * {
        @apply border-border;
    }
    body {
        @apply font-sans antialiased bg-background text-foreground;
    }
}

.shade {
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    letter-spacing: unset;
}

.shade.app-container {
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 800px) {
    body:not(.react-admin) .shade {
        height: calc(100vh - var(--mobile-navbar-height));
    }
}

.dark .shade {
    color: #fafafb;
}

.dark .shade .gh-loading-orb-container {
    background-color: #000000;
}

.dark .shade .gh-loading-orb {
    filter: invert(100%);
}

/* Suppress transitions/animations during a light/dark mode swap so the
   whole UI flips in a single paint instead of crossfading per element. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

.shade .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome */
}

.shade .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Prose classes are for formatting arbitrary HTML that comes from the API */
.gh-prose-links a {
    color: #30cf43;
}
