You're writing twice as much CSS as you need to

Modern CSS offers two approaches for dynamic color manipulation: relative colors and color-mix(). While relative colors let you modify a color's lightness channel, they can break in dark/light mode scenarios — darkening an already-dark button produces no visible hover effect. color-mix() solves this by blending a button's background color toward a neutral that flips between light and dark schemes, automatically producing the correct contrast direction. By mixing in just 20% of the neutral color, you get a subtle, scheme-aware hover effect without writing separate CSS for light and dark modes.