@import 'variables.css';


@media(prefers-color-scheme: light) {
  :root {
    --mobile-background: url('../images/background_mobile-light.webp') lightgray top left / cover no-repeat;
    --background-overlay: url('../images/overlay_page-light.svg') top right / cover no-repeat;
    --footer-background: url('../images/overlay_footer-light.svg') top right / cover no-repeat;
    --select-form-background: url('../images/form-icon.png') no-repeat scroll;
    --checkbox-checked-icon: url('../images/checkbox-check-icon.svg') center / contain no-repeat;

    --display-on-dark-theme: none;
    --display-on-light-theme: flex;
  }
}




@media(prefers-color-scheme: dark) {
  :root {
    --mobile-background: url('../images/background_mobile-dark.webp') lightgray top left / cover no-repeat;
    --background-overlay: url('../images/overlay_page-dark.svg') top right / cover no-repeat;
    --footer-background: url('../images/overlay_footer-dark.webp') top right / cover no-repeat;
    --select-form-background: url('../images/form-icon-dark.svg') no-repeat scroll;
    --checkbox-checked-icon: url('../images/checkbox-check-icon-dark.svg') center / contain no-repeat;

    --display-on-dark-theme: flex;
    --display-on-light-theme: none;

    --typography-color-default-neutral: var(--typography-color-default-neutral-dark, #E2E2E4);
    --typography-color-transparent: var(--typography-color-transparent-dark, #FFFFFF00);

    --button-color-discreet-background-enabled: var(--button-color-discreet-background-enabled-dark, rgba(236, 244, 255, 0.00));
    --button-color-discreet-background-hover: var(--button-color-discreet-background-hover-dark, rgba(236, 244, 255, 0.08));
    --button-color-discreet-background-pressed: var(--button-color-discreet-background-pressed-dark, rgba(236, 244, 255, 0.16));
    --button-color-discreet-content-enabled: var(--button-color-discreet-content-enabled-dark, #9AC2FE);
    --button-color-discreet-content-hover: var(--button-color-discreet-content-hover-dark, #B3D1FE);
    --button-color-discreet-content-pressed: var(--button-color-discreet-content-pressed-dark, #CCE0FF);
    
    --button-color-secondary-background-enabled: var(--button-color-secondary-background-enabled-dark, rgba(236, 244, 255, 0.00));
    --button-color-secondary-border-enabled: var(--button-color-secondary-border-enabled-dark, #61636B);
    --button-color-secondary-content-enabled: var(--button-color-secondary-content-enabled-dark, #9AC2FE);
    --button-color-secondary-background-hover: var(--button-color-secondary-background-hover-dark, rgba(236, 244, 255, 0.08));
    --button-color-secondary-border-hover: var(--button-color-secondary-border-hover-dark, #B3D1FE);
    --button-color-secondary-content-hover: var(--button-color-secondary-content-hover-dark, #B3D1FE);
    --button-color-secondary-background-pressed: var(--button-color-secondary-background-pressed-dark, rgba(236, 244, 255, 0.16));
    --button-color-secondary-border-pressed: var(--button-color-secondary-border-pressed-dark, #CCE0FF);
    --button-color-secondary-content-pressed: var(--button-color-secondary-content-pressed-dark, #CCE0FF);
    --button-color-secondary-background-disabled: var(--button-color-secondary-background-disabled-dark, rgba(236, 244, 255, 0.00));
    --button-color-secondary-border-disabled: var(--button-color-secondary-border-disabled-dark, rgba(97, 99, 107, 0.48));
    --button-color-secondary-content-disabled: var(--button-color-secondary-content-disabled-dark, rgba(154, 194, 254, 0.48));
    
    --button-color-secondary-border-enabled-error-button: var(--button-color-secondary-border-enabled-error-button-dark, rgba(230, 230, 230, 1));
    --button-color-secondary-content-enabled-error-button: var(--button-color-secondary-content-enabled-error-button-dark, rgba(255, 255, 255, 1));
    --button-color-secondary-background-hover-error-button: var(--button-color-secondary-background-hover-error-button-dark, rgba(236, 244, 255, 0.08));
    --button-color-secondary-background-pressed-error-button: var(--button-color-secondary-background-pressed-error-button-dark, rgba(236, 244, 255, 0.16));

    --button-color-primary-border-enabled: var(--button-color-primary-border-enabled-dark, rgba(255, 255, 255, 0.00));
    --button-color-primary-background-enabled: var(--button-color-primary-background-enabled-dark, #9AC2FE);
    --button-color-primary-content-enabled: var(--button-color-primary-content-enabled-dark, #292C32);
    --button-color-primary-shadow-enabled: var(--button-color-primary-shadow-enabled-dark, rgba(154, 194, 254, 0.16));
    --button-color-primary-background-hover: var(--button-color-primary-background-hover-dark, #B3D1FE);
    --button-color-primary-shadow-hover: var(--button-color-primary-shadow-hover-dark, rgba(179, 209, 254, 0.32));
    --button-color-primary-content-hover: var(--button-color-primary-content-hover-dark, #171B26);
    --button-color-primary-background-pressed: var(--button-color-primary-background-pressed-dark, #CCE0FF);
    --button-color-primary-shadow-pressed: var(--button-color-primary-shadow-pressed-dark, rgba(204, 224, 255, 0.32));
    --button-color-primary-content-pressed: var(--button-color-primary-content-pressed-dark, #0C0F18);
    --button-color-primary-border-disabled: var(--button-color-primary-border-disabled-dark, rgba(255, 255, 255, 0.00));
    --button-color-primary-background-disabled: var(--button-color-primary-background-disabled-dark, rgba(154, 194, 254, 0.48));
    --button-color-primary-content-disabled: var(--button-color-primary-content-disabled-dark, rgba(51, 51, 51, 0.48));

    --navbar-color-surface-item-enabled: var(--navbar-color-surface-item-enabled-dark, rgba(5, 87, 213, 0.00));
    --navbar-color-surface-item-hover: var(--navbar-color-surface-item-hover-dark, rgba(255, 255, 255, 0.08));
    --navbar-color-surface-item-pressed: var(--navbar-color-surface-item-pressed-dark, rgba(255, 255, 255, 0.12));
    --navbar-color-content-item-enabled: var(--navbar-color-content-item-enabled-dark, #FFF);

    --footer-color-content: var(--footer-color-content-dark, #E2E2E4);

    --textField-color-background-enabled: var(--textField-color-background-enabled-dark, #171B26);
    --textField-color-border-enabled: var(--textField-color-border-enabled-dark, #61636B);
    --textField-color-border-hover: var(--textField-color-border-hover-dark, #9AC2FE);
    --textField-color-border-pressed: var(--textField-color-border-pressed-dark, #B3D1FE);
    --textField-color-input-enabled: var(--textField-color-input-enabled-dark, #E2E2E4);
    --textField-color-help-enabled: var(--textField-color-help-enabled-dark, #D4D5D8);

    --label-color-text: var(--label-color-text-dark, #E2E2E4);
    --scrollbar-color: var(--scrollbar-color-dark, #999 #171B26);
    --divider-color-medium: var(--divider-color-medium-dark, #61636B);

    --banner-error-background-color: var(--banner-error-background-color-dark, rgba(189, 1, 0, 1));
    --banner-box-shadow-color: var(--banner-box-shadow-color-dark, rgba(0, 0, 0, 0.08));
    --banner-color-text: var(--banner-color-text-dark, #FFF);

    --listItem-color-background-enabled: var(--listItem-color-background-enabled-dark, #171B26);
    --listItem-color-border-enabled: var(--listItem-color-border-enabled-dark, #292C32);
    --listItem-color-content-enabled: var(--listItem-color-content-enabled-dark, #E2E2E4);

    --checkbox-color-control-border-enabled: var(--checkbox-color-control-border-enabled-dark, #61636B);
    --checkbox-color-control-border-hover: var(--checkbox-color-control-border-hover-dark, #B3D1FE);
    --checkbox-color-control-border-pressed: var(--checkbox-color-control-border-pressed-dark, #CCE0FF);
    --checkbox-color-control-background-unselected-enabled: var(--checkbox-color-control-background-unselected-enabled-dark, rgba(236, 244, 255, 0.00));
    --checkbox-color-control-background-unselected-hover: var(--checkbox-color-control-background-unselected-hover-dark, rgba(236, 244, 255, 0.08));
    --checkbox-color-control-background-unselected-pressed: var(--checkbox-color-control-background-unselected-pressed-dark, rgba(236, 244, 255, 0.16));
    --checkbox-color-control-background-selected-enabled: var(--checkbox-color-control-background-selected-enabled-dark, #0557D5);
    --checkbox-color-control-background-selected-hover: var(--checkbox-color-control-background-selected-hover-dark, #013D98);
    --checkbox-color-control-background-selected-pressed: var(--checkbox-color-control-background-selected-pressed-dark, #012865);
    --checkbox-color-label-enabled: var(--checkbox-color-label-enabled-dark, #E2E2E4);
    --checkbox-color-label-hover: var(--checkbox-color-label-hover-dark, #EFEFF0);
    --checkbox-color-label-pressed: var(--checkbox-color-label-pressed-dark, #FCFCFD);

    --radio-color-control-border-enabled: var(--radio-color-control-border-enabled-dark, #61636B);
    --radio-color-control-border-hover: var(--radio-color-control-border-hover-dark, #B3D1FE);
    --radio-color-control-border-pressed: var(--radio-color-control-border-pressed-dark, #CCE0FF);
    --radio-color-control-background-unselected-enabled: var(--radio-color-control-background-unselected-enabled-dark, rgba(236, 244, 255, 0.00));
    --radio-color-control-background-unselected-hover: var(--radio-color-control-background-unselected-hover-dark, rgba(236, 244, 255, 0.08));
    --radio-color-control-background-unselected-pressed: var(--radio-color-control-background-unselected-pressed-dark, rgba(236, 244, 255, 0.16));
    --radio-color-control-background-selected-enabled: var(--radio-color-control-background-selected-enabled-dark, #0557D5);
    --radio-color-control-background-selected-hover: var(--radio-color-control-background-selected-hover-dark, #013D98);
    --radio-color-control-background-selected-pressed: var(--radio-color-control-background-selected-pressed-dark, #012865);
    --radio-color-label-enabled: var(--radio-color-label-enabled-dark, #E2E2E4);
    --radio-color-label-hover: var(--radio-color-label-hover-dark, #EFEFF0);
    --radio-color-label-pressed: var(--radio-color-label-pressed-dark, #FCFCFD);

    --stepper-color-inProgress-icon-enabled: var(--stepper-color-inProgress-icon-enabled-dark, #9AC2FE);
    --stepper-color-incomplete-path-enabled: var(--stepper-color-incomplete-path-enabled-dark, #484A51);
    --stepper-color-completed-path-enabled: var(--stepper-color-completed-path-enabled-dark, #9AC2FE);

    --iconButton-color-background-enabled: var(--iconButton-color-background-enabled-dark, rgba(236, 244, 255, 0.00));

    --card-color-container-enabled: var(--card-color-container-enabled-dark, #171B26);
    
    --tabs-color-background-enabled: var(--tabs-color-background-enabled-dark, rgba(0, 0, 0, 0.00));
    --tabs-color-border-enabled: var(--tabs-color-border-enabled-dark, #292C32);
    --tabs-color-background-pressed: var(--tabs-color-background-pressed-dark, rgba(41, 44, 50, 0.48));
    --tabs-color-border-pressed: var(--tabs-color-border-pressed-dark, rgba(204, 204, 204, 0.16));
    --tabs-color-border-selected-enabled: var(--tabs-color-border-selected-enabled-dark, #9AC2FE);
    --tabs-color-label-enabled: var(--tabs-color-label-enabled-dark, #D4D5D8);
    --tabs-color-label-selected-enabled: var(--tabs-color-label-selected-enabled-dark, #E2E2E4);
  
    --accordion-color-expanded-background-enabled: var(--accordion-color-expanded-background-enabled-dark, #171B26);
    --accordion-color-expanded-background-hover: var(--accordion-color-expanded-background-hover-dark, #292C32);
    --accordion-color-expanded-background-pressed: var(--accordion-color-expanded-background-pressed-dark, #383B42);
    --accordion-color-header-collapsed-background-enabled: var(--accordion-color-header-collapsed-background-enabled-dark, #0C0F18);
    --accordion-color-header-collapsed-background-hover: var(--accordion-color-header-collapsed-background-hover-dark, #171B26);
    --accordion-color-header-collapsed-background-pressed: var(--accordion-color-header-collapsed-background-pressed-dark, #292C32);
    --accordion-color-divider-enabled: var(--accordion-color-divider-enabled-dark, #292C32);
    --accordion-color-divider-hover: var(--accordion-color-divider-hover-dark, #383B42);
    --accordion-color-divider-pressed: var(--accordion-color-divider-pressed-dark, #484A51);
    --accordion-color-decorative-success: var(--accordion-color-decorative-success-dark, #9FA);
    --accordion-color-decorative-decorative1: var(--accordion-color-decorative-decorative1-dark, #C599FF);

    --functional-color-content-success-enabled: var(--functional-color-content-success-enabled-dark, #9FA);
  }
}