/* Color inversion filter - applies by default (light mode) */
/* When dark-mode class is added to body, inversion is removed */
/* Apply filter to filterable-content wrapper so scroll indicator isn't affected */
body:not(.dark-mode) .filterable-content {
    filter: invert(1) hue-rotate(180deg) !important;
}

body:not(.dark-mode) {
    background: #ffffff;
}

/* Invert the dot grid background in light mode to keep it looking the same */
body:not(.dark-mode)::before {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Nav indicator should not be inverted in light mode - double invert to cancel out parent */
body:not(.dark-mode) .nav-indicator {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Mobile menu dropdown styling for light mode - double invert to cancel parent */
body:not(.dark-mode) .modern-nav-links.mobile-open {
    filter: invert(1) hue-rotate(180deg) !important;
    /* Solid white background for light mode since backdrop-filter doesn't work with filter inversion */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(250, 250, 252, 0.95) 50%,
        rgba(255, 255, 255, 0.95) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

body:not(.dark-mode) .modern-nav-links.mobile-open a {
    color: rgba(0, 0, 0, 0.8) !important;
}

body:not(.dark-mode) .modern-nav-links.mobile-open a:hover {
    color: rgba(16, 100, 255, 0.9) !important;
}

/* Blockchain logo icons should be slightly lighter gray in light mode */
body:not(.dark-mode) .chain-logo,
body:not(.dark-mode) .chain-logo-solana,
body:not(.dark-mode) .chain-logo-ethereum,
body:not(.dark-mode) .chain-logo-aptos,
body:not(.dark-mode) .chain-logo-move,
body:not(.dark-mode) .chain-logo-solidity,
body:not(.dark-mode) .chain-logo-rust,
body:not(.dark-mode) .chain-logo-circom,
body:not(.dark-mode) .chain-logo-anchor,
body:not(.dark-mode) .chain-logo-pinocchio {
    filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(1.3) !important;
}

/* Team member photos should not be inverted - double invert to cancel out parent */
body:not(.dark-mode) .member-photo img {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ALL OTHER images, videos, and other media stay inverted in light mode */
/* We do NOT double-invert them - they stay inverted from body */
body:not(.dark-mode) img:not(.chain-logo):not([class*="chain-logo"]):not(.member-photo img),
body:not(.dark-mode) video,
body:not(.dark-mode) picture,
body:not(.dark-mode) canvas {
    filter: none !important;
}

/* SVGs in light mode - but NOT the theme toggle icons */
body:not(.dark-mode) svg:not(.theme-icon) {
    filter: none !important;
}

/* Theme toggle should NOT be inverted at all - double invert to cancel parent */
body:not(.dark-mode) .theme-toggle {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* But the icons themselves should not have hue-rotate to preserve colors */
body:not(.dark-mode) .theme-icon {
    filter: invert(1) !important;
}

/* Override border and background for light mode - white background with thin black border */
body:not(.dark-mode) .theme-switch {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.3) !important;
}

/* Service and tooling cards - white background in mobile light mode */
@media (max-width: 767px) {
    body:not(.dark-mode) .service-card,
    body:not(.dark-mode) .service-card-sophisticated {
        filter: invert(1) hue-rotate(180deg) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    body:not(.dark-mode) .service-card:hover,
    body:not(.dark-mode) .service-card-sophisticated:hover {
        background: rgba(255, 255, 255, 1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    }

    body:not(.dark-mode) .service-card h3,
    body:not(.dark-mode) .service-card-sophisticated h3,
    body:not(.dark-mode) .service-card-sophisticated .service-title {
        color: rgba(0, 0, 0, 0.9) !important;
    }

    body:not(.dark-mode) .service-card p,
    body:not(.dark-mode) .service-card-sophisticated p,
    body:not(.dark-mode) .service-card-sophisticated .service-summary {
        color: rgba(0, 0, 0, 0.7) !important;
    }

    body:not(.dark-mode) .service-card li,
    body:not(.dark-mode) .service-card-sophisticated li,
    body:not(.dark-mode) .service-features-list li,
    body:not(.dark-mode) .service-card *,
    body:not(.dark-mode) .service-card-sophisticated * {
        color: rgba(0, 0, 0, 0.7) !important;
    }

    /* Tags in tooling cards - black outline in light mode */
    body:not(.dark-mode) .service-card-sophisticated .product-tag,
    body:not(.dark-mode) .product-tag {
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        color: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Progress bar styling for light mode - since it's outside .filterable-content, it's not inverted */
/* Keep the same colors as dark mode */
body:not(.dark-mode) .scroll-indicator {
    background: rgba(59, 130, 246, 0.2) !important;
}

body:not(.dark-mode) .scroll-progress {
    background: linear-gradient(90deg, #10ebff, #b91aee) !important;
}

/* Smooth transition for theme changes */
body {
    transition: filter 0.3s ease;
}

img, video, picture, canvas, svg {
    transition: filter 0.3s ease;
}