:root {
  --bs-primary: #007bff; /* Your custom primary color */
  --bs-primary-rgb: 0, 123, 255;
  --bs-secondary: #6c757d; /* Your custom secondary color */
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: #28a745; /* Your custom success color */
  --bs-success-rgb: 40, 167, 69;
  --bs-info: #17a2b8; /* Your custom info color */
  --bs-info-rgb: 23, 162, 184;
  --bs-warning: #ffc107; /* Your custom warning color */
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #dc3545; /* Your custom danger color */
  --bs-danger-rgb: 220, 53, 69;
  --bs-light: #f8f9fa; /* Your custom light color */
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #343a40; /* Your custom dark color */
  --bs-dark-rgb: 52, 58, 64;
}

/* Buttons */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: darken(var(--bs-primary), 10%);
  border-color: darken(var(--bs-primary), 10%);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: darken(var(--bs-secondary), 10%);
  border-color: darken(var(--bs-secondary), 10%);
}

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: darken(var(--bs-success), 10%);
  border-color: darken(var(--bs-success), 10%);
}

.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: darken(var(--bs-info), 10%);
  border-color: darken(var(--bs-info), 10%);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: darken(var(--bs-warning), 10%);
  border-color: darken(var(--bs-warning), 10%);
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: darken(var(--bs-danger), 10%);
  border-color: darken(var(--bs-danger), 10%);
}

.btn-light {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  background-color: darken(var(--bs-light), 10%);
  border-color: darken(var(--bs-light), 10%);
}

.btn-dark {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: darken(var(--bs-dark), 10%);
  border-color: darken(var(--bs-dark), 10%);
}

/* Background colors */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

/* Text colors */
.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-info {
  color: var(--bs-info) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-light {
  color: var(--bs-light) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

/* Border colors */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.border-success {
  border-color: var(--bs-success) !important;
}

.border-info {
  border-color: var(--bs-info) !important;
}

.border-warning {
  border-color: var(--bs-warning) !important;
}

.border-danger {
  border-color: var(--bs-danger) !important;
}

.border-light {
  border-color: var(--bs-light) !important;
}

.border-dark {
  border-color: var(--bs-dark) !important;
}