:root {
  --primary-color: #3CDAAC;
  --secondary-color: #02003C;
  --secondary-light-color: #141C40;
  --gray-dark-color: #7D8791;
  --gray-light-color: #CBCDD6;
  --button-color: #3CDAAC;
  --button-text-color: #02003C;
  --header-color: #02003C;
  --footer-color: #141C40;
  --icon-color: #3CDAAC;
  --card-color: #FFFFFF;
  --link-color: #3CDAAC;
  --text-color: #02003C;
  --dark-background: #02003C;
  --dark-card: #141C40;
  --dark-text: #CBCDD6;
  --dark-button: #3CDAAC;
}

[data-theme="dark"] {
  --primary-color: var(--dark-button, #3CDAAC);
  --secondary-color: var(--dark-background, #02003C);
  --secondary-light-color: var(--dark-card, #141C40);
  --button-color: var(--dark-button, #3CDAAC);
  --button-text-color: var(--dark-background, #02003C);
  --header-color: var(--dark-background, #02003C);
  --footer-color: var(--dark-card, #141C40);
  --card-color: var(--dark-card, #141C40);
  --text-color: var(--dark-text, #CBCDD6);
  --link-color: var(--dark-button, #3CDAAC);
  --icon-color: var(--dark-button, #3CDAAC);
}

.sd-theme-btn {
  background-color: var(--button-color) !important;
  color: var(--button-text-color) !important;
  border-color: var(--button-color) !important;
}

.sd-theme-header {
  background-color: var(--header-color) !important;
  color: #fff !important;
}

.sd-theme-footer {
  background-color: var(--footer-color) !important;
  color: var(--gray-light-color) !important;
}

.sd-theme-link {
  color: var(--link-color) !important;
}

.sd-theme-card {
  background-color: var(--card-color) !important;
  color: var(--text-color) !important;
}

.sd-powered-by {
  font-size: 12px;
  color: var(--gray-dark-color);
  text-align: center;
  padding: 8px 12px;
}

.sd-theme-banner {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
}

.sd-theme-preview-mock {
  border: 1px solid var(--gray-light-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-color);
}