@layer base {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    body {
        background-color: var(--color-slate-50);
        background-image: radial-gradient(at 0% 0%, hsla(210, 100%, 96%, 1) 0, transparent 50%),
            radial-gradient(at 50% 0%, hsla(225, 100%, 96%, 1) 0, transparent 50%),
            radial-gradient(at 100% 0%, hsla(190, 100%, 96%, 1) 0, transparent 50%);
        font-family: var(--font-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
    }

    .dark body {
        background-image: radial-gradient(at 0% 0%, hsla(222, 47%, 11%, 1) 0, transparent 50%),
            radial-gradient(at 100% 0%, hsla(217, 33%, 17%, 1) 0, transparent 50%);
    }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-slate-300);
    border-radius: 9999px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-slate-700);
}

/* Utilities */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}