Override Fluent Forms style with GeneratePress Customizer style

Hi. I am trying to drive the colors of the form fields in Fluent Forms with the colors defined in the Customizer.

Problem is that GP is generating CSS like this for when I click into a textbox (focus):

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    color: white;
    background-color: black;
    border-color: black;
}

And Fluent Forms is generating CSS like this.

.ff-default .ff-el-form-control:focus {
    background-color: #fff;
    border-color: var(--fluentform-primary);
    color: var(--fluentform-secondary);
    outline: none;
}

So it looks like Fluent Form’s specificity or order in the cascade is winning out.

Ideally, I would love to append “.ff-default .ff-el-form-control:focus” to the selectors that GeneratePress generates so that it reads the global colors defined in the Customizer.

The only solution I have now is to write custom CSS that overrides both Fluent Forms’ and GeneratePress’ settings. Any alternate ideas? Thanks for your time.