html {
            scroll-behavior: smooth; /* Smooth scrolling for navigation links */
        }
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
        }

                /* Light Theme Colors (Default) */
        html.light {
            --color-bg-primary: #ffffff;
            --color-text-primary: #000000;
            --color-logo-text: #ffffff;
            --color-header-link-text: #000000;
            --color-hero-gradient-start: #0942c8;
            --color-hero-gradient-end: #011357;
            --color-section-bg: #ffffff;
            --color-section-alt-bg: #f8f8f8;
            --color-card-bg: #ffffff;
            --color-card-shadow: rgba(0, 0, 0, 0.1);
            --color-border: #eeeeee;
            --color-input-bg: #ffffff;
            --color-input-text: #000000;
            --color-footer-bg: #011357;
            --color-footer-text: #ffffff;
            --color-link-hover: #0942c8;
            --color-button-primary-bg: #0942c8;
            --color-button-primary-text: #ffffff;
            --color-button-primary-hover-bg: #011357;
            --color-hero-button-bg: #0942c8;
            --color-hero-button-text: #ffffff;
            --color-hero-button-hover-bg: #011357;
            --color-icon-primary: #0942c8;
            --color-theme-toggle-icon: #ffde59;
            --color-accent: #0942c8;
            --color-testimonial-bg: #ffffff;
            --color-testimonial-text: #000000;
            --color-testimonial-author: #011357;
            --color-glass-bg: rgba(255, 255, 255, 0.4);
            --color-glass-border: rgba(255, 255, 255, 0.5);
            --color-tag-bg: #eef2ff;
            --color-tag-text: #3730a3;
        }

        /* Dark Theme Colors */
        html.dark {
            --color-bg-primary: #000000;
            --color-text-primary: #ffffff;
            --color-logo-text: #ffde59;
            --color-header-link-text: #ffffff;
            --color-hero-gradient-start: #011357;
            --color-hero-gradient-end: #0942c8;
            --color-section-bg: #000000;
            --color-section-alt-bg: #111111;
            --color-card-bg: #011357;
            --color-card-shadow: rgba(255, 255, 255, 0.1);
            --color-border: #333333;
            --color-input-bg: #011357;
            --color-input-text: #ffffff;
            --color-footer-bg: #011357;
            --color-footer-text: #ffffff;
            --color-link-hover: #ffde59;
            --color-button-primary-bg: #ffde59;
            --color-button-primary-text: #011357;
            --color-button-primary-hover-bg: #ffca00;
            --color-hero-button-bg: #ffde59;
            --color-hero-button-text: #011357;
            --color-hero-button-hover-bg: #ffca00;
            --color-icon-primary: #ffde59;
            --color-theme-toggle-icon: #ffde59;
            --color-accent: #ffde59;
            --color-testimonial-bg: #011357;
            --color-testimonial-text: #ffffff;
            --color-testimonial-author: #ffde59;
            --color-glass-bg: rgba(30, 30, 30, 0.4);
            --color-glass-border: rgba(255, 255, 255, 0.1);
            --color-tag-bg: #4338ca;
            --color-tag-text: #c7d2fe;
        }

        /* Apply CSS variables */
        body {
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
        }
        .hero-section {
            background-image: url('/images/Background_light.png');
            background-size: cover;
            background-position: center;            
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 4rem;
        }
        html.dark .hero-section {
            background-image: url('/images/Background_dark.png');
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;            
            z-index: 0;
        }
        .hero-section > * {
            position: relative;
            z-index: 1;
        }

        .section-title {
            color: var(--color-text-primary);
        }
        header.scrolled {
            background-color: var(--color-bg-primary);
            box-shadow: 0 2px 4px var(--color-card-shadow);
        }

        header {
            background-color: transparent;
        }
        header .codeworks-logo {
            color: var(--color-logo-text);
        }
        header nav a {
            color: var(--color-header-link-text);
            position: relative;
            padding-bottom: 5px; /* Add some space for the underline */
            text-decoration: none; /* Ensure no default underline */
        }
        header nav a:hover{
            color: var(--color-link-hover);
        }
        header nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; /* Start with no width */
            height: 2px; /* Thickness of the underline */
            background-color: var(--color-accent);
            transition: width 0.3s ease-out;
        }
        header nav a:hover::after {
            width: 100%;
        }
        #mobile-menu a {
            color: var(--color-header-link-text);
        }
        #mobile-menu a:hover {
            color: var(--color-link-hover);
        }
        #mobile-menu {
            background-color: var(--color-card-bg);
        }
        #sobre-nosotros, #servicios, #contacto, #testimonios {
            background-color: var(--color-section-bg);
        }
        #portafolio {
            background-color: var(--color-section-alt-bg);
        }
        .card { /* Card backgrounds */
            background-color: var(--color-card-bg);
            box-shadow: 0 1px 2px 0 var(--color-card-shadow);
        }
        .testimonial-card {
            background-color: var(--color-testimonial-bg);
            color: var(--color-testimonial-text);
        }
        .testimonial-card .author-name {
            color: var(--color-testimonial-author);
        }

        footer {
            background-color: var(--color-footer-bg);
            color: var(--color-footer-text);
        }
        footer a {
            color: var(--color-footer-text);
        }
        footer a:hover {
            color: var(--color-link-hover);
        }
        input, textarea {
            background-color: var(--color-input-bg);
            color: var(--color-input-text);
            border-color: var(--color-border);
        }
        /* Contact button */
        #contacto button[type="submit"] {
            background-color: var(--color-button-primary-bg);
            color: var(--color-button-primary-text);
        }
        #contacto button[type="submit"]:hover {
            background-color: var(--color-button-primary-hover-bg);
        }        
        a.cta-button {
            background-color: var(--color-hero-button-bg);
            color: var(--color-hero-button-text);
        }
        a.cta-button:hover {
            background-color: var(--color-hero-button-hover-bg);
        }
        /* Service icons */
        #servicios svg {
            color: var(--color-icon-primary);
        }
        /* Theme toggle icon color */
        #theme-toggle:hover #sun-icon,
        #theme-toggle:focus #sun-icon {
            transform: rotate(90deg);
        }
        #theme-toggle:hover #moon-icon,
        #theme-toggle:focus #moon-icon {
            transform: rotate(40deg);
        }

        #theme-toggle svg {
            color: var(--color-theme-toggle-icon);
        }
        /* Accent color for highlights */
        .text-accent {
            color: var(--color-accent);
        }

        /* Theme-dependent visibility */
        html.light #moon-icon,
        html.light #hero-image-dark {
            display: none;
        }

        html.dark #sun-icon,
        html.dark #hero-image-light {
            display: none;
        }

        [data-animate] {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .fade-in-up {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom shadow for dark mode */
        html.dark .shadow-lg {
            box-shadow: 0 10px 15px -3px var(--color-card-shadow), 0 4px 6px -2px var(--color-card-shadow);
        }

        .glass-container {
          background: var(--color-glass-bg);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px); /* For Safari */
          border: 1px solid var(--color-glass-border);
        }

        .tech-tag {
            background-color: var(--color-tag-bg);
            color: var(--color-tag-text);
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            padding: 0.25rem 0.75rem; /* px-3 py-1 */
            border-radius: 9999px; /* rounded-full */
        }

        .social-icon i {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }

        .social-icon:hover i {
            transform: scale(1.1);
        }