Update image filter color

Update the image filter in light mode to use the primary color.

Author: lovable-dev[bot]

src/components/Footer.tsx

@@ -16,7 +16,7 @@ const Footer = () => {
                 <img 
                   src={deviLogo} 
                   alt="Devitools Logo" 
-                  className={`h-10 object-contain ${theme !== "dark" ? "grayscale brightness-[0.6]" : ""}`}
+                  className={`h-10 object-contain ${theme !== "dark" ? "logo-filter-primary" : ""}`}
                 />
               </Link>
             </div>

src/components/Header.tsx

@@ -23,7 +23,7 @@ const Header = () => {
               <img
                 src={deviLogo}
                 alt="Devitools Logo"
-                className={`h-11 object-contain ${theme !== "dark" ? "grayscale brightness-[0.4]" : ""}`}
+                className={`h-11 object-contain ${theme !== "dark" ? "logo-filter-primary" : ""}`}
               />
             </Link>
           </div>

src/index.css

@@ -6,6 +6,11 @@
 All colors MUST be HSL.
 */
 
+/* Custom filters for logo */
+.logo-filter-primary {
+  filter: brightness(0) saturate(100%) invert(34%) sepia(98%) saturate(1000%) hue-rotate(250deg) brightness(95%) contrast(100%);
+}
+
 @layer base {
   :root {
     --background: 220 14% 96%;