:root {
    --logo-width: 284px;
    --logo-height: auto;

    /* standard colors */
    /* used for buttons */
    --primary: #2638C4;
    --primary-lighter: #2638C4;

    /* used for text fields labels and icons */
    --primary-variant: var(--primary);

    /* used for links on the page */
    --secondary: #2638C4;
    --secondary-lighter: #2638C4;
    --accent: #00856F;

    --show-hide-password-color: var(--accent);

    /* this overwrites the --fog color that is used by pbs.org */
    --fog: #f6f6f6;
}

/* LIGHT MODE */
body {
    --font-style: 'sans-serif';

    --bkg-color: var(--fog);
    --frg-color: #f2f2f2;

    background-color: var(--bkg-color);

    --text-color: #040613;

    --footer-bkg-color: var(--bkg-color);
    --text-footer-color: var(--text-color);

    --header-color: var(--primary-lighter);
    --header-hover-color: var(--primary);

    --label-color: var(--primary-variant);
    --link-color: var(--primary-lighter);
    --link-hover-color: var(--secondary);

    --button-fill-text-color: var(--white);

    --button-fill-bkg-color: var(--primary-lighter);
    --button-fill-bkg-active-color: var(--primary);
    --button-fill-bkg-hover-color: var(--primary);

    --button-fill-border-color: var(--primary-lighter);
    --button-fill-border-hover-color: var(--primary);
    --button-fill-border-active-color: var(--primary);

    --button-no-fill-bkg-color: transparent;
    --button-no-fill-bkg-active-color: var(--primary);
    --button-no-fill-bkg-hover-color: var(--primary);

    --button-no-fill-border-color: var(--primary-lighter);
    --button-no-fill-border-hover-color: var(--primary);
    --button-no-fill-border-active-color: var(--primary);

    --button-no-fill-text-color: var(--primary-lighter);
    --button-no-fill-text-active-color: var(--fog);
    --button-no-fill-text-hover-color: var(--fog);

    --button-border-radius: 30px;

    --icon-user: url("../img/user_icon.svg");
    --icon-badge: url("../img/badge_icon.svg");
    --icon-lock: url("../img/lock_icon.svg");
    --icon-arrow-right: url("../img/arrow_right.svg");
    --icon-arrow-right-text: url("../img/arrow_right_text.svg");
    --icon-pencil: url("../img/pencil_icon.svg");
    --icon-collapse: url("../img/collapse_icon.svg");

    --checkmark-color: var(--primary);
    --container-color: var(--frg-color);

    --wrapper-color: var(--bkg-color);
}

.content-wrapper .help-text, .footer-container .help-text {
    color: var(--text-color);
}

form input,
#secondFactorCodeChangeEmailInput,
#secondFactorCodeLoginInput,
#secondFactorCodeRegistrationInput,
#changeEmailInput {
    border-radius: 8px;
}