html {
    scroll-behavior: smooth;
}

/* Dark Theme */
body.theme-dark {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-color: #bb86fc;
    --link-hover: #d1b3ff;
    --border-color: #333333;
    --code-bg: #2c2c2c;
}

/* Midnight Theme */
body.theme-midnight {
    --bg-color: #0f172a; /* slate-900 */
    --card-bg: #1e293b; /* slate-800 */
    --text-primary: #f1f5f9; /* slate-100 */
    --text-secondary: #94a3b8; /* slate-400 */
    --accent-color: #7dd3fc; /* sky-300 */
    --link-hover: #bae6fd; /* sky-200 */
    --border-color: #334155; /* slate-700 */
    --code-bg: #334155; /* slate-700 */
}

/* Dracula Theme */
body.theme-dracula {
    --bg-color: #282a36;
    --card-bg: #44475a;
    --text-primary: #f8f8f2;
    --text-secondary: #bd93f9;
    --accent-color: #50fa7b;
    --link-hover: #8be9fd;
    --border-color: #6272a4;
    --code-bg: #44475a;
}

/* Nord Theme */
body.theme-nord {
    --bg-color: #2e3440;
    --card-bg: #3b4252;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --accent-color: #88c0d0;
    --link-hover: #81a1c1;
    --border-color: #4c566a;
    --code-bg: #434c5e;
}


/* Make sure links in dark themes use the accent color */
body.theme-dark a,
body.theme-midnight a,
body.theme-dracula a,
body.theme-nord a {
    color: var(--accent-color);
}

body.theme-dark a:hover,
body.theme-midnight a:hover,
body.theme-dracula a:hover,
body.theme-nord a:hover {
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
}

/* Common Post Tags Defensive Wrap */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.post-tags a, .tag {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Adjust pagination active state for dark themes */
body.theme-dark .pagination li.active a,
body.theme-midnight .pagination li.active a,
body.theme-dracula .pagination li.active a,
body.theme-nord .pagination li.active a {
    color: #121212; /* Dark text on light active background */
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}