[BUG] When using css variables for colors no smooth transition is created

[alina-boshkov]

1. Description
When using keyframe values for background color, regular color values work as expected and have a smooth transition between them.
But when updating to use css variables the color switch is instant without smooth transitioning.

CodeSandbox

2. Steps to reproduce
Steps to reproduce the behavior:

1. create a motion element.
2. create css vars for colors to transition from and to.
3. add these to the animate.
4. check the animation.

	<motion.div
      animate={{
        // background color switch is smooth
        // background: ["#565464", "#ff0083"],


        // background color switch isn't smooth
        background: ["var(--first-color)", "var(--second-color)"],
        transition: { delay: 1.4 }
      }}
      className="box"
    />

3. Expected behavior
css variables to have smooth transition the same as regular color values.

4. Video
https://github.com/framer/motion/assets/57999214/3eef5d96-056b-4958-9873-c31771fef71a

[180107072]

      <motion.div
        initial={{
          backgroundColor: "var(--first-color)"
        }}
        animate={{
          backgroundColor: "var(--second-color)",
          transition: { delay: 1.4 }
        }}
        className="box"
      />