document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    
    // Only run if the button actually exists on the page (Zero-Breakage principle!)
    if (themeToggleBtn) {
        themeToggleBtn.addEventListener('click', function() {
            
            // Add transition classes dynamically to the body ONLY on click to prevent page-load FOUC
            document.body.classList.add('transition-colors', 'duration-300');
            
            // Toggle the 'dark' class on the html element
            document.documentElement.classList.toggle('dark');
            
            // Save the user's preference to local storage
            if (document.documentElement.classList.contains('dark')) {
                localStorage.setItem('theme', 'dark');
            } else {
                localStorage.setItem('theme', 'light');
            }
        });
    }
});