/**
 * Keep header + bright-section text readable when the OS/browser is in dark mode.
 * Light sections stay light; text that would wash out becomes black.
 * Light mode keeps the existing theme colors (including white/light accents).
 */
html {
  color-scheme: only light;
}

@media (prefers-color-scheme: dark) {
  #header.bright,
  #header[data-section-theme="bright"] {
    --siteTitleColor: #000 !important;
    --navigationLinkColor: #000 !important;
    --gradientHeaderNavigationColor: #000 !important;
    --solidHeaderNavigationColor: #000 !important;
    --primaryButtonTextColor: #000 !important;
    --secondaryButtonTextColor: #000 !important;
    --tertiaryButtonTextColor: #000 !important;
    --menuOverlayNavigationLinkColor: #000 !important;
  }

  .page-section.bright,
  [data-section-theme="bright"] {
    --headingExtraLargeColor: #000 !important;
    --headingLargeColor: #000 !important;
    --headingMediumColor: #000 !important;
    --headingSmallColor: #000 !important;
    --paragraphLargeColor: #000 !important;
    --paragraphMediumColor: #000 !important;
    --paragraphSmallColor: #000 !important;
    --headingLinkColor: #000 !important;
    --paragraphLinkColor: #000 !important;
  }

  #header.bright #site-title,
  #header.bright .header-nav-item a,
  #header.bright .user-accounts-text-link,
  #header[data-section-theme="bright"] #site-title,
  #header[data-section-theme="bright"] .header-nav-item a {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  #header.bright .sqs-button-element--primary,
  #header.bright .header-actions-action--cta .sqs-button-element--primary,
  #header[data-section-theme="bright"] .sqs-button-element--primary {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: #000 !important;
    background-color: transparent !important;
  }

  .page-section.bright .sqs-html-content h1,
  .page-section.bright .sqs-html-content h2,
  .page-section.bright .sqs-html-content h3,
  .page-section.bright .sqs-html-content h4,
  .page-section.bright .sqs-html-content p,
  [data-section-theme="bright"] .sqs-html-content h1,
  [data-section-theme="bright"] .sqs-html-content h2,
  [data-section-theme="bright"] .sqs-html-content h3,
  [data-section-theme="bright"] .sqs-html-content h4,
  [data-section-theme="bright"] .sqs-html-content p {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}