transparency doesn't work with css variebles

Question

Color appears when rgba is not typed. But then how can I give it transparency?

:root {

     --color-primary-light: #7ed56f;
     --color-primary-dark: #28b485;
}


.header {
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(var(--color-primary-light), 0.8),
        rgba(var(--color-primary-dark), 0.8)
    );