:root {
    color-scheme: dark;
}

html[data-blog-theme="light"] {
    color-scheme: light;
}

html[data-blog-theme="dark"] {
    color-scheme: dark;
}

.blog-theme-toggle {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 1000;
    border: 1px solid #3a0000;
    border-radius: 4px;
    background: #050000;
    color: #d00000;
    font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 8px 12px;
    cursor: pointer;
}

.blog-theme-toggle:hover {
    background: #330000;
    color: #fff;
}

html[data-blog-theme="light"] body {
    --bg: #f8fdff;
    --surface: #ffffff;
    --surface-soft: #f1f9ff;
    --surface-tint: #eaf7ff;
    --ink: #10242f;
    --muted: #55717f;
    --accent: #247da6;
    --gold: #2f6f91;
    --border: #cfe7f2;
    --shadow: rgba(31, 96, 125, .12);
    --glow-color: 145, 210, 235;
    background: var(--bg) !important;
    color: var(--ink) !important;
}

html[data-blog-theme="light"] h1,
html[data-blog-theme="light"] h2,
html[data-blog-theme="light"] h3 {
    color: var(--gold) !important;
}

html[data-blog-theme="light"] a {
    color: var(--accent) !important;
}

html[data-blog-theme="light"] a:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-blog-theme="light"] .site-nav a,
html[data-blog-theme="light"] .nav-links a {
    color: var(--gold) !important;
}

html[data-blog-theme="light"] .site-nav a:hover,
html[data-blog-theme="light"] .nav-links a:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
}

html[data-blog-theme="light"] .post-box,
html[data-blog-theme="light"] .admin-post,
html[data-blog-theme="light"] .preview-box {
    background:
        radial-gradient(ellipse at top, rgba(var(--glow-color), .18), transparent 72%),
        var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 8px 26px rgba(64, 139, 172, .12) !important;
    color: var(--ink) !important;
}

html[data-blog-theme="light"] input,
html[data-blog-theme="light"] textarea,
html[data-blog-theme="light"] select {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

html[data-blog-theme="light"] input::placeholder,
html[data-blog-theme="light"] textarea::placeholder {
    color: rgba(85, 113, 127, .72) !important;
}

html[data-blog-theme="light"] button,
html[data-blog-theme="light"] #toolbar button {
    background: var(--surface) !important;
    color: var(--gold) !important;
    border: 1px solid var(--border) !important;
}

html[data-blog-theme="light"] button:hover,
html[data-blog-theme="light"] #toolbar button:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
}

html[data-blog-theme="light"] hr {
    border-top-color: var(--border) !important;
}

html[data-blog-theme="light"] .post-date,
html[data-blog-theme="light"] small {
    color: var(--muted) !important;
}

html[data-blog-theme="light"] .post-content code {
    background: var(--surface-tint) !important;
    color: var(--accent) !important;
}

html[data-blog-theme="light"] .post-content pre {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-blog-theme="light"] .blog-theme-toggle {
    background: var(--surface) !important;
    color: var(--gold) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 26px rgba(64, 139, 172, .12) !important;
}

html[data-blog-theme="light"] .blog-theme-toggle:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

html[data-blog-theme="light"] form,
html[data-blog-theme="light"] .live-container {
    color: var(--ink) !important;
}

html[data-blog-theme="light"] ::selection {
    background: var(--accent) !important;
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .blog-theme-toggle {
        position: static;
        display: inline-flex;
        margin: 0 0 18px;
    }
}