Use multiple counter-reset rules on one element

Question

I have two different CSS files, and I want body to reset two counters:

This file is linked before:

body {
    counter-reset: counter-one;
}

and this one after

body {
    counter-reset: counter-two; /* Doesn't work, because it overrides the first rule! */
}

I can't make a single rule with both counters, they need to be in separate files. How can I reset the two counters, and only modify the second file? If possible, it should also work with any number of counters and any number of files. Using JS (that only access document) is possible.

This works:

/* First file*/
body {
    --counter-reset: counter-one;
}


/* Second file*/
body {
    counter-reset: counter-two var(--counter-reset);
}

but I would like the first file to only have counter-reset: counter-one;

I also considered wrapping all body's content in other elements, but that's not convenient.