:root {
    --accent: 136, 58, 234;
    --accent-light: 224, 204, 250;
    --accent-dark: 49, 10, 101;
    --accent-gradient: linear-gradient(
        45deg,
        rgb(var(--accent)),
        rgb(var(--accent-light)) 30%,
        white 60%
    );
    --c-bg: #fbfbfb;
    --c-bg-op: #fbfbfb00;
    --c-fg: #444444;
    --c-scroll: #d9d9d9;
    --c-scroll-hover: #bbbbbb;
    scrollbar-color: var(--c-scrollbar) var(--c-bg);
    --primary-glow: conic-gradient(from 180deg at 50% 50%,#16abff33 0deg,#0885ff33 55deg,#54d6ff33 120deg,#0071ff33 160deg,transparent 360deg);
}

html {
    font-family: system-ui, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-fg);
}

html.dark {
    --c-bg: #212129;
    --c-bg-op: #21212900;
    --c-fg: #ddddf0;
    --c-scroll: #333333;
    --c-scroll-hover: #555555;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--c-scroll);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-scroll-hover);
}
::-webkit-scrollbar-track {
    background-color: var(--c-bg);
}