/* Loaded after the vendor stylesheet via data-consent-theme. */
#stcm-wrapper {
  --fontFamily: 'Inter', sans-serif;
  --primaryColor: var(--p-primary-color, #9f78ec);
  --backgroundColor: var(--p-surface-0, #f4f1ef);
  --textColor: #393841;
  --backdropBackgroundColor: #39384177;
  /* Silktide uses iconColor for the background and iconBackgroundColor for the glyph. */
  --iconColor: var(--p-primary-color, #9f78ec);
  --iconBackgroundColor: #fff;
}

#stcm-wrapper .stcm-button-primary {
  color: #fff;
}

#stcm-wrapper .stcm-button-primary:hover {
  background-color: var(--p-primary-700, #6e42c4);
  border-color: var(--p-primary-700, #6e42c4);
  color: #fff;
}

#stcm-wrapper .stcm-button-secondary {
  background-color: var(--p-button-secondary-background, #e6e4e2);
  border-color: var(--p-button-secondary-border-color, #e6e4e2);
  color: var(--p-button-secondary-color, #393841);
}

#stcm-wrapper .stcm-button-secondary:hover {
  background-color: var(--p-button-secondary-hover-background, #3b3a42);
  border-color: var(--p-button-secondary-hover-background, #3b3a42);
  color: var(--p-button-secondary-hover-color, #fff);
}

/* Use the darker brand purple for readable links on the light surface. */
#stcm-wrapper a,
#stcm-banner a,
#stcm-banner .stcm-preferences-button,
#stcm-modal .stcm-modal-close {
  color: var(--p-primary-700, #6e42c4);
}

#stcm-banner a.stcm-logo,
#stcm-modal .stcm-modal-close svg {
  fill: var(--p-primary-700, #6e42c4);
}

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-on {
  color: var(--p-primary-950, #2d1a52);
}