/**
 * GLOBAL LIGHT MODE - Complete Theme Override
 * Applied when html[data-theme="light"] or body[data-theme="light"]
 * Ultra-aggressive selectors to ensure light mode works EVERYWHERE
 */

/* ===========================================
   BASE - BODY & HTML
   =========================================== */

html[data-theme="light"],
html[data-theme="light"] body,
body[data-theme="light"] {
    background: var(--light-section-bg-1) !important;
    color: var(--light-text-primary) !important;
}

/* Background pattern */
html[data-theme="light"] .blueprint-pattern,
body[data-theme="light"] .blueprint-pattern {
    opacity: 0.15 !important;
    background-image: linear-gradient(0deg, transparent 24%, rgba(14, 165, 233, .06) 25%, rgba(14, 165, 233, .06) 26%, transparent 27%, transparent 74%, rgba(14, 165, 233, .06) 75%, rgba(14, 165, 233, .06) 76%, transparent 77%, transparent),
                      linear-gradient(90deg, transparent 24%, rgba(14, 165, 233, .06) 25%, rgba(14, 165, 233, .06) 26%, transparent 27%, transparent 74%, rgba(14, 165, 233, .06) 75%, rgba(14, 165, 233, .06) 76%, transparent 77%, transparent) !important;
}

/* ===========================================
   BACKGROUNDS - ALL SECTIONS
   =========================================== */

/* Dark backgrounds → Modern darker light backgrounds */
html[data-theme="light"] .bg-dark-400,
html[data-theme="light"] .bg-dark-500,
html[data-theme="light"] .bg-dark-600,
body[data-theme="light"] .bg-dark-400,
body[data-theme="light"] .bg-dark-500,
body[data-theme="light"] .bg-dark-600 {
    background: var(--light-card-bg-gradient-modern) !important;
}

/* White becomes softer with modern gradients */
html[data-theme="light"] .bg-white,
body[data-theme="light"] .bg-white {
    background: var(--light-card-bg-gradient) !important;
}

html[data-theme="light"] .bg-gray-50,
body[data-theme="light"] .bg-gray-50 {
    background: var(--light-section-bg-subtle) !important;
}

html[data-theme="light"] .bg-gray-100,
body[data-theme="light"] .bg-gray-100 {
    background: var(--light-bg-secondary) !important;
}

html[data-theme="light"] .bg-gray-200,
body[data-theme="light"] .bg-gray-200 {
    background: var(--light-bg-tertiary) !important;
}

/* All sections */
html[data-theme="light"] section,
body[data-theme="light"] section {
    color: #111827 !important;
}

/* ===========================================
   TEXT COLORS - GLOBAL
   =========================================== */

/* White text → Dark text */
html[data-theme="light"] .text-white,
body[data-theme="light"] .text-white {
    color: #111827 !important;
}

/* Gray text adjustments */
html[data-theme="light"] .text-gray-100,
body[data-theme="light"] .text-gray-100 {
    color: #111827 !important;
}

html[data-theme="light"] .text-gray-200,
body[data-theme="light"] .text-gray-200 {
    color: #1f2937 !important;
}

html[data-theme="light"] .text-gray-300,
body[data-theme="light"] .text-gray-300 {
    color: #4b5563 !important;
}

html[data-theme="light"] .text-gray-400,
body[data-theme="light"] .text-gray-400 {
    color: #6b7280 !important;
}

html[data-theme="light"] .text-gray-500,
body[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
}

html[data-theme="light"] .text-gray-600,
body[data-theme="light"] .text-gray-600 {
    color: #4b5563 !important;
}

html[data-theme="light"] .text-gray-700,
body[data-theme="light"] .text-gray-700 {
    color: #374151 !important;
}

html[data-theme="light"] .text-gray-800,
body[data-theme="light"] .text-gray-800 {
    color: #1f2937 !important;
}

html[data-theme="light"] .text-gray-900,
body[data-theme="light"] .text-gray-900,
html[data-theme="light"] .text-primary-900,
body[data-theme="light"] .text-primary-900 {
    color: #111827 !important;
}

/* Headings */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4,
body[data-theme="light"] h5,
body[data-theme="light"] h6 {
    color: #111827 !important;
}

/* Paragraphs and spans */
html[data-theme="light"] p,
html[data-theme="light"] span,
body[data-theme="light"] p,
body[data-theme="light"] span {
    color: inherit;
}

/* ===========================================
   NAVBAR - COMPLETE OVERRIDE
   =========================================== */

html[data-theme="light"] .navbar-container,
html[data-theme="light"] nav.navbar-container,
body[data-theme="light"] .navbar-container,
body[data-theme="light"] nav.navbar-container {
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

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

html[data-theme="light"] .nav-link:hover,
body[data-theme="light"] .nav-link:hover {
    color: #0ea5e9 !important;
}

html[data-theme="light"] .mobile-nav-link,
body[data-theme="light"] .mobile-nav-link {
    color: #374151 !important;
}

html[data-theme="light"] .mobile-nav-link:hover,
body[data-theme="light"] .mobile-nav-link:hover {
    color: #0ea5e9 !important;
    background-color: rgba(14, 165, 233, 0.05) !important;
}

html[data-theme="light"] .mobile-menu-container,
body[data-theme="light"] .mobile-menu-container {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .mobile-menu-btn,
html[data-theme="light"] .theme-toggle-btn,
body[data-theme="light"] .mobile-menu-btn,
body[data-theme="light"] .theme-toggle-btn {
    color: #374151 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .mobile-menu-btn:hover,
html[data-theme="light"] .theme-toggle-btn:hover,
body[data-theme="light"] .mobile-menu-btn:hover,
body[data-theme="light"] .theme-toggle-btn:hover {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0ea5e9 !important;
}

html[data-theme="light"] .mobile-menu-btn svg,
html[data-theme="light"] .theme-toggle-btn svg,
body[data-theme="light"] .mobile-menu-btn svg,
body[data-theme="light"] .theme-toggle-btn svg {
    color: #374151 !important;
}

/* ===========================================
   HERO SECTION - COMPLETE OVERRIDE
   =========================================== */

html[data-theme="light"] .hero-section:not(:has(.hero-background img)):not(:has(.hero-background video)):not(.has-admin-media),
body[data-theme="light"] .hero-section:not(:has(.hero-background img)):not(:has(.hero-background video)):not(.has-admin-media) {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
}

html[data-theme="light"] .hero-background-overlay,
body[data-theme="light"] .hero-background-overlay {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.85) 0%, rgba(226, 232, 240, 0.75) 50%, rgba(203, 213, 225, 0.8) 100%) !important;
}

html[data-theme="light"] .hero-background-image,
body[data-theme="light"] .hero-background-image {
    opacity: 0.4 !important;
    filter: brightness(1.1) contrast(1.05) !important;
}

/* Hero logo */
html[data-theme="light"] .logo-container,
html[data-theme="light"] .logo-wrapper,
body[data-theme="light"] .logo-container,
body[data-theme="light"] .logo-wrapper {
    filter: brightness(0.9) contrast(1.1);
}

/* Hero taglines */
html[data-theme="light"] .tagline-primary,
body[data-theme="light"] .tagline-primary {
    background: linear-gradient(135deg, #111827 0%, #0ea5e9 40%, #111827 80%, #0ea5e9 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .tagline-secondary,
body[data-theme="light"] .tagline-secondary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .tagline-description,
body[data-theme="light"] .tagline-description {
    color: #4b5563 !important;
}

html[data-theme="light"] .divider-line,
body[data-theme="light"] .divider-line {
    background: linear-gradient(90deg, transparent, #0ea5e9, transparent) !important;
}

html[data-theme="light"] .divider-dot,
body[data-theme="light"] .divider-dot {
    background: #0ea5e9 !important;
}

/* Hero CTA buttons */
html[data-theme="light"] .cta-primary,
body[data-theme="light"] .cta-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%) !important;
    color: white !important;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.35) !important;
}

html[data-theme="light"] .cta-primary:hover,
body[data-theme="light"] .cta-primary:hover {
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.45) !important;
    transform: translateY(-4px) scale(1.05);
}

html[data-theme="light"] .cta-secondary,
body[data-theme="light"] .cta-secondary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0ea5e9 !important;
    border: 2px solid #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

html[data-theme="light"] .cta-secondary:hover,
body[data-theme="light"] .cta-secondary:hover {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

/* Hero scroll indicator */
html[data-theme="light"] .scroll-mouse,
body[data-theme="light"] .scroll-mouse {
    border-color: rgba(14, 165, 233, 0.4) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="light"] .scroll-wrapper:hover .scroll-mouse,
body[data-theme="light"] .scroll-wrapper:hover .scroll-mouse {
    border-color: #0ea5e9 !important;
    background: rgba(14, 165, 233, 0.1) !important;
}

html[data-theme="light"] .scroll-dot,
body[data-theme="light"] .scroll-dot {
    background: #0ea5e9 !important;
}

html[data-theme="light"] .scroll-text,
body[data-theme="light"] .scroll-text {
    color: rgba(17, 24, 39, 0.7) !important;
}

html[data-theme="light"] .scroll-wrapper:hover .scroll-text,
body[data-theme="light"] .scroll-wrapper:hover .scroll-text {
    color: #0ea5e9 !important;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.3) !important;
}

html[data-theme="light"] .scroll-arrow,
body[data-theme="light"] .scroll-arrow {
    color: #0ea5e9 !important;
}

/* ===========================================
   CARDS & COMPONENTS - ENHANCED
   =========================================== */

/* Universal Card Base - Modern Sophisticated Gradients */
html[data-theme="light"] .card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .project-card,
html[data-theme="light"] .partner-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .professional-stat,
html[data-theme="light"] .landing-feature,
html[data-theme="light"] .service-card-modern,
html[data-theme="light"] .service-card-premium,
html[data-theme="light"] .service-card-compact,
body[data-theme="light"] .card,
body[data-theme="light"] .service-card,
body[data-theme="light"] .project-card,
body[data-theme="light"] .partner-card,
body[data-theme="light"] .feature-card,
body[data-theme="light"] .professional-stat,
body[data-theme="light"] .landing-feature,
body[data-theme="light"] .service-card-modern,
body[data-theme="light"] .service-card-premium,
body[data-theme="light"] .service-card-compact {
    background: var(--light-card-bg-gradient-modern) !important;
    border: 1px solid var(--light-border-default) !important;
    box-shadow: var(--light-card-shadow) !important;
}

/* Card Hover States */
html[data-theme="light"] .card:hover,
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .project-card:hover,
html[data-theme="light"] .partner-card:hover,
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .professional-stat:hover,
body[data-theme="light"] .card:hover,
body[data-theme="light"] .service-card:hover,
body[data-theme="light"] .project-card:hover,
body[data-theme="light"] .partner-card:hover,
body[data-theme="light"] .feature-card:hover,
body[data-theme="light"] .professional-stat:hover {
    box-shadow: var(--light-card-shadow-hover) !important;
    border-color: var(--light-border-accent) !important;
    transform: translateY(-2px);
}

/* Glass morphism components - Enhanced */
html[data-theme="light"] .glass-dark,
body[data-theme="light"] .glass-dark {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--light-border-default) !important;
    backdrop-filter: blur(20px);
    box-shadow: var(--light-shadow-md) !important;
}

/* Card Variants - Soft Background */
html[data-theme="light"] .card-muted,
html[data-theme="light"] .card-soft,
body[data-theme="light"] .card-muted,
body[data-theme="light"] .card-soft {
    background: var(--light-card-bg-gradient-alt) !important;
    border: 1px solid var(--light-border-subtle) !important;
}

/* Premium Cards - Enhanced Gradient */
html[data-theme="light"] .card-premium,
html[data-theme="light"] [class*="premium"],
html[data-theme="light"] .featured,
body[data-theme="light"] .card-premium,
body[data-theme="light"] [class*="premium"],
body[data-theme="light"] .featured {
    background: var(--light-card-bg-gradient-premium) !important;
    border: 1px solid var(--light-border-default) !important;
    box-shadow: var(--light-card-shadow) !important;
}

/* Container and Wrapper Cards */
html[data-theme="light"] .container,
html[data-theme="light"] .wrapper,
html[data-theme="light"] [class*="container"]:not(.navbar-container),
body[data-theme="light"] .container,
body[data-theme="light"] .wrapper,
body[data-theme="light"] [class*="container"]:not(.navbar-container) {
    background: transparent !important;
}

/* Zone badges - Enhanced */
html[data-theme="light"] .zone-badge,
html[data-theme="light"] .badge,
html[data-theme="light"] .badge-minimal,
body[data-theme="light"] .zone-badge,
body[data-theme="light"] .badge,
body[data-theme="light"] .badge-minimal {
    background: var(--light-accent-bg-light) !important;
    border: 1px solid var(--light-border-accent) !important;
    color: var(--light-accent-primary) !important;
}

html[data-theme="light"] .zone-badge:hover,
html[data-theme="light"] .badge:hover,
html[data-theme="light"] .badge-minimal:hover,
body[data-theme="light"] .zone-badge:hover,
body[data-theme="light"] .badge:hover,
body[data-theme="light"] .badge-minimal:hover {
    background: var(--light-accent-bg-medium) !important;
    border-color: var(--light-border-accent-hover) !important;
    color: var(--light-accent-primary-hover) !important;
}

/* Status Badges */
html[data-theme="light"] .badge-success,
body[data-theme="light"] .badge-success {
    background: var(--light-success-bg) !important;
    border: 1px solid var(--light-success-border) !important;
    color: var(--light-success-text) !important;
}

html[data-theme="light"] .badge-warning,
body[data-theme="light"] .badge-warning {
    background: var(--light-warning-bg) !important;
    border: 1px solid var(--light-warning-border) !important;
    color: var(--light-warning-text) !important;
}

html[data-theme="light"] .badge-error,
body[data-theme="light"] .badge-error {
    background: var(--light-error-bg) !important;
    border: 1px solid var(--light-error-border) !important;
    color: var(--light-error-text) !important;
}

html[data-theme="light"] .badge-info,
body[data-theme="light"] .badge-info {
    background: var(--light-info-bg) !important;
    border: 1px solid var(--light-info-border) !important;
    color: var(--light-info-text) !important;
}

/* ===========================================
   GLOW EFFECTS & ACCENTS
   =========================================== */

html[data-theme="light"] .glow-text,
body[data-theme="light"] .glow-text {
    text-shadow: 0 0 12px rgba(14, 165, 233, 0.3) !important;
    color: #0ea5e9 !important;
}

html[data-theme="light"] .text-accent-400,
html[data-theme="light"] .text-neon-cyan,
html[data-theme="light"] .text-neon-cyan-400,
body[data-theme="light"] .text-accent-400,
body[data-theme="light"] .text-neon-cyan,
body[data-theme="light"] .text-neon-cyan-400 {
    color: #0ea5e9 !important;
}

/* ===========================================
   BORDERS & SHADOWS
   =========================================== */

html[data-theme="light"] .border-white,
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .border-gray-800,
body[data-theme="light"] .border-white,
body[data-theme="light"] .border-gray-700,
body[data-theme="light"] .border-gray-800 {
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .shadow-lg,
body[data-theme="light"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .shadow-xl,
body[data-theme="light"] .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
}

/* ===========================================
   TECH GRID & PATTERNS
   =========================================== */

html[data-theme="light"] .tech-grid,
body[data-theme="light"] .tech-grid {
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px) !important;
    background-size: 50px 50px;
}

/* ===========================================
   CONSTRUCTION ACCENT
   =========================================== */

html[data-theme="light"] .construction-accent-line,
body[data-theme="light"] .construction-accent-line {
    background: linear-gradient(90deg, #f26419, #e34a0f) !important;
    box-shadow: 0 2px 8px rgba(242, 100, 25, 0.25) !important;
}

/* ===========================================
   FAQ SECTION - LIGHT MODE OVERRIDE
   =========================================== */

html[data-theme="light"] .bg-gradient-to-b.from-neutral-900.to-neutral-950,
body[data-theme="light"] .bg-gradient-to-b.from-neutral-900.to-neutral-950 {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
}

html[data-theme="light"] .bg-neutral-800\/50,
body[data-theme="light"] .bg-neutral-800\/50 {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .border-neutral-700,
body[data-theme="light"] .border-neutral-700 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .hover\:border-blue-500\/50:hover,
body[data-theme="light"] .hover\:border-blue-500\/50:hover {
    border-color: rgba(14, 165, 233, 0.4) !important;
}

html[data-theme="light"] .text-white,
body[data-theme="light"] .text-white {
    color: #111827 !important;
}

html[data-theme="light"] .text-gray-400,
body[data-theme="light"] .text-gray-400 {
    color: #4b5563 !important;
}

html[data-theme="light"] .group-hover\:text-blue-400:hover,
body[data-theme="light"] .group-hover\:text-blue-400:hover {
    color: #0ea5e9 !important;
}

/* ===========================================
   REFERRAL PROGRAM SECTION - LIGHT MODE OVERRIDE
   =========================================== */

html[data-theme="light"] #referral-program,
html[data-theme="light"] #referral-program.bg-gradient-to-b.from-dark-500.to-dark-400,
body[data-theme="light"] #referral-program,
body[data-theme="light"] #referral-program.bg-gradient-to-b.from-dark-500.to-dark-400 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
}

html[data-theme="light"] #referral-program .text-white,
body[data-theme="light"] #referral-program .text-white {
    color: #111827 !important;
}

html[data-theme="light"] #referral-program .text-gray-400,
body[data-theme="light"] #referral-program .text-gray-400 {
    color: #4b5563 !important;
}

html[data-theme="light"] #referral-program .glass-dark,
body[data-theme="light"] #referral-program .glass-dark {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px);
}

html[data-theme="light"] #referral-program .border-neon-green\/20,
body[data-theme="light"] #referral-program .border-neon-green\/20 {
    border-color: rgba(14, 165, 233, 0.2) !important;
}

html[data-theme="light"] #referral-program .hover\:border-neon-green\/40:hover,
body[data-theme="light"] #referral-program .hover\:border-neon-green\/40:hover {
    border-color: rgba(14, 165, 233, 0.4) !important;
}

html[data-theme="light"] #referral-program .bg-gradient-to-br.from-neon-green.to-neon-yellow,
body[data-theme="light"] #referral-program .bg-gradient-to-br.from-neon-green.to-neon-yellow {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important;
}

html[data-theme="light"] #referral-program .text-neon-green,
body[data-theme="light"] #referral-program .text-neon-green {
    color: #0ea5e9 !important;
}

html[data-theme="light"] #referral-program .bg-gradient-to-r.from-neon-green.to-neon-yellow,
body[data-theme="light"] #referral-program .bg-gradient-to-r.from-neon-green.to-neon-yellow {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important;
}

/* ===========================================
   PROJECT DETAIL PAGE - LIGHT MODE OVERRIDE
   =========================================== */

/* Project Gallery Light Mode */
html[data-theme="light"] .gallery-item,
body[data-theme="light"] .gallery-item {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .gallery-item:hover,
body[data-theme="light"] .gallery-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

/* Project Map Light Mode */
html[data-theme="light"] .project-map,
body[data-theme="light"] .project-map {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .map-placeholder,
body[data-theme="light"] .map-placeholder {
    color: #6b7280 !important;
}

/* Project Status Badges Light Mode */
html[data-theme="light"] .status-badge--completed,
body[data-theme="light"] .status-badge--completed {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #16a34a !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

html[data-theme="light"] .status-badge--in-progress,
body[data-theme="light"] .status-badge--in-progress {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #2563eb !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="light"] .status-badge--planned,
body[data-theme="light"] .status-badge--planned {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* Project Quick Actions Light Mode */
html[data-theme="light"] .quick-action-btn,
body[data-theme="light"] .quick-action-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #4b5563 !important;
}

html[data-theme="light"] .quick-action-btn:hover,
body[data-theme="light"] .quick-action-btn:hover {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
    color: #0ea5e9 !important;
}

/* Project Related Section Light Mode */
html[data-theme="light"] .related-projects-section,
body[data-theme="light"] .related-projects-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Project Contact Form Light Mode */
html[data-theme="light"] .contact-submit-btn,
body[data-theme="light"] .contact-submit-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

html[data-theme="light"] .contact-submit-btn:hover,
body[data-theme="light"] .contact-submit-btn:hover {
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ===========================================
   SECTIONS - ALTERNATING BACKGROUNDS
   =========================================== */

/* Base section styling for light mode */
html[data-theme="light"] section,
body[data-theme="light"] section {
    background: var(--light-section-bg-1) !important;
    color: var(--light-text-primary) !important;
}

/* Alternating section backgrounds for visual separation */
html[data-theme="light"] section:nth-of-type(even):not(.hero-section):not(#referral-program),
body[data-theme="light"] section:nth-of-type(even):not(.hero-section):not(#referral-program) {
    background: var(--light-section-bg-2) !important;
}

/* Every third section for additional variety */
html[data-theme="light"] section:nth-of-type(3n):not(.hero-section):not(#referral-program),
body[data-theme="light"] section:nth-of-type(3n):not(.hero-section):not(#referral-program) {
    background: var(--light-section-bg-3) !important;
}

/* Featured sections with enhanced backgrounds */
html[data-theme="light"] .featured-section,
html[data-theme="light"] .highlight-section,
body[data-theme="light"] .featured-section,
body[data-theme="light"] .highlight-section {
    background: var(--light-section-bg-2) !important;
    border-top: 1px solid var(--light-border-subtle);
    border-bottom: 1px solid var(--light-border-subtle);
}

/* Container backgrounds */
html[data-theme="light"] .container-card,
html[data-theme="light"] .section-container,
body[data-theme="light"] .container-card,
body[data-theme="light"] .section-container {
    background: var(--light-card-bg-solid) !important;
    border: 1px solid var(--light-border-default) !important;
    border-radius: 1rem;
    box-shadow: var(--light-shadow-md) !important;
}

/* ===========================================
   FOOTER
   =========================================== */

html[data-theme="light"] #footer,
html[data-theme="light"] footer,
body[data-theme="light"] #footer,
body[data-theme="light"] footer {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html[data-theme="light"] footer a,
body[data-theme="light"] footer a {
    color: #d1d5db !important;
}

html[data-theme="light"] footer a:hover,
body[data-theme="light"] footer a:hover {
    color: #0ea5e9 !important;
}
/* ===========================================
   PRIMARY TEXT COLORS - AGGRESSIVE OVERRIDE
   =========================================== */

html[data-theme="light"] .text-primary-600,
body[data-theme="light"] .text-primary-600 {
    color: #4b5563 !important;
}

html[data-theme="light"] .text-primary-700,
body[data-theme="light"] .text-primary-700 {
    color: #374151 !important;
}

html[data-theme="light"] .text-primary-800,
body[data-theme="light"] .text-primary-800 {
    color: #1f2937 !important;
}

/* ===========================================
   CARD COMPONENTS
   =========================================== */

html[data-theme="light"] .card,
body[data-theme="light"] .card {
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

/* ===========================================
   GRADIENTS - Keep visible in light mode
   =========================================== */

html[data-theme="light"] .gradient-construction,
body[data-theme="light"] .gradient-construction {
    background: linear-gradient(135deg, #f26419 0%, #e34a0f 100%) !important;
}

html[data-theme="light"] .gradient-steel,
body[data-theme="light"] .gradient-steel {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
}

/* ===========================================
   ENHANCED LIGHT MODE GRADIENTS & CONTRAST
   =========================================== */

/* Improve section backgrounds with subtle gradients */
html[data-theme="light"] section:not(.hero-section):not(#referral-program),
body[data-theme="light"] section:not(.hero-section):not(#referral-program) {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Better contrast for cards and components */
html[data-theme="light"] .card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .professional-stat,
body[data-theme="light"] .card,
body[data-theme="light"] .service-card,
body[data-theme="light"] .professional-stat {
    background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Enhanced button styling for light mode */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn,
body[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-primary:hover,
body[data-theme="light"] .btn:hover,
body[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4) !important;
    transform: translateY(-2px) !important;
}

html[data-theme="light"] .btn-secondary,
body[data-theme="light"] .btn-secondary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0ea5e9 !important;
    border: 2px solid #0ea5e9 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15) !important;
}

html[data-theme="light"] .btn-secondary:hover,
body[data-theme="light"] .btn-secondary:hover {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

/* ===========================================
   BUTTONS & INTERACTIVE ELEMENTS
   =========================================== */

/* Primary Buttons */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .cta-primary,
html[data-theme="light"] button.btn-primary,
body[data-theme="light"] .btn-primary,
body[data-theme="light"] .cta-primary,
body[data-theme="light"] button.btn-primary {
    background: linear-gradient(135deg, var(--light-accent-primary) 0%, var(--light-accent-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .cta-primary:hover,
body[data-theme="light"] .btn-primary:hover,
body[data-theme="light"] .cta-primary:hover {
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Secondary Buttons */
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .cta-secondary,
body[data-theme="light"] .btn-secondary,
body[data-theme="light"] .cta-secondary {
    background: var(--light-card-bg-solid) !important;
    color: var(--light-accent-primary) !important;
    border: 2px solid var(--light-border-accent) !important;
    box-shadow: var(--light-shadow-sm) !important;
}

html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .cta-secondary:hover,
body[data-theme="light"] .btn-secondary:hover,
body[data-theme="light"] .cta-secondary:hover {
    background: var(--light-accent-bg-light) !important;
    border-color: var(--light-border-accent-hover) !important;
    color: var(--light-accent-primary-hover) !important;
}

/* Ghost/Outline Buttons */
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-ghost,
body[data-theme="light"] .btn-outline,
body[data-theme="light"] .btn-ghost {
    background: transparent !important;
    color: var(--light-accent-primary) !important;
    border: 2px solid var(--light-border-default) !important;
}

html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .btn-ghost:hover,
body[data-theme="light"] .btn-outline:hover,
body[data-theme="light"] .btn-ghost:hover {
    background: var(--light-hover-overlay) !important;
    border-color: var(--light-border-accent) !important;
}

/* ===========================================
   FORMS & INPUTS
   =========================================== */

/* Input Fields */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="email"],
body[data-theme="light"] input[type="tel"],
body[data-theme="light"] input[type="url"],
body[data-theme="light"] input[type="number"],
body[data-theme="light"] input[type="search"],
body[data-theme="light"] textarea,
body[data-theme="light"] select {
    background: var(--light-card-bg-solid) !important;
    border: 1px solid var(--light-border-default) !important;
    color: var(--light-text-primary) !important;
    box-shadow: var(--light-shadow-xs) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
body[data-theme="light"] input:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] select:focus {
    border-color: var(--light-accent-primary) !important;
    box-shadow: 0 0 0 3px var(--light-focus-ring) !important;
    outline: none;
}

/* Form Cards */
html[data-theme="light"] .form-card,
html[data-theme="light"] form.card,
body[data-theme="light"] .form-card,
body[data-theme="light"] form.card {
    background: var(--light-card-bg-gradient) !important;
    border: 1px solid var(--light-border-default) !important;
    box-shadow: var(--light-card-shadow) !important;
    padding: 2rem;
    border-radius: 1rem;
}

/* ===========================================
   ENSURE ALL CONTENT IS VISIBLE
   =========================================== */

/* Force all text elements to have proper color */
html[data-theme="light"] section p,
html[data-theme="light"] section span,
html[data-theme="light"] section div,
body[data-theme="light"] section p,
body[data-theme="light"] section span,
body[data-theme="light"] section div {
    color: inherit;
}

/* Ensure strong tags are visible */
html[data-theme="light"] strong,
body[data-theme="light"] strong {
    font-weight: 600;
    color: inherit;
}

/* Fix any invisible SVG icons */
html[data-theme="light"] svg,
body[data-theme="light"] svg {
    color: inherit;
}

/* ===========================================
   ANIMATION VISIBILITY FIX
   =========================================== */

/* Ensure animated elements become visible in light mode */
html[data-theme="light"] .animate-on-scroll.visible,
body[data-theme="light"] .animate-on-scroll.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for all sections */
html[data-theme="light"] section,
body[data-theme="light"] section {
    visibility: visible !important;
}

/* Force all section content to be visible */
html[data-theme="light"] section *,
body[data-theme="light"] section * {
    visibility: visible !important;
}