/* Theme variables */
:root {
    --bg-color: #fdfdfd;
    --text-color: #111;
    --link-color: #2a7ae2;
    --border-color: #e8e8e8;
    --card-bg: #fff;
    --header-bg: #fff;
    --blockquote-color: #828282;
    --code-bg: #eef;
    --syntax-bg: #eef;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e6e6e6;
    --link-color: #58a6ff;
    --border-color: #404040;
    --card-bg: #2d2d2d;
    --header-bg: #2d2d2d;
    --blockquote-color: #9e9e9e;
    --code-bg: #2d2d2d;
    --syntax-bg: #282c34;
}

/* Dark theme overrides */
[data-theme="dark"] {
    body {
        color: var(--text-color);
        background-color: var(--bg-color);
    }

    .site-header {
        background-color: var(--header-bg);
        border-bottom-color: var(--border-color);
    }

    .site-title, 
    .site-title:visited,
    .site-nav .page-link {
        color: var(--text-color);
    }

    .post-content,
    .post-list {
        color: var(--text-color);
    }

    .post-meta {
        color: var(--blockquote-color);
    }

    .site-footer {
        border-top: 1px solid var(--border-color);
        background-color: var(--header-bg);
    }

    .footer-col-wrapper {
        color: var(--text-color);
    }

    a {
        color: var(--link-color);
    }

    a:visited {
        color: var(--link-color);
    }

    pre, 
    code {
        background-color: var(--code-bg);
        border-color: var(--border-color);
    }

    blockquote {
        color: var(--blockquote-color);
        border-left-color: var(--border-color);
    }

    table {
        color: var(--text-color);
    }

    table th {
        background-color: var(--card-bg);
    }

    table tr:nth-child(even) {
        background-color: var(--card-bg);
    }

    .highlight {
        background-color: var(--syntax-bg);
    }

    .highlighter-rouge .highlight {
        background-color: var(--syntax-bg);
    }
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.2rem;
    margin-left: 1rem;
    vertical-align: middle;
}

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

/* Mobile menu fixes */
@media screen and (max-width: 600px) {
    [data-theme="dark"] .site-nav {
        background-color: var(--header-bg);
        border-color: var(--border-color);
    }

    [data-theme="dark"] .site-nav .menu-icon > svg path {
        fill: var(--text-color);
    }
}