:root[theme="dark"] {
    --background-color: rgba(28, 28, 28, 1);
    --bg-gradient-start: rgb(50, 32, 152);
    --bg-gradient-end: rgb(144, 10, 196);
    --card-color: rgb(19, 19, 19);
    --body-color: rgb(147, 132, 212);

    --text-color: rgba(220, 220, 220, 1);
    --text-color-hover: rgb(141, 128, 194);
    --link-color: rgb(236, 236, 236);
    --link-color-hover: rgb(153, 138, 208);

    --input-background-color: rgb(62, 62, 62);
    --input-border-color: rgb(88, 88, 88);
    --input-border-color-hover: rgb(28, 28, 28);
    --input-border-color-focus: rgb(50, 50, 50);

    --btn-text-color: rgb(231, 231, 231);
    --btn-background-color: rgb(65, 48, 158);
    --btn-background-color-hover: rgb(100, 30, 180);

    --odd: rgb(28, 28, 28);
    --even: rgb(44, 44, 44);

    --custom-select-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23e6e7e8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
}

@media (prefers-color-scheme: dark) {
    :root[theme="system"] {
        --background-color: rgba(28, 28, 28, 1);
        --bg-gradient-start: rgb(50, 32, 152);
        --bg-gradient-end: rgb(144, 10, 196);
        --card-color: rgb(19, 19, 19);
        --body-color: rgb(147, 132, 212);

        --text-color: rgba(220, 220, 220, 1);
        --text-color-hover: rgb(141, 128, 194);
        --link-color: rgb(236, 236, 236);
        --link-color-hover: rgb(153, 138, 208);

        --input-background-color: rgb(62, 62, 62);
        --input-border-color: rgb(88, 88, 88);
        --input-border-color-hover: rgb(28, 28, 28);
        --input-border-color-focus: rgb(50, 50, 50);

        --btn-text-color: rgb(231, 231, 231);
        --btn-background-color: rgb(65, 48, 158);
        --btn-background-color-hover: rgb(100, 30, 180);

        --odd: rgb(28, 28, 28);
        --even: rgb(44, 44, 44);

        --custom-select-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23e6e7e8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    }
}