/* ============================================================
   Dark Mode Theme — applied when html[data-theme="dark"]
   ============================================================ */

/* Smooth transitions on theme switch */
body,
nav.main-nav,
code,
pre code,
#toc,
tr:nth-child(odd) > td {
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}

/* HTML & Body */
html[data-theme="dark"],
[data-theme="dark"] body {
    background-color: #18181b;
    color: #a1a1aa;
}

/* Navigation */
[data-theme="dark"] nav.main-nav {
    background: #18181b;
    background: rgba(24, 24, 27, 0.95);
}

@media (max-width: 700px) {
    [data-theme="dark"] nav.main-nav {
        background: #18181b;
        background: rgba(24, 24, 27, 0.95);
    }
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] .home h1,
[data-theme="dark"] .profile h1,
[data-theme="dark"] .post h1 {
    color: #e4e4e7;
}

[data-theme="dark"] h2,
[data-theme="dark"] .home h2,
[data-theme="dark"] .profile h2,
[data-theme="dark"] #post-list h2 {
    color: #71717a;
}

[data-theme="dark"] .post h2 {
    color: #e4e4e7;
}

[data-theme="dark"] .post h2.headline,
[data-theme="dark"] .post h2.headline .tags {
    color: #71717a;
}

[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
    color: #d4d4d8;
}

[data-theme="dark"] h6 {
    color: #a1a1aa;
}

[data-theme="dark"] b,
[data-theme="dark"] strong {
    color: #e4e4e7;
}

/* Post list */
[data-theme="dark"] #post-list a {
    color: #d4d4d8;
}

[data-theme="dark"] #post-list .dates {
    color: #71717a;
}

[data-theme="dark"] #post-list-footer {
    border-top-color: #3f3f46;
}

/* Archive */
[data-theme="dark"] h2.month {
    color: #a1a1aa;
    border-bottom-color: #3f3f46;
}

[data-theme="dark"] #archive-list a {
    color: #d4d4d8;
}

[data-theme="dark"] #archive-list .dates {
    color: #71717a;
}

[data-theme="dark"] #archive-link {
    box-shadow: 0 0 0 1px #3f3f46;
}

[data-theme="dark"] .archive .post-time {
    color: #71717a;
}

[data-theme="dark"] .archive .post-link {
    color: #a1a1aa;
}

/* Description */
[data-theme="dark"] .description {
    color: #71717a;
}

/* Separators */
[data-theme="dark"] blockquote {
    border-left-color: #3f3f46;
}

[data-theme="dark"] hr {
    background: #3f3f46;
}

/* Tables */
[data-theme="dark"] tr > td {
    border-top-color: #3f3f46;
}

[data-theme="dark"] tr:nth-child(odd) > td {
    background: #27272a;
}

[data-theme="dark"] thead th,
[data-theme="dark"] th {
    color: #a1a1aa;
    border-bottom-color: #3f3f46;
}

/* Post meta */
[data-theme="dark"] #post-meta {
    color: #a1a1aa;
    border-top-color: #3f3f46;
    border-bottom-color: #3f3f46;
}

[data-theme="dark"] #post-meta div span {
    color: #71717a;
}

[data-theme="dark"] #post-meta div span.dark {
    color: #e4e4e7;
}

[data-theme="dark"] #post-meta img.avatar {
    box-shadow: 0 0 0 3px #18181b, 0 0 0 4px #3f3f46;
}

/* Code blocks */
[data-theme="dark"] code {
    background: #27272a;
    box-shadow: inset 0 0 0 1px #3f3f46;
    color: #a1a1aa;
}

[data-theme="dark"] pre code {
    background: #27272a;
    box-shadow: inset 0 0 0 1px #3f3f46;
    color: #a1a1aa;
}

/* Table of contents */
[data-theme="dark"] #toc {
    background: #27272a;
    box-shadow: inset 0 0 0 1px #3f3f46;
    color: #a1a1aa;
}

[data-theme="dark"] #TableOfContents a code {
    background-color: #27272a;
}

/* Sharing icons */
[data-theme="dark"] #sharing a {
    color: #52525b;
}

/* Social icons */
[data-theme="dark"] a.symbol {
    color: #52525b;
}

[data-theme="dark"] a.symbol:hover {
    color: #71717a;
}

/* Tags page */
[data-theme="dark"] .page-tags .tags a {
    color: #a1a1aa;
}

/* Small/footer text */
[data-theme="dark"] p.small {
    color: #71717a;
}

/* ============================================================
   Theme toggle button
   ============================================================ */

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    color: #5badf0;
    font-size: 16px;
    line-height: 1.35;
    border-radius: 3px;
    vertical-align: middle;
    font-family: inherit;
    display: inline-block;
}

#theme-toggle:hover {
    opacity: 0.8;
}

/* Icon reflects the mode you'll switch TO when clicked */
#theme-toggle::before {
    content: "🌙";
}

[data-theme="dark"] #theme-toggle::before {
    content: "☀️";
}