Sounds like you need to have code generating it dynamically.

I think you need to have at least another class to make it work and use something like:

.note {background:var(--color-1)}

.note.quote {background:var(--color-2)}

.note.quote .note {background:var(--color-3)}

or setup a var on the element itself, eg:

l.style.setProperty('--color','var(--color-even)';

and use:

.note {

--color:var(--color-odd)

background:var(--color)

}