.anonymousFrog {
    /* Default: decomp.me purple */
    --accent-hue: 298;
    --accent-saturation: 0.75;
    --accent-lightness: 0.4862;
    --frog-pupil: #292f33;
    --frog-primary:
        hsl(
            var(--accent-hue),
            calc(100% * var(--accent-saturation)),
            calc(100% * var(--accent-lightness))
        );

    /* Pure CSS doesn't have anything quite as slick as Sass' color.scale [as used in theme.scss]
       for creating variations of a color. As such, we have to do a bit of the maths ourselves. */
    --frog-secondary:
        hsl(
            var(--accent-hue),
            calc(100% * (0.3 * (1 - var(--accent-saturation)) + var(--accent-saturation))), /* 30% towards maximum saturation */
            calc(100% * (0.5 * (1 - var(--accent-lightness)) + var(--accent-lightness))) /* 50% towards maximum lightness */
        );
    --frog-nose:
        hsl(
            calc(100% * (-0.2 * (var(--accent-saturation)) + var(--accent-saturation))), /* 20% towards minimum saturation */
            calc(100% * (-0.4 * (var(--accent-lightness)) + var(--accent-lightness)))   /* 40% towards minimum lightness */
        );
}
