/* --- CSS Variables for Theming and Fonts --- */
        :root {
            /* Fonts */
            --font-inter: 'Inter', sans-serif;
            --font-poppins: 'Poppins', sans-serif;
            --font-montserrat: 'Montserrat', sans-serif;

            /* Light Mode (Default) */
            --bg-primary-light: #ffffff;
            --bg-secondary-light: #f3f4f6; /* gray-100 */
            --text-primary-light: #1f2937; /* gray-800 */
            --text-secondary-light: #4b5563; /* gray-600 */
            --accent-start-light: #3F51B5; /* Requested */
            --accent-end-light: #00BCD4;   /* Requested */
            --hero-text-light: #ffffff;
        }

        .dark {
            /* Dark Mode */
            --bg-primary-light: #111827;   /* gray-900 */
            --bg-secondary-light: #1f2937; /* gray-800 */
            --text-primary-light: #f9fafb;   /* gray-50 */
            --text-secondary-light: #d1d5db; /* gray-300 */
            --accent-start-light: #374151; /* gray-700 */
            --accent-end-light: #1f2937; /* gray-800 */
            --hero-text-light: #ffffff;
        }

        /* --- Base Body Styles --- */
        body {
            font-family: var(--font-inter);
            background-color: var(--bg-primary-light);
            color: var(--text-primary-light);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* --- Custom Font Classes --- */
        .font-poppins { 
            font-family: var(--font-poppins); 
        }
        .font-montserrat { 
            font-family: var(--font-montserrat); 
        }

        /* --- Custom Gradients & Backgrounds --- */
        .bg-gradient-hero {
            background: linear-gradient(135deg, var(--accent-start-light), var(--accent-end-light));
            color: var(--hero-text-light);
        }
        .bg-primary {
            background-color: var(--bg-primary-light);
        }
        .bg-secondary {
            background-color: var(--bg-secondary-light);
        }
        .text-primary {
            color: var(--text-primary-light);
        }
        .text-secondary {
            color: var(--text-secondary-light);
        }
        .text-accent {
            color: var(--accent-end-light);
        }
        .border-accent {
            border-color: var(--accent-end-light);
        }
        .fill-accent {
            fill: var(--accent-end-light);
        }
        .ring-accent:focus {
            --tw-ring-color: var(--accent-end-light);
        }

        /* --- Scroll Animation Classes --- */
        /* We set the initial state (hidden) with 'fade-in-up'
          JS adds 'is-visible' when it enters the viewport to trigger the transition
        */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Staggered delays */
        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
        .delay-500 { transition-delay: 0.5s; }


        /* --- Portfolio Slider --- */
        .slider-item {
            display: none; /* Hidden by default */
        }
        .slider-item.active {
            display: block; /* Shown by JS */
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0.4; }
            to { opacity: 1; }
        }

        /* --- Portfolio Grid "Load More" --- */
        .portfolio-item.hidden {
            display: none;
        }
        /* Ensure blog page and modal are on top */
        #blog-page { z-index: 60; }
        #blog-post-modal { z-index: 70; }
        #project-modal { z-index: 50; } /* Ensure portfolio modal is below blog */