/* Colour tokens. data-theme on <html> is always "light" or "dark" (set before first paint). */
:root {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --surface-alt: #f8f8f8;
    --surface-sunken: #edf0f6;
    --surface-hover: #f1f1f1;
    --border: #ccc;
    --border-soft: rgba(0, 0, 0, .1);
    --text: #000;
    --text-muted: rgba(0, 0, 0, .6);
    --link: #337ab7;
    --accent: #ff8c00;
    --danger: #bb0f00;
    --success: #0f6b2a;
    --warning-bg: #fff3cd;
    --warning-bg-solid: #fff3cd;
    --warning-text: #6b4a00;
    --warning-border: #e6c15a;
    --shadow: rgba(0, 0, 0, .2);
    --code-bg: #f7f7f8;
    --heading: #ba3925;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12171a;
    --surface: #1a2125;
    --surface-alt: #20292e;
    --surface-sunken: #263137;
    --surface-hover: #2c383e;
    --border: #3a474d;
    --border-soft: rgba(255, 255, 255, .14);
    --text: #e6eaec;
    --text-muted: #a3afb4;
    --link: #6ca9ea;
    --danger: #ff6b5e;
    --success: #4cc38a;
    --warning-bg: rgba(255, 193, 7, .14);
    --warning-bg-solid: #3b3420;
    --warning-text: #ffd27a;
    --warning-border: rgba(255, 193, 7, .4);
    --shadow: rgba(0, 0, 0, .6);
    --code-bg: #20292e;
    --heading: #ff8a73;
}

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

/* Same control as on vogella.com; it sits on the dark navbar in both themes, so its colours are fixed. */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    margin: 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.theme-switch__key {
    color: rgba(255, 255, 255, .7);
}

.theme-switch__opts {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 4px;
    overflow: hidden;
}

.theme-switch__opt {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 7px 11px;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.theme-switch__opt:last-child {
    border-right: 0;
}

.theme-switch__opt:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.theme-switch__opt[aria-pressed="true"] {
    color: #ffa468;
    background: rgba(255, 140, 66, .14);
}

.theme-switch__opt:focus-visible {
    outline: 2px solid #ff8c42;
    outline-offset: -2px;
}

/* The *_black.svg icons vanish on dark surfaces, so they are lightened to the muted text tone. */
:root[data-theme="dark"] img[src$="_black.svg"] {
    filter: invert(.8);
}

/* Feature icons ship with black fills and need lightening on dark surfaces. */
:root[data-theme="dark"] img.icon-dark-invert,
:root[data-theme="dark"] img[src$="/icons/calendar.svg"],
:root[data-theme="dark"] img[src$="/icons/calendar_add.svg"],
:root[data-theme="dark"] img[src$="/icons/check_box.svg"],
:root[data-theme="dark"] img[src$="/icons/check_box_checked.svg"],
:root[data-theme="dark"] img[src$="/icons/check_mark.svg"],
:root[data-theme="dark"] img[src$="/icons/chevron_down.svg"],
:root[data-theme="dark"] img[src$="/icons/chevron_right.svg"],
:root[data-theme="dark"] img[src$="/icons/chevron_up.svg"],
:root[data-theme="dark"] img[src$="/icons/edit.svg"],
:root[data-theme="dark"] img[src$="/icons/exercise.svg"],
:root[data-theme="dark"] img[src$="/icons/group.svg"],
:root[data-theme="dark"] img[src$="/icons/slide_deck.svg"],
:root[data-theme="dark"] img[src$="/icons/star.svg"],
:root[data-theme="dark"] img[src$="/icons/star_filled.svg"],
:root[data-theme="dark"] img[src$="/icons/study.svg"],
:root[data-theme="dark"] img[src$="/icons/update.svg"],
:root[data-theme="dark"] img[src$="/icons/video.svg"] {
    filter: invert(.8);
}

/* The quiz dwarf and its lettering are dark artwork, so they keep a light backdrop. */
:root[data-theme="dark"] #dwarf-side-image {
    background: #e9ecef;
    border-radius: 8px;
    padding: 8px;
}

/* The shop card is barely distinguishable from the dark page background. */
:root[data-theme="dark"] section.shop-page .course {
    border: 1px solid var(--border-soft);
}

/* Blue download buttons glare on the dark surfaces. */
:root[data-theme="dark"] .button.download-button {
    background-color: #5b6870;
    color: #fff;
}

:root[data-theme="dark"] .button.download-button:hover {
    background-color: #75838b;
}

/* Images can follow the theme: <img class="theme-light"> / <img class="theme-dark"> pairs. */
:root[data-theme="dark"] .theme-light,
:root:not([data-theme="dark"]) .theme-dark {
    display: none !important;
}

:root[data-theme="dark"] img:not([src$=".svg"]):not(.theme-dark):not(.theme-light):not(.navigation-logo img) {
    opacity: .92;
}