It appears to me that CSS variables are not supported in margin boxes? I am trying to set color and font-size with a CSS variables in header and footer, but can't get it to work. It's working when I hardcode the values.

This works for me:

:root {
    --my-color: green;
    --my-font-size: 20pt
}

@page {
    @top {
        color: var(--my-color);
        font-size: var(--my-font-size);
        content: "Header Text"
    }
}

Thanks for your response mikeday. You are right. I tried adding variables to root in my css file and that fixes it. However, my css variables are injected through the style element in the document header through javascript code. I assume this is what causes the discrepancy? The injection method is working for other elements I am using in prince.

I have a workaround though. I can use element instead of string as content and add styling to the element instead of to the margin box.