/* Vibrant Color Palette */
:root {
  /* Primary Color - Bright Electric Blue */
  --primary-color: #1E90FF;
  --primary-light: #4169E1;
  --primary-dark: #0047AB;

  /* Secondary Color - Vivid Magenta */
  --secondary-color: #FF1493;
  --secondary-light: #FF69B4;
  --secondary-dark: #C71585;

  /* Success Color - Vibrant Emerald Green */
  --success-color: #00FA9A;
  --success-light: #3CB371;
  --success-dark: #008B45;

  /* Info Color - Bright Turquoise */
  --info-color: #00FFFF;
  --info-light: #40E0D0;
  --info-dark: #008B8B;

  /* Warning Color - Intense Orange */
  --warning-color: #FF4500;
  --warning-light: #FF6347;
  --warning-dark: #FF340;

  /* Danger Color - Bright Crimson */
  --danger-color: #DC143C;
  --danger-light: #FF3366;
  --danger-dark: #8B0000;
}

/* Applying Vibrant Primary Color */
.btn-primary,
.bg-primary,
.border-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.btn-light-primary {
  background-color: var(--primary-light) !important;
  color: #ffffff !important;
}

/* Vibrant Secondary Color */
.btn-secondary,
.bg-secondary,
.border-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
}

.btn-light-secondary {
  background-color: var(--secondary-light) !important;
  color: #ffffff !important;
}

/* Vibrant Success Color */
.btn-success,
.bg-success,
.border-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--success-dark) !important;
  border-color: var(--success-dark) !important;
}

.btn-light-success {
  background-color: var(--success-light) !important;
  color: #ffffff !important;
}

/* Vibrant Info Color */
.btn-info,
.bg-info,
.border-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: #000000 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--info-dark) !important;
  border-color: var(--info-dark) !important;
  color: #ffffff !important;
}

.btn-light-info {
  background-color: var(--info-light) !important;
  color: #000000 !important;
}

/* Vibrant Warning Color */
.btn-warning,
.bg-warning,
.border-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--warning-dark) !important;
  border-color: var(--warning-dark) !important;
}

.btn-light-warning {
  background-color: var(--warning-light) !important;
  color: #ffffff !important;
}

/* Vibrant Danger Color */
.btn-danger,
.bg-danger,
.border-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: var(--danger-dark) !important;
  border-color: var(--danger-dark) !important;
}

.btn-light-danger {
  background-color: var(--danger-light) !important;
  color: #ffffff !important;
}

/* Additional Vibrant Styling */
.badge-primary { background-color: var(--primary-color); }
.badge-secondary { background-color: var(--secjavascript:;ondary-color); }
.badge-success { background-color: var(--success-color); }
.badge-info { background-color: var(--info-color); }
.badge-warning { background-color: var(--warning-color); }
.badge-danger { background-color: var(--danger-color); }

/* Hover and Focus States */
.btn:hover,
.btn:focus {
  opacity: 0.9;
}

/* Glow Effect */
.btn.btn-glow {
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease;
}

.btn.btn-glow:hover {
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
}