[Dúvida] O Linear gradient azul nao funciona!

Ola, eu nao consigo ver onde errei para que a variavel nao funcione.

css(styles):

@import url(./style.s/header.css);
@import url(./style.s/main.css);
@import url(./style.s/footer.css);

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --cdf: #EBECEE;
    --cfp: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
    --cbp: #ffffff;
    --clr: #EB9B00;
    --cp: #000000;
    --fp:  "Poppins", sans-serif;
    --ft: "Josefin Sans", sans-serif;
}
body {
    background-color: var(--cdf);
    color: var(--cfp);
    font-family: var(--fp);
    font-size: 1rem;
}

a {text-decoration: none;}

css(header):

    .cabecalio__cabecalio__lst-opc__list__topc {
        padding: 1.5rem ;
        background-color: var(--cbp);
        font-family: var(--fp);
        color: var(--cfp);
        font-family: var(--fp);
    }

se puderem me ajudar, ficaria imensamente agradecido!