/* ===== DARK MODE STYLES (CONDITIONAL) ===== */

/* Dark Mode Variables - Available globally */
:root {
    /* Dark Mode Colors */
    --dark-bg-primary: #0a0a0a;
    --dark-bg-secondary: #1a1a2e;
    --dark-bg-card: #16213e;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #ffffff;
    --dark-accent-blue: #4f46e5;
    --dark-accent-purple: #8b5cf6;
    --dark-border: #374151;
    --dark-glow-blue: 0 0 20px rgba(79, 70, 229, 0.5);
    --dark-glow-purple: 0 0 20px rgba(139, 92, 246, 0.5);
    --dark-shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --dark-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --dark-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --dark-shadow-enterprise: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* All dark mode styles - only apply when data-theme="dark" */
[data-theme="dark"] body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

[data-theme="dark"] {

    /* Navigation dark mode */
    .navbar {
        background: linear-gradient(180deg, var(--dark-bg-primary) 0%, rgba(10, 10, 10, 0.95) 100%);
        border-bottom: 1px solid rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-medium), 0 1px 0 rgba(79, 70, 229, 0.2);
    }

    .nav-brand h2 {
        color: var(--dark-text-primary);
        text-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
    }

    .nav-link {
        color: rgba(255, 255, 255, 0.7);
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--dark-text-primary);
        background-color: rgba(79, 70, 229, 0.2);
        box-shadow: var(--dark-glow-blue);
    }

    .nav-link.active::after {
        background: linear-gradient(90deg, var(--dark-accent-blue), var(--dark-accent-purple));
        box-shadow: var(--dark-glow-blue);
    }

    .nav-quiz-btn {
        background: linear-gradient(135deg, var(--dark-accent-purple) 0%, var(--dark-accent-blue) 100%);
        border-color: var(--dark-accent-purple);
        box-shadow: var(--dark-glow-purple);
    }

    .nav-quiz-btn:hover {
        background: linear-gradient(135deg, var(--dark-accent-blue) 0%, var(--dark-accent-purple) 100%);
        box-shadow: var(--dark-shadow-medium), var(--dark-glow-blue);
    }

    /* Dark mode mobile navigation */
    .nav-menu {
        background: linear-gradient(180deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%);
        border-top: 1px solid rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-large);
    }

    .nav-actions {
        background: transparent;
    }

    .nav-toggle span {
        background-color: var(--dark-text-primary);
    }

    /* Hero section dark mode */
    .hero {
        background: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-card) 100%);
    }

    .hero::before {
        background: radial-gradient(ellipse at top, rgba(79, 70, 229, 0.15) 0%, transparent 50%);
    }

    .hero-title {
        color: var(--dark-text-primary);
        text-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    }

    .hero-subtitle {
        color: var(--dark-text-primary);
    }

    .hero-guarantee {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }

    .hero-guarantee .guarantee-text {
        color: var(--dark-text-primary);
    }

    /* AI Graphics dark mode enhancements */
    .node {
        background: linear-gradient(135deg, var(--dark-accent-blue), var(--dark-accent-purple));
        box-shadow: var(--dark-shadow-medium), var(--dark-glow-blue);
    }

    .node:hover {
        box-shadow: var(--dark-shadow-large), var(--dark-glow-purple);
    }

    .floating-shape {
        background: linear-gradient(135deg, var(--dark-accent-blue), var(--dark-accent-purple));
        box-shadow: var(--dark-glow-blue);
    }

    .connection-line {
        filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.8));
    }

    /* Buttons dark mode */
    .btn-primary {
        background: var(--gradient-primary);
        border-color: var(--dark-accent-blue);
        box-shadow: var(--dark-glow-blue);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--dark-accent-purple) 0%, var(--dark-accent-blue) 100%);
        box-shadow: var(--dark-shadow-enterprise), var(--dark-glow-purple);
    }

    .btn-secondary {
        color: var(--dark-text-secondary);
        border-color: var(--dark-accent-blue);
        background: rgba(79, 70, 229, 0.1);
    }

    .btn-secondary:hover {
        background: var(--gradient-primary);
        color: var(--dark-text-primary);
        box-shadow: var(--dark-glow-blue);
    }

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

    .btn-outline:hover {
        background: rgba(79, 70, 229, 0.2);
        border-color: var(--dark-accent-blue);
        color: var(--dark-accent-blue);
        box-shadow: var(--dark-glow-blue);
    }

    /* Sections dark mode */
    .specializations {
        background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, rgba(26, 26, 46, 0.8) 50%, var(--dark-bg-secondary) 100%);
    }

    .specializations::before {
        background: linear-gradient(45deg, transparent 30%, rgba(79, 70, 229, 0.08) 50%, transparent 70%);
    }

    .specialization-card {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.8) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }

    .specialization-card:hover {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(79, 70, 229, 0.1) 100%);
        box-shadow: var(--dark-shadow-enterprise), var(--dark-glow-blue);
    }

    .specialization-card h4 {
        color: var(--dark-text-primary);
    }

    .card-description p {
        color: var(--dark-text-secondary);
    }

    .column-header h3 {
        color: var(--dark-text-primary);
    }

    .column-subtitle {
        color: var(--dark-text-secondary);
    }

    .column-header {
        border-bottom-color: var(--dark-accent-blue);
    }

    .column-header::after {
        background: var(--gradient-primary);
    }

    /* Services section dark mode */
    .services-preview {
        background-color: var(--dark-bg-secondary);
    }

    .service-card {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.9) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }

    .service-card:hover {
        box-shadow: var(--dark-shadow-large), var(--dark-glow-blue);
        transform: translateY(-5px);
    }

    .service-card.featured {
        border-color: var(--dark-accent-purple);
        box-shadow: var(--dark-shadow-medium), var(--dark-glow-purple);
    }

    .service-header h3 {
        color: var(--dark-text-primary);
    }

    .service-price {
        color: var(--dark-accent-blue);
        text-shadow: var(--dark-glow-blue);
    }

    .service-duration {
        color: var(--dark-text-secondary);
    }

    .service-description {
        color: var(--dark-text-secondary);
    }

    .service-features li {
        color: var(--dark-text-secondary);
    }

    .service-features li::before {
        color: var(--dark-accent-blue);
    }

    .service-badge {
        background: linear-gradient(135deg, var(--dark-accent-purple) 0%, var(--dark-accent-blue) 100%);
        color: var(--dark-text-primary);
    }

    /* Value proposition and stats dark mode */
    .value-proposition {
        background-color: var(--dark-bg-primary);
    }

    .value-item {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.8) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }

    .value-item:hover {
        box-shadow: var(--dark-shadow-enterprise), var(--dark-glow-blue);
        transform: translateY(-5px);
    }

    .value-item h3 {
        color: var(--dark-text-primary);
    }

    .icon-badge {
        background: var(--gradient-primary);
        box-shadow: var(--dark-glow-blue);
    }

    .stat-item {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.8) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }

    .stat-item:hover {
        box-shadow: var(--dark-shadow-enterprise), var(--dark-glow-blue);
        transform: translateY(-5px);
    }

    .stat-number {
        color: var(--dark-accent-blue);
        text-shadow: var(--dark-glow-blue);
    }

    .stat-label {
        color: var(--dark-text-secondary);
    }

    .circle {
        stroke: var(--dark-accent-blue);
        filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.5));
    }

    .circle-bg {
        stroke: var(--dark-border);
    }

    /* Social proof dark mode */
    .social-proof {
        background-color: var(--dark-bg-primary);
    }

    .client-logo {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.8) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }

    .testimonial blockquote {
        color: var(--dark-text-primary);
    }

    .testimonial-author strong {
        color: var(--dark-text-primary);
    }

    .testimonial-author span {
        color: var(--dark-text-secondary);
    }

    /* About preview dark mode */
    .about-preview {
        background-color: var(--dark-bg-secondary);
    }

    .about-text h2 {
        color: var(--dark-text-primary);
    }

    .about-text p {
        color: var(--dark-text-secondary);
    }

    /* CTA section dark mode */
    .cta-section {
        background: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-card) 100%);
    }

    .cta-section::before {
        background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
    }

    .cta-content h2 {
        color: var(--dark-text-primary);
        text-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    }

    .cta-content p {
        color: var(--dark-text-secondary);
    }

    .cta-section .btn-primary {
        background: linear-gradient(135deg, var(--dark-accent-blue) 0%, var(--dark-accent-purple) 100%);
        border-color: var(--dark-accent-blue);
        box-shadow: var(--dark-shadow-medium), var(--dark-glow-blue);
    }

    .cta-section .btn-primary:hover {
        background: linear-gradient(135deg, var(--dark-accent-purple) 0%, var(--dark-accent-blue) 100%);
        box-shadow: var(--dark-shadow-enterprise), var(--dark-glow-purple);
    }

    /* Footer dark mode */
    .footer {
        background: linear-gradient(180deg, var(--dark-bg-primary) 0%, #000000 100%);
    }

    .footer::before {
        background: linear-gradient(90deg, transparent, var(--dark-accent-blue), transparent);
    }

    .footer-section h3,
    .footer-section h4 {
        color: var(--dark-text-primary);
    }

    .footer-section p,
    .footer-contact p {
        color: var(--dark-text-secondary);
    }

    .footer-section ul li a {
        color: var(--dark-text-secondary);
    }

    .footer-section ul li a:hover {
        color: var(--dark-accent-blue);
    }

    .social-link {
        color: var(--dark-text-secondary);
    }

    .social-link:hover {
        color: var(--dark-accent-blue);
    }

    .footer-bottom p {
        color: rgba(161, 161, 170, 0.6);
    }

    /* Scroll progress dark mode */
    .scroll-progress {
        background: var(--gradient-primary);
        box-shadow: var(--dark-glow-blue);
    }

    /* Custom cursor dark mode */
    .custom-cursor {
        background: var(--dark-accent-blue);
        box-shadow: var(--dark-glow-blue);
    }

    .custom-cursor.hover {
        background: var(--dark-accent-purple);
        box-shadow: var(--dark-glow-purple);
    }

    /* Section headers dark mode */
    .section-header h2 {
        color: var(--dark-text-primary);
    }

    .section-header p {
        color: var(--dark-text-secondary);
    }

    /* Dark mode particles and effects */
    .particle {
        background: var(--dark-accent-blue);
        box-shadow: var(--dark-glow-blue);
    }

    .stat-particles .particle {
        background: var(--dark-accent-purple);
        box-shadow: var(--dark-glow-purple);
    }

    /* Enhanced glow effects for dark mode */
    .service-card::after {
        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(79, 70, 229, 0.2) 0%, transparent 50%);
    }

    .specialization-card::before {
        background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.2), transparent);
    }

    /* Logo text dark mode */
    .logo-text {
        background: linear-gradient(135deg, var(--dark-bg-card) 0%, rgba(22, 33, 62, 0.8) 100%);
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: var(--dark-shadow-light);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --dark-text-primary: #ffffff;
        --dark-text-secondary: #ffffff;
        --dark-bg-primary: #000000;
        --dark-bg-secondary: #1a1a1a;
        --dark-border: #666666;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] .particle,
    [data-theme="dark"] .floating-shape,
    [data-theme="dark"] .node {
        animation: none;
    }

    [data-theme="dark"] .service-card:hover,
    [data-theme="dark"] .value-item:hover,
    [data-theme="dark"] .stat-item:hover {
        transform: none;
    }
}