:root {
  --bg-color: #31004a;
  --text-color: #f3e5f5;
  --header-bg: #4c00a4;
  --link-color: #e1bee7;
  --link-hover-color: #ffffff;
  --input-bg: #4c00a4;
  --button-bg: #6a1b9a;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #222222;
  --header-bg: #f4f4f4;
  --link-color: #555555;
  --link-hover-color: #000000;
  --input-bg: #f4f4f4;
  --button-bg: #000000;
}

body, .bg-near-white {
  background-color: var(--bg-color) !important;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.bg-dark-purple, .bg-dark-blue {
  background-color: var(--header-bg) !important;
}

.bg-black {
  background-color: var(--button-bg) !important;
}

.bg-white, .gray {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.bg-light-gray {
  background-color: var(--input-bg) !important;
  color: var(--text-color) !important;
}

.b--moon-gray, .b--black-10 {
  border-color: var(--text-color) !important;
  opacity: 0.3;
}

.nested-copy-line-height {
  color: var(--text-color) !important;
}

/* Override Ananke classes to use CSS variables */
.bg-black-60, .bg-black-40, .bg-black-20, .bg-black-10, .bg-black-80 {
  background-color: var(--bg-color) !important;
}

.white, .white-90, .light-silver, .near-black, .black, .dark-gray, .mid-gray, .black-80, .black-70, .silver, .near-white {
  color: var(--text-color) !important;
}

.white-80, .white-70, .white-60, .white-50, .white-40, .white-30, .white-20, .white-10 {
  color: var(--text-color) !important;
  opacity: 0.8;
}

.hover-white:hover {
  color: var(--link-hover-color) !important;
}

a.no-underline {
  color: var(--link-color);
}

.measure {
  max-width: 80% !important;
}

.mw7 {
  max-width: 80% !important;
}

.center {
  max-width: 85% !important;
}

#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}

#theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.dark-icon {
  display: none;
}

[data-theme="light"] .light-icon {
  display: none;
}

[data-theme="light"] .dark-icon {
  display: block;
}

/* YouTube embed styling */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin-bottom: 2rem;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}