/*
  SAEJEE color-system hydration.
  This file intentionally preserves the original SAEJEE visual hierarchy:
  navigation gray/white, content white, CTA blue, footer black.
  The selected color is applied as a single mono color only where the
  original page uses the page color system: hero/slope and UI-lib
  accent variables.
*/

#default-layout.saejee-color-variant {
  --navigation-bg-color: var(--default-white-color);
  --navigation-active-bg-color: var(--default-white-color);
  --cta-color: var(--default-cta-color);
  --cta-hover-color: var(--dark-cta-color);
  --cta-active-color: var(--darker-cta-color);
  --btn-text-color: var(--default-white-color);
  --focus-ring-color: var(--default-black-color);
}

#default-layout.saejee-color-variant .bg-cta,
#default-layout.saejee-color-variant [data-button-type="primary"] {
  background: var(--default-cta-color) !important;
  color: var(--default-white-color) !important;
}

#default-layout.saejee-color-variant .hover\:bg-cta-hover:hover,
#default-layout.saejee-color-variant [data-button-type="primary"]:hover {
  background: var(--dark-cta-color) !important;
}

#default-layout.saejee-color-variant [data-saejee-color-hydrated="true"] {
  --default-container-color: var(--saejee-mono) !important;
  --default-ui-lib-color: var(--saejee-mono) !important;
  --light-ui-lib-color: var(--saejee-mono) !important;
  --lighter-ui-lib-color: var(--saejee-mono) !important;
  --dark-ui-lib-color: var(--saejee-mono) !important;
}

#default-layout.saejee-color-variant [data-saejee-color-hydrated="true"]::before {
  background: var(--saejee-mono) !important;
}

#default-layout.saejee-color-variant [data-saejee-accent-hydrated="true"] {
  --default-ui-lib-color: var(--saejee-mono) !important;
  --light-ui-lib-color: var(--saejee-mono) !important;
  --lighter-ui-lib-color: var(--saejee-mono) !important;
  --dark-ui-lib-color: var(--saejee-mono) !important;
}

#default-layout.saejee-color-variant [data-saejee-color-hydrated="true"] svg,
#default-layout.saejee-color-variant [data-saejee-color-hydrated="true"] path {
  fill: var(--saejee-mono) !important;
}