:root {
    --light: #F3F3F3;
    --dark: #323744;
    --accent-blue: #0520F8;
    --comfort-blue: #2F80ED;
    --middle-blue: #2D9CDB;
    --light-blue: #00B9F4;
    --orange-accent: #F87605;

    /*
     * Theme tokens. The class names below are historical: ".dark-color" is the color
     * that is DARK in the light theme and inverts in the dark theme; ".light-fill" is
     * the background that is LIGHT in the light theme and inverts, etc. The old code
     * achieved that inversion by swapping class names in jQuery on every element. We now
     * drive it here by flipping these tokens on [data-theme="dark"] — the classes stay
     * put and the colors follow the theme.
     */
    --darkname-color: var(--dark);
    --lightname-color: var(--light);
    --lightname-fill: var(--light);
    --darkname-fill: var(--dark);
}

[data-theme="dark"] {
    --darkname-color: var(--light);
    --lightname-color: var(--dark);
    --lightname-fill: var(--dark);
    --darkname-fill: var(--light);
}

.light-fill {
    background: var(--lightname-fill)!important;
}

.light-color {
    color: var(--lightname-color);
    border-color: var(--lightname-color);
}

.dark-fill {
    background: var(--darkname-fill)!important;
}

.dark-color {
    color: var(--darkname-color);
    border-color: var(--darkname-color);
}

.accent-blue-fill {
    background: var(--accent-blue);
}

.accent-blue-color {
    color: var(--accent-blue);
}

.comfort-blue-fill {
    background: var(--comfort-blue);
}

.comfort-blue-color {
    color: var(--comfort-blue);
}

.middle-blue-fill {
    background: var(--middle-blue);
}

.middle-blue-color {
    color: var(--middle-blue);
}

.light-blue-fill {
    background: var(--light-blue);
}

.light-blue-color {
    color: var(--light-blue);
}

.orange-accent-fill {
    background: var(--orange-accent);
}

.orange-accent-color {
    color: var(--orange-accent);
}

.glass-card {
    /*position: absolute;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*bottom: 0;*/
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(47, 128, 237, 0.82) 0.27%, rgba(143, 184, 240, 0.58) 100%);
    backdrop-filter: blur(12px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 20px;
}

.nohover-light:hover {
    border-color: var(--lightname-color) !important;
    color: var(--lightname-color) !important;
    text-decoration: none;
}

.nohover-dark:hover {
    border-color: var(--darkname-color) !important;
    color: var(--darkname-color) !important;
    text-decoration: none;
}

.navbar-link {
    text-decoration: none;
}

.navbar-link:hover {
    color: var(--orange-accent);
    text-decoration: none;
}

.center-elements {
}

/*
 * Theme toggle button: dark background + light icon in the light theme, inverting in
 * the dark theme (same as the old body.light-fill / body.dark-fill rules, now token-
 * driven so no class swap is needed).
 */
.switch-button {
    background: var(--darkname-fill) !important;
    color: var(--lightname-color) !important;
    border-color: var(--darkname-fill) !important;
}

.switch-button:hover {
    opacity: 0.8;
}

/* Bootstrap's navbar-light hamburger icon is dark; flip it so it stays visible on the
 * dark background in the dark theme. */
[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}