/**
 * EchoCue Dark Mode Stylesheet
 *
 * This stylesheet provides automatic dark mode support based on system preference.
 * It uses @media (prefers-color-scheme: dark) to detect user preference.
 * Light mode appearance remains unchanged.
 *
 * Design Principles:
 * - Deep neutral surfaces (not pure black)
 * - Comfortable text contrast
 * - Subtle borders and dividers
 * - Layered surfaces for visual hierarchy
 * - Consistent component states
 */

/* ==========================================================================
   CSS Custom Properties - Dark Mode Override
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surface colors - layered from darkest to lightest */
    --dm-bg-base: #0a0f1a;           /* Deepest background */
    --dm-bg-elevated: #111827;       /* Cards, modals */
    --dm-bg-surface: #1a2235;        /* Elevated surfaces */
    --dm-bg-hover: #242d42;          /* Hover states */
    --dm-bg-input: #0d1321;          /* Form inputs */

    /* Text colors - ensuring WCAG AA contrast */
    --dm-text-primary: #f1f5f9;      /* Primary text - high contrast */
    --dm-text-secondary: #94a3b8;    /* Secondary text */
    --dm-text-muted: #64748b;        /* Muted/placeholder text */
    --dm-text-inverse: #0f172a;      /* Text on light backgrounds */

    /* Border colors */
    --dm-border-default: #1e293b;    /* Default borders */
    --dm-border-subtle: #334155;     /* Subtle borders */
    --dm-border-strong: #475569;     /* Strong borders */

    /* Accent colors - slightly adjusted for dark backgrounds */
    --dm-accent-blue: #3b82f6;
    --dm-accent-purple: #a78bfa;
    --dm-accent-green: #34d399;
    --dm-accent-red: #f87171;
    --dm-accent-yellow: #fbbf24;
    --dm-accent-orange: #fb923c;

    /* Shadow - subtle glow effect */
    --dm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --dm-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
  }
}

/* ==========================================================================
   Base Elements
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Body background */
  body {
    background-color: var(--dm-bg-base) !important;
    color: var(--dm-text-primary) !important;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--dm-bg-base);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--dm-border-subtle);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-border-strong);
  }

  /* Selection */
  ::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: var(--dm-text-primary);
  }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Navbar background */
  .navbar-area,
  #navbar {
    background-color: var(--dm-bg-elevated) !important;
    border-bottom: 1px solid var(--dm-border-default);
  }

  /* Sticky navbar shadow */
  .navbar-area.sticky,
  #navbar.sticky {
    box-shadow: var(--dm-shadow-md);
  }

  /* Nav links */
  .nav-link {
    color: var(--dm-text-secondary) !important;
  }

  .nav-link:hover {
    color: var(--dm-accent-blue) !important;
  }

  .nav-link.active {
    color: var(--dm-accent-blue) !important;
  }

  .nav-link.active::after {
    background-color: var(--dm-accent-blue);
  }

  /* Mobile menu */
  #navbar-collapse {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Burger menu */
  #navbar-burger-menu span {
    background-color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Typography & Text
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Headings */
  h1, h2, h3, h4, h5, h6,
  .text-black {
    color: var(--dm-text-primary) !important;
  }

  /* Body text */
  p,
  .text-paragraph {
    color: var(--dm-text-secondary) !important;
  }

  /* Muted text */
  .text-gray-500,
  .text-gray-600 {
    color: var(--dm-text-muted) !important;
  }

  /* Strong/bold text */
  strong, b {
    color: var(--dm-text-primary);
  }

  /* Links */
  a:not(.btn):not([class*="bg-"]) {
    color: var(--dm-accent-blue);
  }

  a:not(.btn):not([class*="bg-"]):hover {
    color: var(--dm-accent-purple);
  }

  /* Blue text accent */
  .text-blue {
    color: var(--dm-accent-blue) !important;
  }

  /* Purple text accent */
  .text-purple {
    color: var(--dm-accent-purple) !important;
  }
}

/* ==========================================================================
   Backgrounds & Surfaces
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* White backgrounds */
  .bg-white {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Light gray backgrounds */
  .bg-white-smoke,
  .bg-gray-50,
  .bg-magnolia,
  .bg-snow-drift {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Section backgrounds with gradient */
  .bg-gradient-to-b.from-white {
    background: linear-gradient(to bottom, var(--dm-bg-base), var(--dm-bg-surface)) !important;
  }

  /* Amour (light pink) background */
  .bg-amour {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Fantasy background */
  .bg-fantasy {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Black pearl - slightly lighter in dark mode for contrast */
  .bg-black-pearl {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Pure sections */
  section,
  [class*="py-[50px]"],
  [class*="py-[80px]"],
  [class*="py-[100px]"],
  [class*="py-[120px]"] {
    background-color: inherit;
  }
}

/* ==========================================================================
   Cards & Containers
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Feature cards */
  .feature-card {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  .feature-card:hover {
    background-color: var(--dm-bg-surface) !important;
    box-shadow: var(--dm-shadow-lg), var(--dm-shadow-glow);
  }

  /* Pricing cards */
  [class*="rounded-[20px]"][class*="bg-white"],
  [class*="rounded-[16px]"][class*="bg-white"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Testimonial cards */
  .swiper-slide > div[class*="bg-white"] {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Integration cards */
  [class*="rounded-[16px]"][class*="bg-gray-50"] {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Stat cards */
  .stat-card {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Box shadows on cards */
  [class*="shadow-lg"],
  [class*="shadow-md"] {
    box-shadow: var(--dm-shadow-lg) !important;
  }

  /* Hover shadow enhancement */
  [class*="hover:shadow-xl"]:hover,
  [class*="hover:shadow-lg"]:hover {
    box-shadow: var(--dm-shadow-lg), var(--dm-shadow-glow) !important;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Primary buttons - blue */
  .bg-blue,
  [class*="bg-blue"] {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }

  .bg-blue:hover,
  [class*="bg-blue"]:hover {
    background-color: #2563eb !important;
  }

  /* Purple buttons */
  .bg-purple,
  [class*="bg-purple"] {
    background-color: var(--dm-accent-purple) !important;
    color: var(--dm-text-inverse) !important;
  }

  .bg-purple:hover,
  [class*="bg-purple"]:hover {
    background-color: #8b5cf6 !important;
  }

  /* Outline buttons */
  [class*="border-blue"] {
    border-color: var(--dm-accent-blue) !important;
    color: var(--dm-accent-blue) !important;
  }

  [class*="border-blue"]:hover {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }

  /* Ghost/transparent buttons */
  button[class*="bg-transparent"],
  a[class*="bg-transparent"] {
    color: var(--dm-text-secondary) !important;
  }

  button[class*="bg-transparent"]:hover,
  a[class*="bg-transparent"]:hover {
    color: var(--dm-text-primary) !important;
    background-color: var(--dm-bg-hover) !important;
  }

  /* Back to top button */
  #backToTopBtn {
    background-color: var(--dm-bg-surface) !important;
    border: 1px solid var(--dm-border-default);
  }

  #backToTopBtn:hover {
    background-color: var(--dm-accent-blue) !important;
    border-color: var(--dm-accent-blue);
  }
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Text inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-default) !important;
    color: var(--dm-text-primary) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--dm-text-muted) !important;
  }

  /* Focus states */
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--dm-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    outline: none !important;
  }

  /* Labels */
  label {
    color: var(--dm-text-primary) !important;
  }

  /* Checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"] {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-subtle) !important;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    background-color: var(--dm-accent-blue) !important;
    border-color: var(--dm-accent-blue) !important;
  }

  /* Select dropdowns */
  select option {
    background-color: var(--dm-bg-elevated);
    color: var(--dm-text-primary);
  }

  /* Contact form specific */
  #contact-form input,
  #contact-form textarea {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-default) !important;
    color: var(--dm-text-primary) !important;
  }

  #contact-form input:focus,
  #contact-form textarea:focus {
    border-color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Borders & Dividers
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Default borders */
  [class*="border-gray-100"],
  [class*="border-gray-200"],
  [class*="border-gray-300"] {
    border-color: var(--dm-border-default) !important;
  }

  /* Horizontal rules */
  hr {
    border-color: var(--dm-border-default) !important;
  }

  /* Border on black elements */
  .border-black {
    border-color: var(--dm-border-subtle) !important;
  }

  /* Card borders */
  [class*="border"][class*="rounded"] {
    border-color: var(--dm-border-default) !important;
  }
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Pricing area background */
  #pricing {
    background: linear-gradient(to bottom, var(--dm-bg-base), var(--dm-bg-surface)) !important;
  }

  /* Pricing toggle - non-active state */
  #monthlyToggle:not(.bg-blue),
  #yearlyToggle:not(.bg-blue) {
    background-color: transparent !important;
    color: var(--dm-text-secondary) !important;
  }

  /* Pricing toggle - active state (with bg-blue) */
  #monthlyToggle.bg-blue,
  #yearlyToggle.bg-blue {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }

  /* Toggle container */
  #pricing [class*="rounded-[30px]"][class*="inline-block"][class*="shadow"] {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border-default);
  }

  /* Pricing cards */
  #pricing [class*="rounded-[20px]"][class*="bg-white"],
  #pricing .monthly-plan [class*="rounded-[20px]"],
  #pricing .yearly-plan [class*="rounded-[20px]"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Featured pricing card */
  #pricing [class*="border-blue"][class*="border-2"] {
    border-color: var(--dm-accent-blue) !important;
    box-shadow: var(--dm-shadow-glow);
  }

  /* Price text */
  #pricing .text-blue {
    color: var(--dm-accent-blue) !important;
  }

  /* Pricing card headings */
  #pricing h3,
  #pricing h4 {
    color: var(--dm-text-primary) !important;
  }

  /* Pricing card descriptions */
  #pricing p {
    color: var(--dm-text-secondary) !important;
  }

  /* Pricing features list */
  #pricing li {
    color: var(--dm-text-secondary) !important;
  }

  #pricing li p,
  #pricing li strong {
    color: var(--dm-text-secondary) !important;
  }

  /* Check marks in pricing */
  #pricing .flaticon-check-mark {
    color: var(--dm-accent-green) !important;
  }

  /* Scale plan note at bottom */
  #pricing [class*="bg-gray-50"],
  .monthly-plan [class*="bg-gray-50"],
  .yearly-plan [class*="bg-gray-50"] {
    background-color: var(--dm-bg-surface) !important;
  }
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Testimonials background */
  #testimonials {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Testimonial cards */
  #testimonials [class*="bg-white"],
  .testimonials-slider3 [class*="bg-white"] {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Star ratings */
  #testimonials [class*="bg-[#00B67A]"],
  .testimonials-slider3 [class*="bg-[#00B67A]"] {
    background-color: #00B67A !important;
  }

  /* Swiper pagination */
  .swiper-pagination-bullet {
    background-color: var(--dm-text-muted) !important;
    opacity: 1 !important;
  }

  .swiper-pagination-bullet-active {
    background-color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Contact area background */
  #contact {
    background-color: var(--dm-bg-base) !important;
  }

  /* Contact info cards */
  #contact [class*="bg-magnolia"],
  #contact .bg-magnolia {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Contact form container */
  #contact [class*="bg-amour"],
  #contact .bg-amour {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Contact info boxes */
  #contact [class*="border"][class*="rounded-[10px]"] {
    border-color: var(--dm-border-subtle) !important;
  }

  /* Contact icons */
  #contact [class*="bg-white"][class*="text-blue"] {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-accent-blue) !important;
  }

  #contact [class*="bg-white"][class*="text-blue"]:hover {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Footer background - keep dark */
  footer,
  .bg-black-pearl {
    background-color: #0a0f1a !important;
  }

  /* Footer text */
  footer .text-light-blue-grey,
  footer .text-white {
    color: var(--dm-text-secondary) !important;
  }

  footer h4 {
    color: var(--dm-text-primary) !important;
  }

  /* Footer links */
  footer a {
    color: var(--dm-text-secondary) !important;
  }

  footer a:hover {
    color: var(--dm-accent-blue) !important;
  }

  /* Footer border */
  footer [class*="border-gray-700"] {
    border-color: var(--dm-border-default) !important;
  }

  /* Social icons */
  footer [class*="bg-paragraph"] {
    background-color: var(--dm-bg-surface) !important;
  }

  footer [class*="bg-paragraph"]:hover {
    background-color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   CTA Sections
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Blue CTA sections - keep the blue background */
  [class*="bg-blue"][class*="py-[50px]"],
  [class*="bg-blue"][class*="py-[80px]"],
  [class*="bg-blue"][class*="py-[100px]"] {
    background-color: var(--dm-accent-blue) !important;
  }

  /* CTA button on blue background */
  [class*="bg-blue"] [class*="bg-white"] {
    background-color: white !important;
    color: var(--dm-accent-blue) !important;
  }

  [class*="bg-blue"] [class*="bg-white"]:hover {
    background-color: var(--dm-bg-base) !important;
    color: white !important;
  }
}

/* ==========================================================================
   Who It's For Section (Industries)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Industry cards section background */
  [class*="bg-magnolia"] {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Industry cards */
  [class*="bg-white"][class*="rounded-[10px]"][class*="p-[20px]"] {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Industry card headings */
  [class*="rounded-[10px]"] h3.text-black {
    color: var(--dm-text-primary) !important;
  }

  /* Industry icons */
  [class*="ri-"][class*="text-blue"] {
    color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   How It Works Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  #how-it-works {
    background-color: var(--dm-bg-base) !important;
  }

  /* Step numbers */
  #how-it-works [class*="bg-blue"][class*="rounded-full"] {
    background-color: var(--dm-accent-blue) !important;
  }

  /* Step headings */
  #how-it-works h3 {
    color: var(--dm-text-primary) !important;
  }

  /* Step descriptions */
  #how-it-works p {
    color: var(--dm-text-secondary) !important;
  }
}

/* ==========================================================================
   About Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  #about {
    background-color: var(--dm-bg-base) !important;
  }

  /* About feature icons */
  #about [class*="bg-white-smoke"],
  [class*="bg-white-smoke"] {
    background-color: var(--dm-bg-surface) !important;
  }

  #about [class*="bg-white-smoke"]:hover {
    background-color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Badges & Tags
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Blue badge/tag */
  [class*="bg-blue/10"] {
    background-color: rgba(59, 130, 246, 0.15) !important;
  }

  /* Green badge */
  [class*="bg-green-100"] {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: var(--dm-accent-green) !important;
  }

  .text-green-700 {
    color: var(--dm-accent-green) !important;
  }

  /* Red badge (problem section) */
  [class*="bg-red-50"] {
    background-color: rgba(248, 113, 113, 0.1) !important;
  }

  .text-red-500 {
    color: var(--dm-accent-red) !important;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Icons in general */
  [class*="flaticon-"],
  [class*="ri-"] {
    color: inherit;
  }

  /* Blue icons */
  .text-blue [class*="flaticon-"],
  .text-blue [class*="ri-"],
  [class*="flaticon-"].text-blue,
  [class*="ri-"].text-blue {
    color: var(--dm-accent-blue) !important;
  }

  /* Green check marks */
  .flaticon-check-mark {
    color: var(--dm-accent-green) !important;
  }
}

/* ==========================================================================
   Images & Media
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Site logo - invert for dark mode visibility */
  .site-logo,
  img[src*="echocue-logo"] {
    filter: brightness(0) invert(1);
  }

  /* Alternative: if the logo is mostly dark text, this makes it white */
  .navbar-area img[src*="logo"],
  footer img[src*="logo"] {
    filter: brightness(0) invert(1);
  }

  /* Add subtle filter to images to reduce brightness */
  img:not([src*="logo"]):not([src*="icon"]):not(.site-logo) {
    filter: brightness(0.9) contrast(1.05);
  }

  /* Hero/banner images */
  [id="home"] img:not(.site-logo) {
    filter: brightness(0.95);
  }
}

/* ==========================================================================
   Modals & Overlays
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Modal backdrop */
  [class*="bg-black"][class*="bg-opacity-50"],
  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75) !important;
  }

  /* Modal content */
  [class*="bg-white"][class*="rounded-[10px]"][class*="fixed"],
  .modal-content {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border-default);
  }

  /* Modal close button */
  [class*="modal"] button[class*="text-paragraph"] {
    color: var(--dm-text-secondary) !important;
  }

  [class*="modal"] button[class*="text-paragraph"]:hover {
    color: var(--dm-text-primary) !important;
  }
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Error states */
  .text-red-600,
  .text-red-500 {
    color: var(--dm-accent-red) !important;
  }

  /* Success states */
  .text-green-600,
  .text-green-500 {
    color: var(--dm-accent-green) !important;
  }

  /* Warning states */
  .text-yellow-600,
  .text-yellow-500 {
    color: var(--dm-accent-yellow) !important;
  }

  /* Alert backgrounds */
  [class*="bg-red-"] {
    background-color: rgba(248, 113, 113, 0.15) !important;
  }

  [class*="bg-green-"] {
    background-color: rgba(52, 211, 153, 0.15) !important;
  }
}

/* ==========================================================================
   Focus States & Accessibility
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Focus outline for all interactive elements */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--dm-accent-blue) !important;
    outline-offset: 2px !important;
  }

  /* Skip link (if present) */
  .skip-link:focus {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }
}

/* ==========================================================================
   Utility Overrides
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Force dark text colors */
  .dark\:text-white {
    color: var(--dm-text-primary) !important;
  }

  .dark\:text-gray-300,
  .dark\:text-gray-400 {
    color: var(--dm-text-secondary) !important;
  }

  /* Force dark backgrounds */
  .dark\:bg-black {
    background-color: var(--dm-bg-base) !important;
  }

  .dark\:bg-black-pearl {
    background-color: var(--dm-bg-elevated) !important;
  }

  .dark\:bg-gray-800 {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Dark borders */
  .dark\:border-gray-700,
  .dark\:border-gray-800 {
    border-color: var(--dm-border-default) !important;
  }
}

/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Smooth transitions for theme-aware elements */
  *,
  *::before,
  *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
  }

  /* Disable transitions for scroll animations */
  [data-cues] *,
  .swiper-slide * {
    transition: none;
  }
}

/* ==========================================================================
   Hero/Banner Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Hero section */
  #home {
    background-color: var(--dm-bg-base) !important;
  }

  /* Banner background vector - reduce visibility */
  #home img[src*="banner-vector"] {
    opacity: 0.3;
    filter: brightness(0.5);
  }

  /* Hero text */
  #home h1 {
    color: var(--dm-text-primary) !important;
  }

  #home p {
    color: var(--dm-text-secondary) !important;
  }

  /* User avatars ring color */
  #home .ring-white {
    --tw-ring-color: var(--dm-bg-elevated) !important;
  }

  /* Review stars */
  .text-yellow,
  [class*="text-yellow"] {
    color: #fbbf24 !important;
  }
}

/* ==========================================================================
   Benefits/Stats Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Benefits section cards */
  .bg-white[class*="rounded-[16px]"][class*="border-gray-100"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  .bg-white[class*="rounded-[16px]"][class*="border-gray-100"]:hover {
    border-color: var(--dm-accent-blue) !important;
  }

  /* Large stat numbers */
  .text-blue.text-\[42px\],
  .text-blue.text-\[48px\],
  [class*="font-bold"][class*="text-blue"] {
    color: var(--dm-accent-blue) !important;
  }

  /* Icon backgrounds in benefits */
  .bg-blue\/10 {
    background-color: rgba(59, 130, 246, 0.15) !important;
  }
}

/* ==========================================================================
   Features Section Gradients
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Key features section background gradient */
  #features {
    background: linear-gradient(to bottom, var(--dm-bg-base), var(--dm-bg-surface)) !important;
  }

  /* Feature section badge */
  #features .bg-blue\/10 {
    background-color: rgba(59, 130, 246, 0.2) !important;
  }

  /* Feature card icon gradients - keep them visible on dark */
  .feature-card [class*="bg-gradient-to-br"] {
    filter: brightness(1.1) saturate(1.1);
  }

  /* Feature card hover states */
  .feature-card:hover {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border-subtle) !important;
  }

  /* Feature list checkmarks */
  .feature-card .flaticon-check-mark {
    color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Integrations Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Integrations section background */
  #integrations {
    background-color: var(--dm-bg-base) !important;
  }

  /* Integration cards (gray-50 background) */
  #integrations .bg-gray-50,
  #integrations [class*="bg-gray-50"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  #integrations .bg-gray-50:hover,
  #integrations [class*="bg-gray-50"]:hover {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Integration card headings */
  #integrations h4 {
    color: var(--dm-text-primary) !important;
  }

  /* Integration feature boxes */
  #integrations .bg-gray-50[class*="rounded-[12px]"],
  #integrations [class*="p-[20px]"][class*="bg-gray-50"] {
    background-color: var(--dm-bg-elevated) !important;
  }

  #integrations [class*="hover:bg-blue/5"]:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
  }

  /* Integration feature titles */
  #integrations h3 {
    color: var(--dm-text-primary) !important;
  }

  /* Integration feature descriptions */
  #integrations p {
    color: var(--dm-text-secondary) !important;
  }

  /* Integration icons in boxes */
  #integrations .bg-blue\/10 {
    background-color: rgba(59, 130, 246, 0.2) !important;
  }

  /* SVG icons - make them visible */
  #integrations svg {
    filter: brightness(1.1);
  }
}

/* ==========================================================================
   Who It's For Section (Industries) - Enhanced
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Section background */
  .bg-white-smoke {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Industry cards */
  .bg-white-smoke .bg-white[class*="rounded-[10px]"],
  [class*="bg-white"][class*="dark:bg-black"][class*="rounded-[10px]"] {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Industry card headings - FIX text-black class */
  .bg-white-smoke h3.text-black,
  .bg-white-smoke h3[class*="text-black"],
  [class*="rounded-[10px]"] h3[class*="text-black"],
  [class*="p-[20px]"] h3[class*="text-black"] {
    color: var(--dm-text-primary) !important;
  }

  /* Industry card descriptions */
  .bg-white-smoke p.text-paragraph,
  [class*="rounded-[10px]"] p[class*="text-paragraph"] {
    color: var(--dm-text-secondary) !important;
  }

  /* Industry icons */
  .bg-white-smoke .text-blue[class*="ri-"],
  .bg-white-smoke i[class*="text-blue"] {
    color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Trust Stats Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Stats grid */
  .bg-white-smoke [class*="grid-cols-4"] .text-blue,
  .bg-white-smoke .text-blue[class*="font-bold"] {
    color: var(--dm-accent-blue) !important;
  }

  /* Stat descriptions */
  .bg-white-smoke [class*="grid-cols-4"] p[class*="text-paragraph"] {
    color: var(--dm-text-secondary) !important;
  }
}

/* ==========================================================================
   New Testimonials Section (Grid)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Testimonial grid cards */
  .bg-white-smoke .bg-white[class*="rounded-[10px]"][class*="p-[30px]"],
  .bg-white-smoke > div > div[class*="grid"] .bg-white {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Testimonial text */
  .bg-white-smoke [class*="p-[30px]"] p[class*="text-paragraph"] {
    color: var(--dm-text-secondary) !important;
  }

  /* Testimonial author name */
  .bg-white-smoke [class*="p-[30px]"] .text-black {
    color: var(--dm-text-primary) !important;
  }

  .bg-white-smoke [class*="p-[30px]"] p[class*="font-semibold"] {
    color: var(--dm-text-primary) !important;
  }
}

/* ==========================================================================
   Final CTA Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Blue CTA section - keep blue but slightly adjust */
  .bg-blue[class*="py-[50px]"],
  .bg-blue[class*="py-[80px]"],
  .bg-blue[class*="py-[100px]"],
  .bg-blue[class*="py-[120px]"] {
    background-color: #2563eb !important; /* Slightly deeper blue for dark mode */
  }

  /* CTA headings and text on blue background */
  .bg-blue h2,
  .bg-blue p {
    color: white !important;
  }

  /* White button on blue CTA */
  .bg-blue .bg-white {
    background-color: white !important;
    color: #2563eb !important;
  }

  .bg-blue .bg-white:hover {
    background-color: var(--dm-bg-base) !important;
    color: white !important;
  }
}

/* ==========================================================================
   Contact Section - Enhanced
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Contact info sidebar */
  #contact .bg-magnolia {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Contact info boxes border */
  #contact .border-black-pearl,
  #contact [class*="border-black-pearl"] {
    border-color: var(--dm-border-subtle) !important;
  }

  /* Contact form area background */
  #contact .bg-amour {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Contact form inputs - comprehensive */
  #contact-form input,
  #contact-form textarea {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-default) !important;
    color: var(--dm-text-primary) !important;
  }

  #contact-form input::placeholder,
  #contact-form textarea::placeholder {
    color: var(--dm-text-muted) !important;
  }

  #contact-form input:focus,
  #contact-form textarea:focus {
    border-color: var(--dm-accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2) !important;
  }

  /* Contact info icon buttons */
  #contact .bg-white.text-blue {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-accent-blue) !important;
  }

  #contact .bg-white.text-blue:hover {
    background-color: var(--dm-accent-blue) !important;
    color: white !important;
  }

  /* Contact section headings */
  #contact h2,
  #contact h3 {
    color: var(--dm-text-primary) !important;
  }

  /* Contact links */
  #contact a[href^="tel:"],
  #contact a[href^="mailto:"] {
    color: var(--dm-text-secondary) !important;
  }

  #contact a[href^="tel:"]:hover,
  #contact a[href^="mailto:"]:hover {
    color: var(--dm-accent-blue) !important;
  }

  /* Status message backgrounds */
  #contact-status.bg-green-100 {
    background-color: rgba(52, 211, 153, 0.15) !important;
  }

  #contact-status.bg-red-100 {
    background-color: rgba(248, 113, 113, 0.15) !important;
  }
}

/* ==========================================================================
   Pricing Section - Enhanced Toggle & Cards
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Pricing gradient background */
  #pricing {
    background: linear-gradient(to bottom, var(--dm-bg-base), var(--dm-bg-surface)) !important;
  }

  /* Toggle container background */
  #pricing .bg-white[class*="rounded-[30px]"][class*="shadow-md"] {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border-default);
  }

  /* Pricing cards - standard */
  #pricing .bg-white[class*="rounded-[20px]"],
  .monthly-plan .bg-white,
  .yearly-plan .bg-white {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Pricing card borders */
  #pricing .border-gray-200,
  #pricing [class*="border-gray-200"] {
    border-color: var(--dm-border-default) !important;
  }

  #pricing .border-gray-700,
  #pricing [class*="border-gray-700"] {
    border-color: var(--dm-border-subtle) !important;
  }

  /* Featured card glow */
  #pricing .border-blue[class*="border-2"],
  #pricing [class*="border-2"][class*="border-blue"] {
    border-color: var(--dm-accent-blue) !important;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  }

  /* Ring effect on featured card */
  #pricing .ring-blue\/20,
  #pricing [class*="ring-blue/20"] {
    --tw-ring-color: rgba(59, 130, 246, 0.15);
  }

  /* Green text for savings */
  #pricing .text-green-600 {
    color: var(--dm-accent-green) !important;
  }

  /* Scale plan note box */
  #pricing .bg-gray-50,
  .monthly-plan .bg-gray-50,
  .yearly-plan .bg-gray-50 {
    background-color: var(--dm-bg-surface) !important;
  }
}

/* ==========================================================================
   Testimonials Swiper Section
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Testimonial swiper section background */
  #testimonials {
    background-color: var(--dm-bg-surface) !important;
  }

  /* Testimonial swiper cards */
  #testimonials .bg-white,
  .testimonials-slider3 .bg-white {
    background-color: var(--dm-bg-elevated) !important;
  }

  /* Testimonial headings */
  #testimonials h2,
  #testimonials h3,
  #testimonials h5 {
    color: var(--dm-text-primary) !important;
  }

  /* Testimonial text */
  #testimonials p[class*="text-paragraph"] {
    color: var(--dm-text-secondary) !important;
  }
}

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

@media (prefers-color-scheme: dark) {
  /* Mobile collapse menu */
  #navbar-collapse {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-default) !important;
  }

  /* Mobile nav links */
  #navbar-collapse .nav-link {
    color: var(--dm-text-secondary) !important;
  }

  #navbar-collapse .nav-link:hover {
    color: var(--dm-accent-blue) !important;
  }

  /* Mobile auth buttons */
  #navbar-collapse .text-blue {
    color: var(--dm-accent-blue) !important;
  }
}

/* ==========================================================================
   Tables (if any)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  table {
    border-color: var(--dm-border-default);
  }

  th {
    background-color: var(--dm-bg-surface);
    color: var(--dm-text-primary);
    border-color: var(--dm-border-default);
  }

  td {
    background-color: var(--dm-bg-elevated);
    color: var(--dm-text-secondary);
    border-color: var(--dm-border-default);
  }

  tr:hover td {
    background-color: var(--dm-bg-surface);
  }
}

/* ==========================================================================
   Code/Pre Elements (if any)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  code,
  pre {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-default) !important;
  }
}

/* ==========================================================================
   Additional Global Text Color Overrides
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Ensure all text-black elements become light */
  .text-black {
    color: var(--dm-text-primary) !important;
  }

  /* Ensure all text-paragraph elements are muted */
  .text-paragraph {
    color: var(--dm-text-secondary) !important;
  }

  /* Dark gray text */
  .text-gray-400 {
    color: var(--dm-text-secondary) !important;
  }

  .text-gray-300 {
    color: var(--dm-text-secondary) !important;
  }

  /* Ensure strong elements are visible */
  strong,
  b {
    color: var(--dm-text-primary) !important;
  }
}

/* ==========================================================================
   Print Styles - Disable Dark Mode
   ========================================================================== */

@media print {
  /* Reset all dark mode overrides for printing */
  * {
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}