:root {
  /* Utilities */
  .btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #333;
  }

  /* Primary - Pink (Meyawo) */
  --bs-primary: #e285c8;
  --bs-primary-rgb: 226, 133, 200;

  /* info */
  /* info - Cyan */
  /* info - Dark Blue */
  --bs-dark: #121121;
  --bs-dark-rgb: 18, 17, 33;

  /* Links */
  --bs-link-color: #e285c8;
  --bs-link-hover-color: #e285c8;

  /* Player */
  --plyr-color-main: #e285c8;
}

/* Primary text/bg */

.text-primary {
  color: #e285c8 !important;
}
.bg-primary,
.text-bg-primary {
  background-color: #e285c8 !important;
  color: #fff !important;
}

/* info text/bg */

.text-dark {
  color: #121121 !important;
}
.bg-dark,
.text-bg-dark {
  background-color: #121121 !important;
  color: #fff !important;
}

/* Buttons */

.btn-primary {
  background-color: #e285c8 !important;
  border-color: #e285c8 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #b56aa0 !important; /* Darker variant */
  border-color: #b56aa0 !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: rgba(var(--bs-primary-rgb), 0.5) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.5) !important;
  color: #fff !important;
  opacity: 0.65;
}

.btn-dark {
  background-color: #121121 !important;
  border-color: #121121 !important;
  color: #fff !important;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: #0d0c18 !important; /* Darker variant */
  border-color: #0d0c18 !important;
}
.btn-dark:disabled,
.btn-dark.disabled {
  background-color: rgba(var(--bs-dark-rgb), 0.5) !important;
  border-color: rgba(var(--bs-dark-rgb), 0.5) !important;
  color: #fff !important;
  opacity: 0.65;
}

/* Outline buttons */

.btn-outline-primary {
  color: #e285c8 !important;
  border-color: #e285c8 !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #e285c8 !important;
}

.btn-outline-dark {
  color: #121121 !important;
  border-color: #121121 !important;
  background-color: transparent !important;
}

/* Nav pills and tabs */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #e285c8 !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active {
  border-color: #e285c8 #e285c8 #fff !important;
  color: #e285c8 !important;
}

/* List group */

.list-group-item.active {
  background-color: #e285c8 !important;
  border-color: #e285c8 !important;
  color: #fff !important;
}

/* Progress bar */

.progress-bar.bg-primary {
  background-color: #e285c8 !important;
}

/* Alerts (solid style) */

.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: #e285c8 !important;
  color: #e285c8 !important;
}
.alert-dark {
  background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
  border-color: #121121 !important;
  color: #121121 !important;
}

/* Badges */

.badge-primary,
.bg-primary {
  background-color: #e285c8 !important;
  color: #fff !important;
}
.badge-dark,
.bg-dark {
  background-color: #121121 !important;
  color: #fff !important;
}

/* Form controls focus */

.form-control:focus,
.form-select:focus {
  border-color: #e285c8 !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Outline color for accessibility */

:focus {
  outline-color: #e285c8 !important;
}

/* Custom player color */

.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
  background: #e285c8 !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
  color: #e285c8 !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}
.accordion-button::after {
  filter: sepia(100%) hue-rotate(330deg) saturate(500%);
}

/* Pagination */
.page-link {
  color: #e285c8 !important;
}
.page-item.active .page-link {
  background-color: #e285c8 !important;
  border-color: #e285c8 !important;
  color: #fff !important;
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Body */
body {
  background-color: #ffffff; /* White Background */
}