/* Blog-specific theme */
/* dark mode colors */
.blog-theme {
    --blog-bg-color: #000000;
    --blog-text-color: #ffffff;
    --blog-accent-color: #8a8aff;
    --blog-secondary-accent: #6b65ff;
    --blog-heading-color: #a06be0;
    --blog-code-bg: #1a1a1a;
}
/* light mode colors */
:root.light-theme .blog-theme {
    --blog-bg-color: #ffffff;
    --blog-text-color: #000000;
    --blog-accent-color: #4b4bff;
    --blog-secondary-accent: #3f3aa7;
    --blog-heading-color: #6b3c99;
    --blog-code-bg: #f5f5f5;
}

.blog-content {
    font-family: var(--font-mono);
    line-height: 1.8;
    color: var(--blog-text-color);
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.blog-content h1,
.blog-content h2,
.blog-content h3 {
    color: var(--blog-heading-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-content code {
    background: var(--blog-code-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    color: var(--blog-accent-color);
}

.blog-content pre {
    background: var(--blog-code-bg);
    padding: 1.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.blog-content a {
    color: var(--blog-accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.blog-content a:hover {
    border-bottom-color: var(--blog-accent-color);
}

.blog-content strong {
    color: var(--blog-accent-color); /* or any color you want */
    font-weight: 600;
}