/* ================= DARK MODE VARIABLES ================= */
body.dark {
    --bg-main: #0f172a;
    --bg-soft: #111827;
    --bg-card: #1e293b;
    --bg-card-inner: #353f51;
    --text-main: #e5e7eb;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
}

body.dark {
    background: var(--bg-main);
    color: var(--text-main);
}

a {
    color: #333;
}
    body.dark a {
        color: var(--text-main);
    }

    /*========== Header + Navigation ==========*/

    body.dark .site-header {
        background: linear-gradient(43deg, #0f172a, #1e293b);
        border-bottom: 1px solid var(--border-color);
    }

    body.dark .logo a {
        color: var(--text-main);
    }

    body.dark .logo i {
        color: var(--primary);
    }

    body.dark .main-nav a {
        color: var(--text-muted);
    }

        body.dark .main-nav a:hover,
        body.dark .main-nav a.active {
            color: var(--primary);
        }

        body.dark .main-nav a::after {
            background-color: var(--primary);
        }

    /*========== Mobile Menu ==========*/

    body.dark .mobile-menu {
        background: var(--bg-main);
    }

    body.dark .mobile-menu-header {
        border-bottom: 1px solid var(--border-color);
    }

    body.dark .mobile-nav a {
        color: var(--text-main);
    }

    body.dark .mobile-toggle span {
        background: var(--text-main);
    }

    body.dark .menu-overlay {
        background: rgba(0,0,0,.7);
    }

    /*========== Hero Section ==========*/
    body.dark .hero-section {
        background: linear-gradient(135deg, #020617, #1e3a8a);
    }

    body.dark .hero-title {
        color: white;
    }

    body.dark .hero-subtitle {
        color: #cbd5f5;
    }

    body.dark .hero-title .highlight {
        color: #fde047;
    }



    /*========== Buttons ==========*/
    body.dark .btn-primary {
        /*background: linear-gradient(to right, var(--primary) 50%, var(--primary-hover) 50%);*/
        /*outline-color: rgba(255,255,255,.15);*/
        background: linear-gradient(to right, #2563eb 50%, #1d4ed8 50%);
        background-size: 200% 100%;
        background-position: right bottom;
    }

        body.dark .btn-primary:hover {
            background-position: left bottom;
            color: #fff;
        }

body.dark .btn-outline {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

    body.dark .btn-outline:hover {
        background: rgba(59,130,246,.15);
    }

/*========== Main Content + Sidebars ==========*/
body.dark .main-content {
    background: var(--bg-main);
}

body.dark .sidebar-widget {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: none;
}

    body.dark .sidebar-widget .sidebar-widget {
        background: var(--bg-card-inner);
    }

    body.dark .sidebar-widget h3 {
        color: var(--text-main);
    }

body.dark .category-list a {
    color: var(--text-muted);
}

    body.dark .category-list a:hover {
        color: var(--primary);
    }


/*========== Articles & Cards ==========*/
body.dark .article-item {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: none;
}

    body.dark .article-item h4 a {
        color: var(--text-main);
    }

        body.dark .article-item h4 a:hover {
            color: var(--primary);
        }

body.dark .article-meta {
    color: var(--text-muted);
}

/*========== Services ==========*/
body.dark .services-section {
    background: var(--bg-main);
}

body.dark .product-card {
    background: var(--bg-card);
    color: var(--text-main);
}

body.dark .service-icon {
    color: var(--primary);
}

/*========== Slider ==========*/
body.dark .intro-slider {
    background: var(--bg-main);
}

body.dark .slider-wrapper {
    background: var(--bg-soft);
}

body.dark .slide h3 {
    color: var(--text-main);
}

body.dark .slide p {
    color: var(--text-muted);
}

body.dark .slider-btn {
    background: var(--primary);
}

body.dark .slider-dots .dot {
    background: var(--border-color);
}

    body.dark .slider-dots .dot.active {
        background: var(--primary);
    }


/*========== Footer ==========*/
body.dark .site-footer {
    background: #020617;
    color: var(--text-muted);
}

body.dark .footer-col h4 {
    color: white;
}

body.dark .footer-links a:hover {
    color: var(--primary);
}

body.dark .footer-bottom {
    border-top-color: var(--border-color);
}