AWS Cognito - How to customise the input fields?

THE SITUATION:

In my Vue app, I am using the aws authenticator to handle login/signup.
I need to customize the style, but it's a bit tricky since its structure is made of shadow DOM.

MODIFYING VARIABLES:

So far I only managed to modify some amplify variables.

This is how I did it:

:root {
  --amplify-background-color: transparent;
  --amplify-secondary-color: white;
  --amplify-primary-contrast: white;
  --amplify-primary-color: #E00C1D;
}

Side note. Targeteting amplify-sign-in instead of :root would also work, but logically that style would apply only for the login form and not for the signup (amplify-sign-up) form.
Custom style targeting :root applies to both login and signup form.

CUSTOMIZE THE INPUT FIELD:

Here is where I got stuck. The color of the text inside the input is given by the --amplify-secondary-color var, which in my case needs to be white. But in this way the text of the input is not visible on a white background.

This is the HTML structure of the amplify-sign-in. The input is inside amplify-input.

This is the style for the .input class. As you can see the color is controlled by the --color var

This is what the --color var refers to:

MY ATTEMPTS:

I have tried several approaches but none worked. I tried to target the .input class, the input, the amplify-input, or to change the --color var.

These are some attempts:

:host {
  --color: red !important;
}

:host(.input) {
  color: red !important;
  --color: red !important;
}

amplify-input {
  --color: red !important;

  & .input {
    color:red !important;
    --color: red !important;
  }
}

THE DOCS:

This are the docs concerning the css customization. Unfortunately the documentation is quite poor

THE QUESTION:

How can I modify the input text of the aws authenticator?

from AWS Cognito - How to customise the input fields?