:root {
    --main-color: #fff;
    --main-color-bg: #f2f3f5;
    --main-color-text: #252933;
    --main-color-border: #e3e4ea;
    --main-color-hover: #00c4b6;
    --font-color-1: #252933;
    --font-color-2: #515767;
    --font-color-3: #8a919f;
    --scrollbar-color: #c8ccd6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-color: #282c34;
        --main-color-bg: #333841;
        --main-color-text: #a9abae;
        --main-color-border: #414958;
        --main-color-hover: #00c4b6;
        --font-color-1: #f2f2f2;
        --font-color-2: #515767;
        --font-color-3: #8a919f;
        --scrollbar-color: #4d4d4d;
    }
}