:root {
    box-sizing: border-box;
    --color-background: #e8e6e3;
    --color-foreground: #181a1b;
    --color-form-error: #ff0000;
    --color-border: #5d6164;
    --color-background-highlight: #f8f7f4;
    --color-foreground-highlight: #292b2c;
    --color-border-highlight: #6e7275;
    --color-maze-background: #e8e6e3;
    --color-maze-border: #333333;
    --color-maze-cell-solution: #b1d5b1;
    --color-maze-cell-solution-highlight: #b9e8b9;
    --color-maze-cell-user: #ffcc00;
    --color-maze-cell-user-highlight: #ffdd22;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #181a1b;
        --color-foreground: #e8e6e3;
        --color-form-error: #ff0000;
        --color-border: #5d6164;
        --color-background-highlight: #292b2c;
        --color-foreground-highlight: #f8f7f4;
        --color-border-highlight: #6e7275;
        --color-maze-background: #181a1b;
        --color-maze-border: #e8e6e3;
        --color-maze-cell-solution: #213d21;
        --color-maze-cell-solution-highlight: #3d6e3d;
        --color-maze-cell-user: #ffcc00;
        --color-maze-cell-user-highlight: #ffdd22;
    }
}

body {
    color: var(--color-foreground);
    background: var(--color-background);
    font-family: "Cantarell", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input, select {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
}

input:hover, input:focus, select:hover, select:focus {
    background-color: var(--color-background-highlight);
    border-color: var(--color-border-highlight);
    color: var(--color-foreground-highlight);
}