span {
    --color-indigo: hsl(261 93% 66%); /* #9057f9 */
    --color-rose: hsl(349 92% 71%);
    --color-inchworm: hsl(80 93% 66%);
    --color-aqua: hsl(171 68% 93%);

    --color-ms-light: hsl(261 98% 75%); /* indigo */
    --color-mw-light: hsl(80 93% 66%); /* inchworm */

    --color-ra-light: hsl(261 98% 75%); /* indigo */
    --color-rb-light: hsl(349 92% 71%); /* rose */
    --color-rc-light: hsl(80 93% 66%); /* inchworm */
    --color-rd-light: hsl(171 68% 86%); /* aqua */
    --color-re-light: hsl(278 98% 75%); /* indigo */
    --color-rf-light: hsl(17 92% 71%); /* rose */

    --color-ms-dark: hsl(261 64% 50%); /* indigo */
    --color-mw-dark: hsl(80 72% 38%); /* inchworm */

    --color-ra-dark: hsl(261 64% 50%); /* indigo */
    --color-rb-dark: hsl(349 64% 52%); /* rose */
    --color-rc-dark: hsl(80 72% 38%); /* inchworm */
    --color-rd-dark: hsl(171 42% 35%); /* aqua */
    --color-re-dark: hsl(278 64% 50%); /* indigo */
    --color-rf-dark: hsl(17 45% 40%); /* rose */
}

.meter.strong {
    background: var(--color-ms-light);
}

.meter.weak {
    background: var(--color-mw-light);
}

.rhyme.A {
    background: var(--color-ra-light);
}

.rhyme.B {
    background: var(--color-rb-light);
}

.rhyme.C {
    background: var(--color-rc-light);
}

.rhyme.D {
    background: var(--color-rd-light);
}

.rhyme.E {
    background: var(--color-re-light);
}

.rhyme.F {
    background: var(--color-rf-light);
}

@media (prefers-color-scheme: dark) {
    .meter.strong {
        background: var(--color-ms-dark);
    }

    .meter.weak {
        background: var(--color-mw-dark);
    }

    .rhyme.A {
        background: var(--color-ra-dark);
    }

    .rhyme.B {
        background: var(--color-rb-dark);
    }

    .rhyme.C {
        background: var(--color-rc-dark);
    }

    .rhyme.D {
        background: var(--color-rd-dark);
    }

    .rhyme.E {
        background: var(--color-re-dark);
    }

    .rhyme.F {
        background: var(--color-rf-dark);
    }
}