:root:root{
  --ast-global-color-secondary: var(--ast-global-color-5);
  --ast-border-color:           var(--ast-global-color-7);
}
:root:root:has(body.astra-dark-mode-enable){
  /* dark: panels sit one step off the page ground rather than flat on it */
  --ast-global-color-secondary: var(--ast-global-color-6);
}
html:has(body.astra-dark-mode-enable){
  --etjp-brand-fill:       color-mix(in srgb, var(--ast-global-color-0) 45%, var(--ast-global-color-5));
  --etjp-brand-fill-hover: color-mix(in srgb, var(--ast-global-color-0) 62%, var(--ast-global-color-5));
  --etjp-brand-ink:        var(--ast-global-color-0);
  --etjp-on-brand:         var(--ast-global-color-2);
}
body.astra-dark-mode-enable .ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
body.astra-dark-mode-enable .ast-mobile-header-wrap .ast-mobile-header-content,
body.astra-dark-mode-enable .ast-desktop-header-content{
  background-color: var(--ast-global-color-5);
}
body.astra-dark-mode-enable .ast-mobile-popup-drawer.active .menu-toggle-close{
  color: var(--ast-global-color-2);
}
body.astra-dark-mode-enable .site-footer{
  background-color: var(--ast-global-color-6);
}
body.astra-dark-mode-enable .ast-separate-container.ast-two-container #secondary .widget{
  background-color: var(--ast-global-color-5);
}