/* Colors for light and dark mode, used by base.css and login.css.
   Dark mode follows the device setting, unless the user has picked a theme
   with the toggle (stored by theme.js as data-theme on <html>). */

:root {
    color-scheme: light;

    --bg: aliceblue;
    --surface: white;
    --text: black;
    --text-soft: rgb(59, 59, 59);
    --faded-text: rgb(121, 121, 121);
    --header-bg: rgb(184, 227, 255);
    --header-color: #3498db;
    --header-icon: rgb(31, 31, 31);
    --border: gray;
    --border-strong: black;
    --status-confirmed: green;
    --status-proposed: rgb(243, 238, 159);
    --status-proposed-text: black;
    --status-cancelled: red;
    --notice-bg: rgb(255, 249, 165);
    --notice-border: black;
    --active-text: rgb(225, 243, 255);
    --button-bg: #1f6fa8;
    --button-text: white;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #10171f;
        --surface: #1a232e;
        --text: #e6edf3;
        --text-soft: #c3ccd5;
        --faded-text: #95a3b1;
        --header-bg: #14304a;
        --header-color: #6cb8ee;
        --header-icon: #e6edf3;
        --border: #3b4856;
        --border-strong: #3b4856;
        --status-confirmed: #2e7d32;
        --status-proposed: #5f5a1c;
        --status-proposed-text: #fff8c4;
        --status-cancelled: #b3261e;
        --notice-bg: #343116;
        --notice-border: #5f5a1c;
        --active-text: #e1f3ff;
        --button-bg: #2b7bbd;
        --button-text: white;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #10171f;
    --surface: #1a232e;
    --text: #e6edf3;
    --text-soft: #c3ccd5;
    --faded-text: #95a3b1;
    --header-bg: #14304a;
    --header-color: #6cb8ee;
    --header-icon: #e6edf3;
    --border: #3b4856;
    --border-strong: #3b4856;
    --status-confirmed: #2e7d32;
    --status-proposed: #5f5a1c;
    --status-proposed-text: #fff8c4;
    --status-cancelled: #b3261e;
    --notice-bg: #343116;
    --notice-border: #5f5a1c;
    --active-text: #e1f3ff;
    --button-bg: #2b7bbd;
    --button-text: white;
}

body {
    background-color: var(--bg);
    color: var(--text);
}

/* Moon/sun button that switches between light and dark mode */
.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.3em;
    font: inherit;
    color: var(--header-icon);
    cursor: pointer;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--header-color);
    outline-offset: 2px;
}