:root[data-theme="dark"] {
    --bg-color: #1d1d1d;
    --bg-color-2: #383838;
    --bg-color-3: #070707;
    --primary-color-1: #e4e4e4;
    --primary-color-2: #bebebe;
}

:root[data-theme="light"] {
    --bg-color: #e7e7e7;
    --bg-color-2: #b6b6b6;
    --bg-color-3: #f5f5f5;
    --primary-color-1: #131313;
    --primary-color-2: #272727;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-color: #1d1d1d;
        --bg-color-2: #383838;
        --bg-color-3: #070707;
        --primary-color-1: #e4e4e4;
        --primary-color-2: #bebebe;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-color: #e7e7e7;
        --bg-color-2: #b6b6b6;
        --bg-color-3: #f5f5f5;
        --primary-color-1: #131313;
        --primary-color-2: #272727;
    }
}


* {
    background-color: var(--bg-color);
    color: var(--primary-color-1);
}

button {
    background-color: var(--bg-color-3);
    border: 2px solid var(--primary-color-2);
}