/*Use https://codepen.io/sosuke/pen/Pjoqqp to generate css Filter from hex color value when generating new theme.
        using SVGs in img tags is more performant but has this downfall where you cannot directly access the fill element
        in the SVG path to alter color using a normal hex value. To keep all themeing in CSS a filter is used instead.
    */

:root, html[data-theme='light'] {
    --theme-primary-color: #004576;
    --theme-secondary-color: #109bc5;
    --theme-btn-primary-color: #004576;
    --theme-btn-primary-text-color: #FFFFFF;
    --theme-btn-primary-hover-color: #006BB4;
    --theme-btn-primary-hover-text-color: #FFFFFF;
    --theme-btn-primary-disabled-color: #9DADBC;
    --theme-btn-secondary-color: #004576;
    --theme-btn-secondary-hover-color: #006BB4;
    --theme-btn-secondary-disabled-color: #9DADBC;
    --theme-contact-us-link-color: #004576;
    --theme-link-disabled-color: #9DADBC;
    --theme-body-text-color: var(--bs-body-color);
    --theme-muted-text-color: #999999;
    --theme-secondary-text-color: #999999;
    --theme-label-text-color: #000000;
    --theme-label-text-transform: uppercase;
    --theme-input-text-color: #000000;
    --theme-input-border-color: #999999;
    --theme-input-hint-text-color: #666666;
    --theme-input-disabled-text-color: #9DADBC;
    --theme-input-disabled-border-color: #EEEEEE;
    --theme-input-disabled-background-color: #FFFFFF;
    --theme-input-background-color: #FFFFFF;
    --theme-error-message-input-border-color: #DD5F5F;
    --theme-error-message-color-filter: invert(63%) sepia(21%) saturate(5569%) hue-rotate(318deg) brightness(88%) contrast(98%);
    --theme-input-icon-color-filter: invert(41%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(96%) contrast(94%);
    --theme-input-icon-disabled-color-filter: invert(41%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(96%) contrast(94%);
    --theme-font-family: 'Work Sans';
    --theme-scrollbar-color: #F2FAFF;
    --theme-body-background-color: #EEEEEE;
    --theme-hero-background-color: #004576;
    --theme-hero-text-color: #FFFFFF;
    --theme-hero-link-hover: #109bc5;
    --theme-header-row-background-color: #999999;
    --theme-header-row-text-color: #000000;
    --theme-status-tag-background-color: #DDDDDD;
    --theme-navbar-background-color: #FFFFFF;
    --theme-card-background-color: #FFFFFF;
    --theme-card-text-color: #000000;
    --theme-list-group-text-color: #000000; /*Reach out on this one Spec was incorrect that this is non configurable*/
    --theme-list-selected-border-color: #109bc5;
    --theme-list-selected-text-color: #000000;
    --theme-global-footer-color: #000000;
    --theme-policy-footer-color: #004576;
    /*Logo*/
    --theme-logo-image-path: url(../images/logos/C0097-LightDark.svg);
}