/* Theme Variables */
:root {
    --bg-primary: #0a0b14;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --accent: #3B0764;
    --accent-light: #5B21B6;
    --sparkle-color: rgba(168, 85, 247, 0.9);
}

html[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent: #5B21B6;
    --accent-light: #7C3AED;
    --sparkle-color: rgba(91, 33, 182, 0.8);
}

/* Apply theme to all elements */
html[data-theme="light"] body {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .navbar {
    background: #ffffff !important;
    border-bottom-color: #e5e5e5 !important;
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .logo-text {
    color: #000000 !important;
}

html[data-theme="light"] .mobile-menu-toggle span {
    background: #000000 !important;
}

html[data-theme="light"] .nav-menu.active {
    background: rgba(255, 255, 255, 0.98) !important;
    border-left-color: rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="light"] .nav-menu .nav-link {
    color: #000000 !important;
}

html[data-theme="light"] .mobile-menu-close {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #000000 !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="light"] .mobile-menu-close:hover {
    background: rgba(124, 58, 237, 0.1) !important;
}

html[data-theme="light"] .cta-btn,
html[data-theme="light"] .btn-primary {
    background: #5B21B6 !important;
    color: white !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline {
    background: #ffffff !important;
    color: #5B21B6 !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .hero-badge {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .badge-dot {
    background: #7C3AED !important;
}

html[data-theme="light"] .hero-badge span:last-child {
    color: #5B21B6 !important;
}

html[data-theme="light"] .feature-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .capability-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .contact-form-section,
html[data-theme="light"] .contact-info,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .legal-body,
html[data-theme="light"] .post-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .team-card {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #000000 !important;
}

html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .product-card h3,
html[data-theme="light"] .capability-card h3,
html[data-theme="light"] .blog-card h3,
html[data-theme="light"] .contact-info h3,
html[data-theme="light"] .faq-item h3,
html[data-theme="light"] .legal-section h2,
html[data-theme="light"] .legal-section h3,
html[data-theme="light"] .post-title,
html[data-theme="light"] .related-card h3,
html[data-theme="light"] .team-name {
    color: #000000 !important;
}

html[data-theme="light"] .feature-card p,
html[data-theme="light"] .product-card p,
html[data-theme="light"] .capability-card p,
html[data-theme="light"] .blog-card p,
html[data-theme="light"] .contact-info p,
html[data-theme="light"] .faq-item p,
html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li,
html[data-theme="light"] .post-excerpt,
html[data-theme="light"] .related-card p {
    color: #333333 !important;
}

html[data-theme="light"] .section-title {
    color: #000000 !important;
}

html[data-theme="light"] .section-subtitle {
    color: #333333 !important;
}

html[data-theme="light"] .hero-subtitle {
    color: #333333 !important;
}

html[data-theme="light"] .hero-title {
    color: #000000 !important;
}

html[data-theme="light"] .stat-label {
    color: #333333 !important;
}

html[data-theme="light"] .blog-link,
html[data-theme="light"] .post-link,
html[data-theme="light"] .related-link {
    color: #5B21B6 !important;
}

html[data-theme="light"] .blog-link:hover,
html[data-theme="light"] .post-link:hover,
html[data-theme="light"] .related-link:hover {
    color: #3B0764 !important;
}

html[data-theme="light"] .blog-excerpt {
    color: #333333 !important;
}

html[data-theme="light"] .blog-title {
    color: #000000 !important;
}

html[data-theme="light"] .product-description,
html[data-theme="light"] .highlight-item {
    color: #333333 !important;
}

html[data-theme="light"] .product-title {
    color: #000000 !important;
}

html[data-theme="light"] .feature {
    background: rgba(91, 33, 182, 0.1) !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .team-bio {
    color: #333333 !important;
}

html[data-theme="light"] .about-description {
    color: #333333 !important;
}

html[data-theme="light"] .footer {
    background: #ffffff !important;
    border-top-color: #d0d0d0 !important;
}

html[data-theme="light"] .footer-column h4,
html[data-theme="light"] .footer-description {
    color: #000000 !important;
}

html[data-theme="light"] .footer-column a {
    color: #333333 !important;
}

html[data-theme="light"] .footer-column a:hover {
    color: #5B21B6 !important;
}

html[data-theme="light"] .article-title {
    color: #000000 !important;
}

html[data-theme="light"] .article-subtitle,
html[data-theme="light"] .content-section h2,
html[data-theme="light"] .content-section p,
html[data-theme="light"] .content-section li {
    color: #333333 !important;
}

html[data-theme="light"] .tech-item {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #000000 !important;
}

html[data-theme="light"] .tech-item:hover {
    border-color: #b0b0b0 !important;
    background: #f5f5f5 !important;
}

html[data-theme="light"] .page-title {
    color: #000000 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

html[data-theme="light"] .legal-date {
    color: #333333 !important;
}

html[data-theme="light"] .blog-hero,
html[data-theme="light"] .contact-hero,
html[data-theme="light"] .article-header {
    background: #ffffff !important;
}

html[data-theme="light"] .featured-article {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .featured-title {
    color: #000000 !important;
}

html[data-theme="light"] .featured-excerpt {
    color: #333333 !important;
}

html[data-theme="light"] .newsletter-content {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .newsletter-text h2,
html[data-theme="light"] .newsletter-text p {
    color: #000000 !important;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #000000 !important;
}

html[data-theme="light"] .form-group label {
    color: #000000 !important;
}

html[data-theme="light"] .back-link {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .back-link:hover {
    background: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
}

html[data-theme="light"] .article-category,
html[data-theme="light"] .blog-category,
html[data-theme="light"] .post-category,
html[data-theme="light"] .featured-category,
html[data-theme="light"] .related-category {
    background: #ffffff !important;
    color: #5B21B6 !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .tag {
    background: #ffffff !important;
    color: #5B21B6 !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .featured-label {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .featured-link {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .featured-link:hover {
    background: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
}

html[data-theme="light"] .filter-btn {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #333333 !important;
}

html[data-theme="light"] .filter-btn:hover {
    background: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .filter-btn.active {
    background: #5B21B6 !important;
    border-color: #5B21B6 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .highlight-box {
    background: #ffffff !important;
    border-left-color: #5B21B6 !important;
}

html[data-theme="light"] .highlight-box p {
    color: #333333 !important;
}

html[data-theme="light"] .stat-box {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .quote-section blockquote {
    background: #ffffff !important;
    border-left-color: #5B21B6 !important;
    color: #000000 !important;
}

html[data-theme="light"] .quote-section cite {
    color: #5B21B6 !important;
}

html[data-theme="light"] .article-cta {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .article-cta h3 {
    color: #000000 !important;
}

html[data-theme="light"] .article-cta p {
    color: #333333 !important;
}

html[data-theme="light"] .method-icon {
    background: #ffffff !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .method-info h4 {
    color: #000000 !important;
}

html[data-theme="light"] .method-info p {
    color: #333333 !important;
}

html[data-theme="light"] .contact-cta {
    background: #ffffff !important;
}

html[data-theme="light"] .contact-cta h4 {
    color: #000000 !important;
}

html[data-theme="light"] .contact-cta p {
    color: #333333 !important;
}

html[data-theme="light"] .legal-section {
    border-bottom-color: #d0d0d0 !important;
}

html[data-theme="light"] .legal-section h2 {
    border-bottom-color: #d0d0d0 !important;
}

html[data-theme="light"] .featured-placeholder {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
}

html[data-theme="light"] .placeholder-text {
    color: #5B21B6 !important;
}

html[data-theme="light"] .post-image {
    background: #ffffff !important;
    border-bottom-color: #d0d0d0 !important;
}

html[data-theme="light"] .post-placeholder {
    background: #ffffff !important;
}

html[data-theme="light"] .page-subtitle {
    color: #333333 !important;
}

html[data-theme="light"] .form-header h2 {
    color: #000000 !important;
}

html[data-theme="light"] .form-header p {
    color: #333333 !important;
}

html[data-theme="light"] .faq-section {
    background: #ffffff !important;
}

html[data-theme="light"] .mission-section {
    background: #ffffff !important;
}

html[data-theme="light"] .mission-text {
    color: #333333 !important;
}

html[data-theme="light"] .blog-preview {
    background: #ffffff !important;
}

html[data-theme="light"] .capabilities {
    background: #ffffff !important;
}

html[data-theme="light"] .products {
    background: #ffffff !important;
}

html[data-theme="light"] .features-section {
    background: #ffffff !important;
}

html[data-theme="light"] .about {
    background: #ffffff !important;
}

html[data-theme="light"] .team-section {
    background: #ffffff !important;
}

html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-outline:hover {
    background: #5B21B6 !important;
    color: #ffffff !important;
    border-color: #5B21B6 !important;
}

html[data-theme="light"] .team-role {
    color: #5B21B6 !important;
}

html[data-theme="light"] .team-link {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    color: #5B21B6 !important;
}

html[data-theme="light"] .team-link:hover {
    background: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
}

/* About Section Button Hover */
.about-buttons .btn-primary:hover,
.about-buttons .btn-secondary:hover {
    background: var(--accent) !important;
    color: white !important;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    bottom: 4rem;
    right: 2rem;
    width: 36px;
    height: 36px;
    background: rgba(17, 24, 39, 0.8);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.1rem;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    #theme-toggle {
        display: flex;
        border: 2px solid #A855F7;
    }
    
    #theme-toggle:hover {
        border-color: #7C3AED;
    }
}

#theme-toggle:hover {
    background: rgba(17, 24, 39, 0.95);
    border-color: #7C3AED;
    transform: scale(1.05);
}

html[data-theme="light"] #theme-toggle {
    background: #ffffff !important;
    color: #000000 !important;
}

@media (min-width: 769px) {
    html[data-theme="light"] #theme-toggle {
        border: 2px solid #A855F7 !important;
    }
    
    html[data-theme="light"] #theme-toggle:hover {
        border-color: #7C3AED !important;
    }
}

/* Faded Sparkles */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--sparkle-color), transparent);
    border-radius: 50%;
    filter: blur(1px);
    animation: sparkleFloat 3s infinite ease-in-out;
}

@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.3);
        filter: blur(2px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-30px) translateX(15px) scale(1);
        filter: blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) translateX(30px) scale(0.3);
        filter: blur(2px);
    }
}