@media (prefers-color-scheme: light) {

    :root,
    [data-selected-theme="grayscale"] {
        --background: #dededd;
        --foreground: #171717;
        --accent: #6d6d6d;
    }

    [data-selected-theme="tinted"] {
        --background: #d3e4d3;
        --foreground: #181d1a;
        --accent: #7c8477;
    }

    [data-selected-theme="warm"] {
        --background: #e7e0b1;
        --foreground: #432f21;
        --accent: #c46e35;
    }

    [data-selected-theme="cool"] {
        --background: #b6e5fe;
        --foreground: #042f45;
        --accent: #07aad7;
    }
}

@media (prefers-color-scheme: dark) {

    :root,
    [data-selected-theme="grayscale"] {
        --background: #171717;
        --foreground: #dededd;
        --accent: #6d6d6d;
    }

    [data-selected-theme="tinted"] {
        --background: #181d1a;
        --foreground: #d3e4d3;
        --accent: #7c8477;
    }

    [data-selected-theme="warm"] {
        --background: #1d181e;
        --foreground: #edd8bd;
        --accent: #8b5760;

    }

    [data-selected-theme="cool"] {
        --background: #08001f;
        --foreground: #b2d5d1;
        --accent: #444d84;
    }
}

button[data-theme][aria-pressed="true"] {
    background-color: var(--foreground);
    color: var(--background);
    border: 2px solid var(--foreground);
    border-radius: 5px;
}