/*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%)
             #DD5F5F = invert(63%) sepia(21%) saturate(5569%) hue-rotate(318deg) brightness(88%) contrast(98%)
    */


:root, html[data-theme='light'] {
    --theme-primary-color: #394855;
    --theme-secondary-color: #009EF7;

    --theme-btn-primary-color: #537895;
    --theme-btn-primary-text-color: #FFFFFF;
    --theme-btn-primary-hover-color: #394855;
    --theme-btn-primary-hover-text-color: #FFFFFF;
    --theme-btn-primary-disabled-color: #9DADBC;

    --theme-btn-secondary-color: #537895;
    --theme-btn-secondary-hover-color: #394855;
    --theme-btn-secondary-disabled-color: #9DADBC;

    --theme-contact-us-link-color: #000000;
    --theme-link-disabled-color: #9DADBC;

    --theme-body-text-color: #212529;
    --theme-muted-text-color: #6c757d;
    --theme-secondary-text-color: #6c757d;
    --theme-label-text-color: #666666;
    --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(43%) sepia(0%) saturate(1%) hue-rotate(170deg) brightness(90%) contrast(89%);
    --theme-input-icon-disabled-color-filter: invert(43%) sepia(0%) saturate(1%) hue-rotate(170deg) brightness(90%) contrast(89%);
    --theme-font-family: 'Work Sans';

    --theme-scrollbar-color: #F2FAFF;
    --theme-body-background-color: #F2FAFF;
    --theme-hero-background-color: #394855;
    --theme-hero-text-color: #F8F9FA;
    --theme-hero-link-hover: #DDDDDD; /*should match secondary color UNLESS hero background is secondary color*/

    --theme-header-row-background-color: #8C8C8C;
    --theme-header-row-text-color: #394855;
    --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: #212529;
    --theme-list-selected-border-color: #009EF7;
    --theme-list-selected-text-color: #394855;

    --theme-global-footer-color: #394855;
    --theme-policy-footer-color: #394855;

    /*Logo*/
    --theme-logo-image-path: url(../images/logos/C0053-LightDark.svg);
}

html[data-theme='dark'] {
    --theme-primary-color: #000000;
    --theme-secondary-color: #333333;

    --theme-btn-primary-color: #000000;
    --theme-btn-primary-text-color: #FFFFFF;
    --theme-btn-primary-hover-color: #333333;
    --theme-btn-primary-hover-text-color: #FFFFFF;
    --theme-btn-primary-disabled-color: #999999;

    --theme-btn-secondary-color: #000000;
    --theme-btn-secondary-hover-color: #333333;
    --theme-btn-secondary-disabled-color: #999999;

    --theme-link-disabled-color: #BBBCBC;

    --theme-body-text-color: #000000;
    --theme-muted-text-color: #6c757d;
    --theme-label-text-color: #666666;
    --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: #999999; 
    --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(43%) sepia(0%) saturate(1%) hue-rotate(170deg) brightness(90%) contrast(89%);
    --theme-input-icon-disabled-color-filter: invert(43%) sepia(0%) saturate(1%) hue-rotate(170deg) brightness(90%) contrast(89%);
    --theme-font-family: 'Work Sans';

    --theme-scrollbar-color: #666666;
    --theme-body-background-color: #F8F8F8;
    --theme-hero-background-color: #000000;
    --theme-header-row-background-color: #DDDDDD;
    --theme-header-row-text-color: #000000;
    --theme-navbar-background-color: #FFFFFF;
    --theme-card-background-color: #FFFFFF;
    --theme-card-text-color: #000000;

    --theme-list-group-text-color: #333333;
    --theme-list-selected-border-color: #000000;
    --theme-list-selected-text-color: #000000;

    --theme-status-tag-background-color: #DDDDDD;

    --theme-global-footer-color: #000000;
    --theme-policy-footer-color: #282828;

    /*Logo*/
    --theme-logo-image-path: url(../images/logos/C0053-LightDark.svg);
}