/* ======================
   Dark Mode Theme
   ====================== */

body.dark-mode {
    /* Dark Mode Colors */
    --primary-color: #60a5fa;
    --secondary-color: #a78bfa;
    --accent-color: #22d3ee;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --border-color: #334155;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Smooth transition for theme changes */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme-specific adjustments */
body.dark-mode .research-status.current {
    background-color: #1e3a8a;
    color: #93c5fd;
}

body.dark-mode .research-status.completed {
    background-color: #064e3b;
    color: #6ee7b7;
}

body.dark-mode .tag {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

body.dark-mode .filter-btn:not(.active),
body.dark-mode .gallery-tab:not(.active) {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Code blocks styling for dark mode */
body.dark-mode pre {
    background-color: #1e293b;
    border: 1px solid #334155;
}

body.dark-mode code {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Syntax highlighting base colors for dark mode */
body.dark-mode .token.comment {
    color: #64748b;
}

body.dark-mode .token.keyword {
    color: #c792ea;
}

body.dark-mode .token.string {
    color: #c3e88d;
}

body.dark-mode .token.function {
    color: #82aaff;
}

body.dark-mode .token.number {
    color: #f78c6c;
}