/*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.
        Mapping reference used in this theme:
             #666666 = invert(43%) sepia(0%) saturate(1%) hue-rotate(170deg) brightness(90%) contrast(89%)
             #999999 = invert(64%) sepia(0%) saturate(21%) hue-rotate(149deg) brightness(96%) contrast(88%)
             #DD5F5F = invert(63%) sepia(21%) saturate(5569%) hue-rotate(318deg) brightness(88%) contrast(98%)
    */


/* Color Palette
    Blue : #243665
    Green :  #14A79D
    Green Light : #8AD7BD
    light blue #6fa8dc

*/


:root, html[data-theme='light'] {
    --theme-primary-color: #2E4456;
    --theme-secondary-color: #6CAFEE;
    --theme-btn-primary-color: #2E4456;
    --theme-btn-primary-text-color: #FFFFFF;
    --theme-btn-primary-hover-color: #2E4456;
    --theme-btn-primary-disabled-color: #8C8C8C;
    --theme-btn-secondary-color: #802E26;
    --theme-btn-secondary-hover-color: #802E26;
    --theme-btn-secondary-disabled-color: #BBBCBC;
    --theme-contact-us-link-color: #6FA8DC;
    --theme-link-disabled-color: #BBBCBC;
    --theme-body-text-color: #000000; /*var(--bs-body-color);*/ /*NOT IN SPEC*/
    --theme-muted-text-color: #8C8C8C;
    --theme-secondary-text-color: #6CAFEE;
    --theme-label-text-color: #8C8C8C;
    --theme-label-text-transform: uppercase;
    --theme-input-text-color: #000000;
    --theme-input-border-color: #8C8C8C;
    --theme-input-hint-text-color: #666666;
    --theme-input-disabled-text-color: #BBBCBC;
    --theme-input-disabled-border-color: #BBBCBC;
    --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(42%) sepia(1%) saturate(0%) hue-rotate(18deg) brightness(93%) contrast(89%);
    --theme-input-icon-disabled-color-filter: invert(42%) sepia(1%) saturate(0%) hue-rotate(18deg) brightness(93%) contrast(89%);
    --theme-font-family: 'Work Sans';
    --theme-scrollbar-color: #8C8C8C;
    --theme-body-background-color: #FFFFFF;
    --theme-hero-background-color: #2E4456;
    --theme-hero-text-color: #FFFFFF;
    --theme-hero-link-hover: #6CAFEE; /*should match secondary color UNLESS hero background is secondary color*/

    --theme-header-row-background-color: #8C8C8C;
    --theme-header-row-text-color: #FFFFFF;
    --theme-status-tag-background-color: #6CAFEE;
    --theme-navbar-background-color: #FFFFFF;
    --theme-card-background-color: #FFFFFF;
    --theme-card-text-color: #2E4456;
    --theme-list-group-text-color: #000000;
    --theme-list-selected-border-color: 6CAFEE;
    --theme-list-selected-text-color: #2E4456;
    --theme-global-footer-color: #2E4456;
    --theme-policy-footer-color: #8C8C8C;
    /*Logo*/
    --theme-logo-image-path: url(../images/logos/C0095-LightDark.svg);
}

:root, html[data-theme='dark'] {
    --theme-primary-color: #2E4456;
    --theme-secondary-color: #6CAFEE;
    --theme-btn-primary-color: #6CAFEE;
    --theme-btn-primary-text-color: #2E4456;
    --theme-btn-primary-hover-color: #6CAFEE;
    --theme-btn-primary-disabled-color: #8C8C8C;
    --theme-btn-secondary-color: #FFFFFF;
    --theme-btn-secondary-hover-color: #6CAFEE;
    --theme-btn-secondary-disabled-color: #BBBCBC;
    --theme-contact-us-link-color: #6FA8DC;
    --theme-link-disabled-color: #BBBCBC;
    --theme-body-text-color: #000000; /*var(--bs-body-color);*/ /*NOT IN SPEC*/
    --theme-muted-text-color: #8C8C8C;
    --theme-secondary-text-color: #2E4456;
    --theme-label-text-color: #8C8C8C;
    --theme-label-text-transform: uppercase;
    --theme-input-text-color: #000000;
    --theme-input-border-color: #8C8C8C;
    --theme-input-hint-text-color: #666666;
    --theme-input-disabled-text-color: #BBBCBC;
    --theme-input-disabled-border-color: #BBBCBC;
    --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(42%) sepia(1%) saturate(0%) hue-rotate(18deg) brightness(93%) contrast(89%);
    --theme-input-icon-disabled-color-filter: invert(42%) sepia(1%) saturate(0%) hue-rotate(18deg) brightness(93%) contrast(89%);
    --theme-font-family: 'Work Sans';
    --theme-scrollbar-color: #8C8C8C;
    --theme-body-background-color: #2E4456;
    --theme-hero-background-color: #6CAFEE;
    --theme-hero-text-color: #2E4456;
    --theme-hero-link-hover: #537895; /*should match secondary color UNLESS hero background is secondary color*/

    --theme-header-row-background-color: #8C8C8C;
    --theme-header-row-text-color: #000000;
    --theme-status-tag-background-color: #6CAFEE;
    --theme-navbar-background-color: #6CAFEE;
    --theme-card-background-color: #FFFFFF;
    --theme-card-text-color: #2E4456;
    --theme-list-group-text-color: #333333;
    --theme-list-selected-border-color: #6CAFEE;
    --theme-list-selected-text-color: #FFFFFF;
    --theme-global-footer-color: #000000;
    --theme-policy-footer-color: #8C8C8C;
    /*Logo*/
    --theme-logo-image-path: url(../images/logos/C0095-LightDark.svg);
}