/* Give the dark-theme service showcase enough separation for its image cards. */
html[data-theme="galaxy"] {
  --home-showcase-surface: #173445;
  --home-showcase-edge: rgba(88, 207, 209, 0.28);
}

html[data-theme="solar"] {
  --home-showcase-surface: #352a1f;
  --home-showcase-edge: rgba(235, 190, 107, 0.3);
}

html[data-theme="midnight"] {
  --home-showcase-surface: #183149;
  --home-showcase-edge: rgba(134, 187, 230, 0.28);
}

html[data-theme="nebula"] {
  --home-showcase-surface: #31263b;
  --home-showcase-edge: rgba(190, 145, 220, 0.3);
}

html[data-theme="emerald"] {
  --home-showcase-surface: #1b392e;
  --home-showcase-edge: rgba(116, 199, 151, 0.28);
}

html[data-theme="crimson"] {
  --home-showcase-surface: #40262d;
  --home-showcase-edge: rgba(224, 139, 143, 0.28);
}

html[data-theme]:not([data-theme="light"]) body main section.home-hero-showcase {
  background: var(--home-showcase-surface) !important;
  border-block: 1px solid var(--home-showcase-edge) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -1px rgba(0, 0, 0, 0.24) !important;
}