How to change the standard blue hover and frame effect?

I am using Vaadin version 14.6.3.

Hover and selection effect

In the image above you can see that my app has a greenish color scheme, but the context menu I implemented will always have a blue hover effect and also some blue frame for the active item.

I tried to play around with stlyes.css and shared-styles.js, but I could not manage to find the correct place where to add/overwrite the standard blue "lumo" behavior.

What can I do to customize this behavior to a color of my choice?

@Route(Pages.CUSTOMER_ROUTE)
@StyleSheet("styles.css")
@PageTitle(Pages.CUSTOMER_PAGE_TITLE)
@JsModule("./shared-styles.js")
public class CustomerUI extends VerticalLayout implements RouterLayout, PageConfigurator, RoleSecured, AfterNavigationObserver {...}

Thank you for your help.

You have very likely only set the primary color and not also the 50% and 10% shade colors. See https://vaadin.com/docs/latest/styling/lumo/design-tokens/color/#primary

E.g. try:

html, :host {
    --lumo-primary-color: hsl(122, 96%, 47%);
    --lumo-primary-color-50pct: hsl(122, 96%, 47%, 0.5);
    --lumo-primary-color-10pct: hsl(122, 96%, 47%, 0.1);
}