CSS Transition run slower on fill - css

Question

I have a class that change the color of a div and the fill of a svg, with a transition of 0.5s. But when I try it the transition on the fill was noticeable slower. I try to match it changing the transition of the element to 0.1469s. But its not perfect and kinda break the effect I was looking for.
.main-color{
background-color: var(--main-dark-color);
fill: var(--main-dark-color);
color: var(--main-light-color);
transition: all .5s;
}
.main-color.light {
background-color: var(--main-light-color);
fill: var(--main-light-color);
color: var(--main-dark-color);
}
.svg{
transition: all 0.1469s; /* This is the one running slower */
}
Any idea to fix this?
const swapColor = document.querySelectorAll(".main-color");
window.addEventListener("keydown", function(e) {
swapColor.forEach(el => {
el.classList.toggle("light");
})
});
.main-color {
fill: red;
background-color: blue;
transition: all 5s;
}
.main-color.light {
fill: blue;
background-color: red;
}
.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 30s;
}
#keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
<div class="main-color">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<path x="1" y="7" id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</svg>
</div>