@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";

/* CSS variables — outside @layer so they're in the implicit layer */
:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(216 11% 9%);
    --muted: hsl(200 12% 96%);
    --muted-foreground: hsl(210 13% 55%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(216 11% 9%);
    --border: hsl(204 15% 91%);
    --input: hsl(204 14% 93%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(216 11% 9%);
    --primary: hsl(216 11% 9%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(204 14% 93%);
    --secondary-foreground: hsl(216 11% 9%);
    --accent: hsl(200 12% 96%);
    --accent-foreground: hsl(216 11% 9%);
    --destructive: hsl(354 92% 50%);
    --destructive-foreground: hsl(0 0% 100%);
    --ring: hsl(215 13% 63%);
    --input-group-radius: 9px;
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 88%);
    --chart-darkgray: hsl(210 13% 79%);
    --chart-rose: hsl(345 100% 56%);
    --chart-orange: hsl(25 100% 50%);
    --chart-amber: hsl(36 100% 50%);
    --chart-yellow: hsl(47 100% 50%);
    --chart-green: hsl(144 100% 39%);
    --chart-teal: hsl(174 100% 37%);
    --chart-blue: hsl(198 100% 51%);
    --chart-darkblue: hsl(226 91% 61%);
    --chart-purple: hsl(273 100% 64%);
    --sidebar-background: hsl(240 11% 98%);
    --sidebar-foreground: hsl(216 11% 9%);
    --sidebar-primary: hsl(216 11% 9%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(204 14% 93%);
    --sidebar-accent-foreground: hsl(216 11% 9%);
    --sidebar-border: hsl(200 12% 96%);
    --sidebar-ring: hsl(215 13% 63%);
    --mobile-navbar-height: 64px;
}

.dark {
    --background: hsl(216 11% 9%);
    --foreground: hsl(210 13% 88%);
    --muted: hsl(210 11% 25%);
    --muted-foreground: hsl(210 13% 63%);
    --accent: hsl(210 11% 25%);
    --accent-foreground: hsl(200 12% 96%);
    --popover: hsl(216 11% 9%);
    --popover-foreground: hsl(212 13% 72%);
    --border: hsl(216 7% 14%);
    --input: hsl(210 11% 25%);
    --card: hsl(216 11% 9%);
    --card-foreground: hsl(213 31% 91%);
    --primary: hsl(200 12% 96%);
    --primary-foreground: hsl(216 11% 9%);
    --secondary: hsl(210 11% 25%);
    --secondary-foreground: hsl(200 12% 96%);
    --destructive: hsl(354 81% 31%);
    --destructive-foreground: hsl(240 11% 98%);
    --ring: hsl(210 11% 25%);
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 55%);
    --sidebar-background: hsl(216 11% 6%);
    --sidebar-foreground: hsl(200 12% 96%);
    --sidebar-primary: hsl(210 11% 25%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(210 11% 17%);
    --sidebar-accent-foreground: hsl(200 12% 96%);
    --sidebar-border: hsl(210 11% 15%);
    --sidebar-ring: hsl(210 13% 55%);
}

@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%);
}

.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;
}
