:root {
    color-scheme: light;
    --site-background: #ffffff;
    --site-surface: #ffffff;
    --site-surface-alt: #f8f9fa;
    --site-text: #212529;
    --site-muted: #5f6770;
    --site-link: #0056b3;
    --site-link-hover: #003f82;
    --site-border: #ced4da;
    --site-focus: #005fcc;
    --code-background: #f8f8f8;
    --code-text: #212529;
    --code-comment: #3d7b7b;
    --code-keyword: #087f23;
    --code-string: #a31c1c;
    --code-name: #0046c7;
    --code-number: #4f5963;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --site-background: #121820;
    --site-surface: #1b232d;
    --site-surface-alt: #26313d;
    --site-text: #f2f5f8;
    --site-muted: #bec8d2;
    --site-link: #8fc5ff;
    --site-link-hover: #c4e1ff;
    --site-border: #5a6878;
    --site-focus: #f4ca64;
    --code-background: #161b22;
    --code-text: #e6edf3;
    --code-comment: #9fcdcb;
    --code-keyword: #8ee7a7;
    --code-string: #ffb4a9;
    --code-name: #9bcaff;
    --code-number: #d2d9e1;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --site-background: #121820;
        --site-surface: #1b232d;
        --site-surface-alt: #26313d;
        --site-text: #f2f5f8;
        --site-muted: #bec8d2;
        --site-link: #8fc5ff;
        --site-link-hover: #c4e1ff;
        --site-border: #5a6878;
        --site-focus: #f4ca64;
        --code-background: #161b22;
        --code-text: #e6edf3;
        --code-comment: #9fcdcb;
        --code-keyword: #8ee7a7;
        --code-string: #ffb4a9;
        --code-name: #9bcaff;
        --code-number: #d2d9e1;
    }
}

body,
.bg-white,
.bg-light,
.navbar,
.dropdown-menu,
.comment,
.weather-forecast,
.forecast-table th,
.forecast-table td {
    background-color: var(--site-surface);
    color: var(--site-text);
}

body {
    background-color: var(--site-background);
}

.bg-white,
.bg-light {
    background-color: var(--site-surface) !important;
}

.blog-header,
.navbar,
#footer,
#site-comments,
.comment,
.comment-replies-list,
.forecast-table th,
.forecast-table td,
hr {
    border-color: var(--site-border);
}

.forecast-table th {
    background-color: var(--site-surface-alt);
}

a,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand {
    color: var(--site-link);
}

a:hover,
a:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--site-link-hover);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active > .nav-link,
.text-dark {
    color: var(--site-text) !important;
}

.metadata,
.comment time,
caption,
.text-muted {
    color: var(--site-muted) !important;
}

button,
input,
textarea,
select,
.form-control {
    background-color: var(--site-surface);
    color: var(--site-text);
    border-color: var(--site-border);
}

button:hover,
button:focus,
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--site-focus);
}

:focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 3px;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    color: var(--site-text);
    font-size: 0.875rem;
}

.theme-selector label {
    margin: 0;
    font-weight: 600;
}

.theme-selector select {
    min-height: 2rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
}

#footer .theme-selector {
    justify-content: center;
    margin: 0 0 0.75rem;
}

pre,
pre.code,
.code,
.codehilite,
.highlight pre,
code {
    background-color: var(--code-background);
    color: var(--code-text);
}

pre.code span[class],
.code pre span[class],
.highlight pre span[class] {
    color: var(--code-text);
}

pre.code span.c,
pre.code span.ch,
pre.code span.cm,
pre.code span.cp,
pre.code span.cpf,
pre.code span.c1,
pre.code span.cs,
.code pre span.c,
.code pre span.ch,
.code pre span.cm,
.code pre span.cp,
.code pre span.cpf,
.code pre span.c1,
.code pre span.cs,
.highlight pre span.c,
.highlight pre span.ch,
.highlight pre span.cm,
.highlight pre span.cp,
.highlight pre span.cpf,
.highlight pre span.c1,
.highlight pre span.cs {
    color: var(--code-comment);
}

pre.code span.k,
pre.code span.kc,
pre.code span.kd,
pre.code span.kn,
pre.code span.kp,
pre.code span.kr,
pre.code span.kt,
pre.code span.nb,
pre.code span.nt,
.code pre span.k,
.code pre span.kc,
.code pre span.kd,
.code pre span.kn,
.code pre span.kp,
.code pre span.kr,
.code pre span.kt,
.code pre span.nb,
.code pre span.nt,
.highlight pre span.k,
.highlight pre span.kc,
.highlight pre span.kd,
.highlight pre span.kn,
.highlight pre span.kp,
.highlight pre span.kr,
.highlight pre span.kt,
.highlight pre span.nb,
.highlight pre span.nt {
    color: var(--code-keyword);
}

pre.code span.s,
pre.code span.sa,
pre.code span.sb,
pre.code span.sc,
pre.code span.sd,
pre.code span.se,
pre.code span.sh,
pre.code span.si,
pre.code span.sr,
pre.code span.s1,
pre.code span.s2,
.code pre span.s,
.code pre span.sa,
.code pre span.sb,
.code pre span.sc,
.code pre span.sd,
.code pre span.se,
.code pre span.sh,
.code pre span.si,
.code pre span.sr,
.code pre span.s1,
.code pre span.s2,
.highlight pre span.s,
.highlight pre span.sa,
.highlight pre span.sb,
.highlight pre span.sc,
.highlight pre span.sd,
.highlight pre span.se,
.highlight pre span.sh,
.highlight pre span.si,
.highlight pre span.sr,
.highlight pre span.s1,
.highlight pre span.s2 {
    color: var(--code-string);
}

pre.code span.n,
pre.code span.na,
pre.code span.nc,
pre.code span.nd,
pre.code span.ne,
pre.code span.nf,
pre.code span.nn,
pre.code span.no,
pre.code span.nv,
.code pre span.n,
.code pre span.na,
.code pre span.nc,
.code pre span.nd,
.code pre span.ne,
.code pre span.nf,
.code pre span.nn,
.code pre span.no,
.code pre span.nv,
.highlight pre span.n,
.highlight pre span.na,
.highlight pre span.nc,
.highlight pre span.nd,
.highlight pre span.ne,
.highlight pre span.nf,
.highlight pre span.nn,
.highlight pre span.no,
.highlight pre span.nv {
    color: var(--code-name);
}

pre.code span.m,
pre.code span.mb,
pre.code span.mf,
pre.code span.mh,
pre.code span.mi,
pre.code span.mo,
.code pre span.m,
.code pre span.mb,
.code pre span.mf,
.code pre span.mh,
.code pre span.mi,
.code pre span.mo,
.highlight pre span.m,
.highlight pre span.mb,
.highlight pre span.mf,
.highlight pre span.mh,
.highlight pre span.mi,
.highlight pre span.mo {
    color: var(--code-number);
}