@import "tailwindcss";

@theme {
    --color-void: #060913;
    --color-panel: #0c1222;
    --color-blurple: #5865f2;
    --color-blurple-soft: #8891ff;
    --color-mint: #57f287;
    --font-sans: var(--font-cascadia), ui-monospace, SFMono-Regular, monospace;
    --font-mono: var(--font-cascadia), ui-monospace, SFMono-Regular, monospace;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #232c47 var(--color-void);
}

body {
    background-color: var(--color-void);
    color: #e8ecf6;
    font-family: var(--font-sans);
    background-image:
        radial-gradient(60rem 30rem at 80% -10%, rgba(88, 101, 242, 0.16), transparent 60%),
        radial-gradient(50rem 26rem at 10% 0%, rgba(87, 242, 135, 0.07), transparent 60%);
    background-attachment: fixed;
}

::selection {
    background: rgba(88, 101, 242, 0.45);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-void);
}
::-webkit-scrollbar-thumb {
    background: #232c47;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-blurple);
}

.modal-scroll {
    scrollbar-width: thin;
    scrollbar-color: #2b3554 transparent;
}
.modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background: #2b3554;
    border-radius: 999px;
}
.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-blurple);
}

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}