/* ========================================
   BUTTON COMPONENT
   All button variations and styling
   ======================================== */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-7);
  height: 2.5rem;
  /* 40px */
  border-radius: var(--radius-2xl);
  border: none;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-16);
  /* 16px */
  font-weight: var(--font-weight-medium);
  /* Medium */
  line-height: 1;
  /* 120% */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-0.125rem);
}

.btn:active {
  transform: translateY(0);
}

/* Button Icon/Arrow */
.btn-icon {
  width: 0.625rem;
  height: 0.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--space-5);
  /* 8px spacing to right arrow */
}

.btn-icon.arrow-right {
  transform: rotate(-90deg);
}

.btn-icon.arrow-down {
  transform: rotate(0deg);
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary Button (Teal) - Solid */
.btn-primary {
  background-color: var(--bs-primary-400);
  color: var(--bs-black);
  border: 1px solid var(--bs-primary-400);
}

.btn-primary .btn-icon {
  background-color: var(--bs-black);
}

.btn-primary:hover {
  background-color: var(--bs-primary-500) !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--bs-primary-500);
}

.btn-primary:focus {
  outline: 0.125rem solid var(--bs-primary-400);
  outline-offset: 0.125rem;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary Button Outline */
.btn-primary-outline {
  background-color: transparent;
  color: var(--bs-primary-400);
  border: 1px solid var(--bs-primary-400);
}

.btn-primary-outline .btn-icon {
  background-color: var(--bs-primary-400);
}

.btn-primary-outline:hover {
  background-color: var(--bs-primary-400);
  color: var(--bs-black);
}

.btn-primary-outline:hover .btn-icon {
  background-color: var(--bs-black);
}

.btn-primary-outline:active,
.btn-primary-outline.active {
  background-color: var(--bs-primary-400);
  color: var(--bs-black);
}

.btn-primary-outline:active .btn-icon,
.btn-primary-outline.active .btn-icon {
  background-color: var(--bs-black);
}

.btn-primary-outline:focus {
  outline: 0.125rem solid var(--bs-primary-400);
  outline-offset: 0.125rem;
}

.btn-primary-outline:disabled,
.btn-primary-outline.disabled {
  color: var(--bs-primary-400);
  background-color: var(--bs-primary-400);
  border-color: var(--bs-primary-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary Button (Coral/Red) - Solid */
.btn-secondary {
  background-color: var(--bs-secondary);
  color: var(--bs-black);
  border: 1px solid var(--bs-secondary);
}

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

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

.btn-secondary:active,
.btn-secondary.active {
  background-color: var(--bs-secondary-600);
}

.btn-secondary:focus {
  outline: 0.125rem solid var(--bs-secondary);
  outline-offset: 0.125rem;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: var(--bs-secondary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary Button Outline */
.btn-secondary-outline {
  background-color: transparent;
  color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
}

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

.btn-secondary-outline:hover {
  color: var(--bs-white);
  background-color: var(--bs-secondary);
}

.btn-secondary-outline:active,
.btn-secondary-outline.active {
  color: var(--bs-white);
  background-color: var(--bs-secondary);
}

.btn-secondary-outline:focus {
  outline: 0.125rem solid var(--bs-secondary);
  outline-offset: 0.125rem;
}

.btn-secondary-outline:disabled,
.btn-secondary-outline.disabled {
  color: var(--bs-white);
  background-color: var(--bs-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   SUCCESS BUTTON (Green)
   ======================================== */

.btn-success {
  background-color: var(--bs-success);
  color: var(--bs-primary-900);
  border: 1px solid var(--bs-success);
}

.btn-success .btn-icon {
  background-color: var(--bs-primary-900);
}

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

.btn-success:active,
.btn-success.active {
  background-color: var(--btn-success-active);
}

.btn-success:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

.btn-success:disabled,
.btn-success.disabled {
  background-color: var(--btn-success-active);
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-success-outline {
  background-color: transparent;
  color: var(--bs-success);
  border: 1px solid var(--bs-success);
}

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

.btn-success-outline:hover {
  background-color: var(--bs-success);
  color: var(--bs-white);
}

.btn-success-outline:hover .btn-icon {
  background-color: var(--bs-white);
}

.btn-success-outline:active,
.btn-success-outline.active {
  background-color: var(--bs-success);
  color: var(--bs-white);
}

.btn-success-outline:active .btn-icon,
.btn-success-outline.active .btn-icon {
  background-color: var(--bs-white);
}

.btn-success-outline:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

.btn-success-outline:disabled,
.btn-success-outline.disabled {
  color: var(--bs-white);
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL BUTTON VARIATIONS
   ======================================== */

/* Neutral Dark Button */
.btn-neutral-dark {
  background-color: var(--neutral-600);
  color: var(--bs-light);
  border: 1px solid var(--neutral-600);
}

.btn-neutral-dark .btn-icon {
  background-color: var(--bs-light);
}

.btn-neutral-dark:hover {
  background-color: var(--neutral-500);
}

.btn-neutral-dark:active,
.btn-neutral-dark.active {
  background-color: var(--neutral-600);
}

.btn-neutral-dark:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-dark:disabled,
.btn-neutral-dark.disabled {
  background-color: var(--neutral-500);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral Dark Outline */
.btn-neutral-dark-outline {
  background-color: transparent;
  color: var(--neutral-600);
  border: 1px solid var(--neutral-600);
}

.btn-neutral-dark-outline .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-dark-outline:hover {
  background-color: var(--neutral-600);
  color: var(--bs-light);
}

.btn-neutral-dark-outline:hover .btn-icon {
  background-color: var(--bs-light);
}

.btn-neutral-dark-outline:active,
.btn-neutral-dark-outline.active {
  background-color: var(--neutral-600);
  color: var(--bs-light);
}

.btn-neutral-dark-outline:active .btn-icon,
.btn-neutral-dark-outline.active .btn-icon {
  background-color: var(--bs-light);
}

.btn-neutral-dark-outline:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-dark-outline:disabled,
.btn-neutral-dark-outline.disabled {
  color: var(--neutral-600);
  background-color: var(--neutral-600);
  border-color: var(--neutral-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral Light Button */
.btn-neutral-light {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-100);
}

.btn-neutral-light .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-light:hover {
  background-color: var(--neutral-200);
}

.btn-neutral-light:active,
.btn-neutral-light.active {
  background-color: var(--neutral-300);
}

.btn-neutral-light:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-light:disabled,
.btn-neutral-light.disabled {
  background-color: var(--neutral-200);
  color: var(--neutral-500);
  border-color: var(--neutral-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral Light Outline Button */
.btn-neutral-light-outline {
  background-color: transparent;
  color: var(--neutral-100);
  border: 1px solid var(--neutral-100);
}

.btn-neutral-light-outline .btn-icon {
  background-color: var(--neutral-100);
}

.btn-neutral-light-outline:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.btn-neutral-light-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-light-outline:active,
.btn-neutral-light-outline.active {
  background-color: var(--neutral-200);
  color: var(--neutral-600);
}

.btn-neutral-light-outline:active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-light-outline:focus {
  outline: 0.125rem solid var(--neutral-100);
  outline-offset: 0.125rem;
}

.btn-neutral-light-outline:disabled,
.btn-neutral-light-outline.disabled {
  color: var(--neutral-200);
  border-color: var(--neutral-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark Button (Primary-800) */
.btn-dark {
  background-color: var(--bs-primary-800);
  color: var(--bs-primary-25);
  border: 1px solid var(--bs-primary-800);
}

.btn-dark .btn-icon {
  background-color: var(--bs-primary-25);
}

.btn-dark:hover {
  background-color: var(--bs-primary-400);
}

.btn-dark:active,
.btn-dark.active {
  background-color: var(--bs-primary-400);
}

.btn-dark:focus {
  outline: 0.125rem solid var(--bs-primary-800);
  outline-offset: 0.125rem;
}

.btn-dark:disabled,
.btn-dark.disabled {
  background-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark Button Outline */
.btn-dark-outline {
  background-color: transparent;
  color: var(--bs-primary-800);
  border: 1px solid var(--bs-primary-800);
}

.btn-dark-outline .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-dark-outline:hover {
  background-color: var(--bs-primary-800);
  color: var(--bs-primary-25);
}

.btn-dark-outline:hover .btn-icon {
  background-color: var(--bs-primary-25);
}

.btn-dark-outline:active,
.btn-dark-outline.active {
  background-color: var(--bs-primary-800);
  color: var(--bs-primary-25);
}

.btn-dark-outline:active .btn-icon,
.btn-dark-outline.active .btn-icon {
  background-color: var(--bs-primary-25);
}

.btn-dark-outline:focus {
  outline: 0.125rem solid var(--bs-primary-800);
  outline-offset: 0.125rem;
}

.btn-dark-outline:disabled,
.btn-dark-outline.disabled {
  color: var(--bs-primary-800);
  background-color: var(--bs-primary-800);
  border-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   LIGHT BACKGROUND BUTTONS
   ======================================== */

/* Primary on Light Background */
.btn-primary-light {
  background-color: var(--bs-primary-25);
  color: var(--bs-primary-700);
  border: 1px solid var(--bs-primary-25);
}

.btn-primary-light .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-light:hover {
  background-color: var(--bs-primary-50);
}

.btn-primary-light:active,
.btn-primary-light.active {
  background-color: var(--bs-primary-100);
}

.btn-primary-light:focus {
  outline: 0.125rem solid var(--bs-primary-700);
  outline-offset: 0.125rem;
}

.btn-primary-light:disabled,
.btn-primary-light.disabled {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-600);
  border-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary on Light Background */
.btn-secondary-light {
  background-color: var(--bs-secondary-25);
  color: var(--bs-secondary-700);
  border: 1px solid var(--bs-secondary-25);
}

.btn-secondary-light .btn-icon {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-light:hover {
  background-color: var(--bs-secondary-50);
}

.btn-secondary-light:active,
.btn-secondary-light.active {
  background-color: var(--bs-secondary-100);
}

.btn-secondary-light:focus {
  outline: 0.125rem solid var(--bs-secondary-700);
  outline-offset: 0.125rem;
}

.btn-secondary-light:disabled,
.btn-secondary-light.disabled {
  background-color: var(--bs-secondary-50);
  color: var(--bs-secondary-600);
  border-color: var(--bs-secondary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   GHOST BUTTONS (Transparent)
   ======================================== */

/* Ghost Primary */
.btn-ghost-primary {
  background-color: transparent;
  color: var(--bs-primary);
  border: none;
}

.btn-ghost-primary .btn-icon {
  background-color: var(--bs-primary);
}

.btn-ghost-primary:hover {
  color: var(--bs-primary-600);
}

.btn-ghost-primary:active,
.btn-ghost-primary.active {
  color: var(--bs-primary-700);
}

.btn-ghost-primary:focus {
  outline: 0.125rem solid var(--bs-primary);
  outline-offset: 0.125rem;
}

.btn-ghost-primary:disabled,
.btn-ghost-primary.disabled {
  color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ghost Secondary */
.btn-ghost-secondary {
  background-color: transparent;
  color: var(--bs-secondary);
  border: none;
}

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

.btn-ghost-secondary:hover {
  color: var(--bs-secondary-500);
}

.btn-ghost-secondary:active,
.btn-ghost-secondary.active {
  color: var(--bs-secondary-600);
}

.btn-ghost-secondary:focus {
  outline: 0.125rem solid var(--bs-secondary);
  outline-offset: 0.125rem;
}

.btn-ghost-secondary:disabled,
.btn-ghost-secondary.disabled {
  color: var(--bs-secondary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ghost Success */
.btn-ghost-success {
  background-color: transparent;
  color: var(--bs-success);
  border: none;
}

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

.btn-ghost-success:hover {
  color: var(--btn-success-hover);
}

.btn-ghost-success:active,
.btn-ghost-success.active {
  color: var(--btn-success-active);
}

.btn-ghost-success:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

.btn-ghost-success:disabled,
.btn-ghost-success.disabled {
  color: var(--btn-success-active);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   BUTTON SIZES
   ======================================== */

/* Small Button */
.btn-sm {
  padding: var(--space-1) var(--space-5);
  font-size: var(--font-size-12);
}

/* Medium Button (default) */
.btn-md {
  padding: var(--space-3) var(--space-7);
  font-size: var(--font-size-preheader);
}

/* Large Button */
.btn-lg {
  padding: var(--space-5) var(--space-11);
  font-size: var(--font-size-18);
}

/* Full Width Button */
.btn-block {
  width: 100%;
  display: flex;
}

/* ========================================
   BUTTON STATES
   ======================================== */

/* Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
}

/* Loading State */
.btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn.loading::after {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 0.125rem solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   BUTTON WITH DROPDOWN ICON
   ======================================== */

.btn-with-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.btn-dropdown-icon {
  width: 0.625rem;
  height: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}

.btn-with-dropdown:hover .btn-dropdown-icon {
  transform: translateY(0.125rem);
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.btn-group {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.btn-group.vertical {
  flex-direction: column;
}

.btn-group.horizontal {
  flex-direction: row;
}

/* ========================================
   BUTTON ICON POSITIONS
   ======================================== */

/* Icon on the right (default) */
.btn-icon-right {
  flex-direction: row;
}

/* Icon on the left */
.btn-icon-left {
  flex-direction: row-reverse;
}

/* Icon only */
.btn-icon-only {
  padding: var(--space-3);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

/* ========================================
   BUTTON FOCUS STATES (Accessibility)
   ======================================== */

.btn:focus {
  outline: 0.125rem solid var(--bs-danger);
  outline-offset: 0.125rem;
}

.btn:focus:not(:focus-visible) {
  outline: none;
}

.btn:focus-visible {
  outline: 0.125rem solid var(--bs-danger);
  outline-offset: 0.125rem;
}

/* ========================================
   BUTTON ANIMATIONS
   ======================================== */

/* Ripple Effect */
.btn.ripple {
  position: relative;
  overflow: hidden;
}

.btn.ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--ripple-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.btn.ripple:active::before {
  animation: ripple-animation 0.6s ease-out;
}

@keyframes ripple-animation {
  to {
    width: 18.75rem;
    height: 18.75rem;
    opacity: 0;
  }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 991px) {
  .btn {
    padding: 11px 15px;
    height: auto;
    font-size: 16px;
  }

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

}

@media (max-width: 768px) {
  /* .btn {
    padding: var(--space-3) var(--space-5);
  } */

  .btn-lg {
    padding: var(--space-3) var(--space-7);
    font-size: var(--font-size-16);
  }

  .btn-group {
    gap: var(--space-3);
  }

  .btn-block {
    width: 100%;
  }
}

@media (max-width: 576px) {

  .btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-14);
  }

  .btn-group {
    flex-direction: column;
    gap: var(--space-3);
  }

  .btn-group.horizontal {
    flex-direction: column;
  }

  .btn-block {
    width: 100%;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }

  .btn-dropdown-icon {
    transition: none;
  }

  .btn.ripple:active::before {
    animation: none;
  }
}

/* ========================================
   ADDITIONAL BUTTON VARIATIONS
   ======================================== */

/* Outline Light Green (for dark backgrounds) */
.btn-outline-light-green {
  background-color: transparent;
  color: var(--bs-primary-100);
  border: 1px solid var(--bs-primary-100);
}

.btn-outline-light-green .btn-icon {
  background-color: var(--bs-primary-100);
}

.btn-outline-light-green:hover {
  background-color: rgba(var(--bs-primary-100-rgb), 0.1);
}

.btn-outline-light-green:active,
.btn-outline-light-green.active {
  background-color: rgba(var(--bs-primary-100-rgb), 0.15);
}

.btn-outline-light-green:focus {
  outline: 0.125rem solid var(--bs-primary-100);
  outline-offset: 0.125rem;
}

.btn-outline-light-green:disabled,
.btn-outline-light-green.disabled {
  color: var(--bs-primary-200);
  border-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Outline Light Mint (for dark backgrounds) */
.btn-outline-light-mint {
  background-color: transparent;
  color: var(--bs-primary-25);
  border: 1px solid var(--bs-primary-25);
}

.btn-outline-light-mint .btn-icon {
  background-color: var(--bs-primary-25);
}

.btn-outline-light-mint:hover {
  background-color: rgba(var(--bs-primary-25-rgb), 0.1);
}

.btn-outline-light-mint:active,
.btn-outline-light-mint.active {
  background-color: rgba(var(--bs-primary-25-rgb), 0.15);
}

.btn-outline-light-mint:focus {
  outline: 0.125rem solid var(--bs-primary-25);
  outline-offset: 0.125rem;
}

.btn-outline-light-mint:disabled,
.btn-outline-light-mint.disabled {
  color: var(--bs-primary-50);
  border-color: var(--bs-primary-50);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Solid Success Button (Green) - Alternative */
.btn-success-solid {
  background-color: var(--bs-success);
  color: white;
  border: 1px solid var(--bs-success);
}

.btn-success-solid .btn-icon {
  background-color: white;
}

.btn-success-solid:hover {
  background-color: var(--btn-success-hover);
}

.btn-success-solid:active,
.btn-success-solid.active {
  background-color: var(--btn-success-active);
}

.btn-success-solid:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

.btn-success-solid:disabled,
.btn-success-solid.disabled {
  background-color: var(--btn-success-active);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   PRIMARY COLOR SHADE VARIATIONS
   ======================================== */

/* Primary-25 Solid Button */
.btn-primary-25 {
  background-color: var(--bs-primary-25);
  color: var(--bs-primary-800);
  border: 1px solid var(--bs-primary-25);
}

.btn-primary-25 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-25:hover {
  background-color: var(--bs-primary-50);
}

.btn-primary-25:active,
.btn-primary-25.active {
  background-color: var(--bs-primary-100);
}

.btn-primary-25:focus {
  outline: 0.125rem solid var(--bs-primary-25);
  outline-offset: 0.125rem;
}

.btn-primary-25:disabled,
.btn-primary-25.disabled {
  background-color: var(--bs-primary-50);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-50 Solid Button */
.btn-primary-50 {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-800);
}

.btn-primary-50 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50:hover {
  background-color: var(--bs-primary-100);
}

.btn-primary-50:active,
.btn-primary-50.active {
  background-color: var(--bs-primary-200);
}

.btn-primary-50:focus {
  outline: 0.125rem solid var(--bs-primary-50);
  outline-offset: 0.125rem;
}

.btn-primary-50:disabled,
.btn-primary-50.disabled {
  background-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-100 Solid Button */
.btn-primary-100 {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-800);
}

.btn-primary-100 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-100:hover {
  background-color: var(--bs-primary-200);
}

.btn-primary-100:active,
.btn-primary-100.active {
  background-color: var(--bs-primary-300);
}

.btn-primary-100:focus {
  outline: 0.125rem solid var(--bs-primary-100);
  outline-offset: 0.125rem;
}

.btn-primary-100:disabled,
.btn-primary-100.disabled {
  background-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-200 Solid Button */
.btn-primary-200 {
  background-color: var(--bs-primary-200);
  color: var(--bs-primary-800);
}

.btn-primary-200 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-200:hover {
  background-color: var(--bs-primary-300);
}

.btn-primary-200:active,
.btn-primary-200.active {
  background-color: var(--bs-primary-400);
}

.btn-primary-200:focus {
  outline: 0.125rem solid var(--bs-primary-200);
  outline-offset: 0.125rem;
}

.btn-primary-200:disabled,
.btn-primary-200.disabled {
  background-color: var(--bs-primary-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-300 Solid Button */
.btn-primary-300 {
  background-color: var(--bs-primary-300);
  color: var(--bs-primary-800);
}

.btn-primary-300 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-300:hover {
  background-color: var(--bs-primary-400);
}

.btn-primary-300:active,
.btn-primary-300.active {
  background-color: var(--bs-primary-500);
}

.btn-primary-300:focus {
  outline: 0.125rem solid var(--bs-primary-300);
  outline-offset: 0.125rem;
}

.btn-primary-300:disabled,
.btn-primary-300.disabled {
  background-color: var(--bs-primary-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-500 Solid Button */
.btn-primary-500 {
  background-color: var(--bs-primary-500);
  color: white;
}

.btn-primary-500 .btn-icon {
  background-color: white;
}

.btn-primary-500:hover {
  background-color: var(--bs-primary-600);
}

.btn-primary-500:active,
.btn-primary-500.active {
  background-color: var(--bs-primary-700);
}

.btn-primary-500:focus {
  outline: 0.125rem solid var(--bs-primary-500);
  outline-offset: 0.125rem;
}

.btn-primary-500:disabled,
.btn-primary-500.disabled {
  background-color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-600 Solid Button */
.btn-primary-600 {
  background-color: var(--bs-primary-600);
  color: white;
}

.btn-primary-600 .btn-icon {
  background-color: white;
}

.btn-primary-600:hover {
  background-color: var(--bs-primary-700);
}

.btn-primary-600:active,
.btn-primary-600.active {
  background-color: var(--bs-primary-800);
}

.btn-primary-600:focus {
  outline: 0.125rem solid var(--bs-primary-600);
  outline-offset: 0.125rem;
}

.btn-primary-600:disabled,
.btn-primary-600.disabled {
  background-color: var(--bs-primary-700);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-700 Solid Button */
.btn-primary-700 {
  background-color: var(--bs-primary-700);
  color: white;
}

.btn-primary-700 .btn-icon {
  background-color: white;
}

.btn-primary-700:hover {
  background-color: var(--bs-primary-800);
}

.btn-primary-700:active,
.btn-primary-700.active {
  background-color: var(--bs-primary-900);
}

.btn-primary-700:focus {
  outline: 0.125rem solid var(--bs-primary-700);
  outline-offset: 0.125rem;
}

.btn-primary-700:disabled,
.btn-primary-700.disabled {
  background-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-800 Solid Button */
.btn-primary-800 {
  background-color: var(--bs-primary-800);
  color: white;
}

.btn-primary-800 .btn-icon {
  background-color: white;
}

.btn-primary-800:hover {
  background-color: var(--bs-primary-900);
}

.btn-primary-800:active,
.btn-primary-800.active {
  background-color: var(--bs-primary-900);
}

.btn-primary-800:focus {
  outline: 0.125rem solid var(--bs-primary-800);
  outline-offset: 0.125rem;
}

.btn-primary-800:disabled,
.btn-primary-800.disabled {
  background-color: var(--bs-primary-900);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-900 Solid Button */
.btn-primary-900 {
  background-color: var(--bs-primary-900);
  color: white;
}

.btn-primary-900 .btn-icon {
  background-color: white;
}

.btn-primary-900:hover {
  background-color: var(--bs-primary-800);
}

.btn-primary-900:active,
.btn-primary-900.active {
  background-color: var(--bs-primary-800);
}

.btn-primary-900:focus {
  outline: 0.125rem solid var(--bs-primary-900);
  outline-offset: 0.125rem;
}

.btn-primary-900:disabled,
.btn-primary-900.disabled {
  background-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   PRIMARY COLOR SHADE OUTLINE VARIATIONS
   ======================================== */

/* Primary-25 Outline Button */
.btn-primary-25-outline {
  background-color: transparent;
  color: var(--bs-primary-25);
  border: 1px solid var(--bs-primary-25);
}

.btn-primary-25-outline .btn-icon {
  background-color: var(--bs-primary-25);
}

.btn-primary-25-outline:hover {
  background-color: var(--bs-primary-25);
  color: var(--bs-primary-800);
}

.btn-primary-25-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-25-outline:active,
.btn-primary-25-outline.active {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-800);
}

.btn-primary-25-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-25-outline:focus {
  outline: 0.125rem solid var(--bs-primary-25);
  outline-offset: 0.125rem;
}

.btn-primary-25-outline:disabled,
.btn-primary-25-outline.disabled {
  color: var(--bs-primary-50);
  border-color: var(--bs-primary-50);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-50 Outline Button */
.btn-primary-50-outline {
  background-color: transparent;
  color: var(--bs-primary-50);
  border: 1px solid var(--bs-primary-50);
}

.btn-primary-50-outline .btn-icon {
  background-color: var(--bs-primary-50);
}

.btn-primary-50-outline:hover {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-800);
}

.btn-primary-50-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50-outline:active,
.btn-primary-50-outline.active {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-800);
}

.btn-primary-50-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50-outline:focus {
  outline: 0.125rem solid var(--bs-primary-50);
  outline-offset: 0.125rem;
}

.btn-primary-50-outline:disabled,
.btn-primary-50-outline.disabled {
  color: var(--bs-primary-100);
  border-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-100 Outline Button */
.btn-primary-100-outline {
  background-color: transparent;
  color: var(--bs-primary-100);
  border: 1px solid var(--bs-primary-100);
}

.btn-primary-100-outline .btn-icon {
  background-color: var(--bs-primary-100);
}

.btn-primary-100-outline:hover {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-500);
}

.btn-primary-100-outline:hover .btn-icon {
  background-color: var(--bs-primary-500);
}

.btn-primary-100-outline:active,
.btn-primary-100-outline.active {
  background-color: var(--bs-primary-200);
  color: var(--bs-primary-500);
}

.btn-primary-100-outline:active .btn-icon {
  background-color: var(--bs-primary-500);
}

.btn-primary-100-outline:focus {
  outline: 0.125rem solid var(--bs-primary-100);
  outline-offset: 0.125rem;
}

.btn-primary-100-outline:disabled,
.btn-primary-100-outline.disabled {
  color: var(--bs-primary-200);
  border-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-200 Outline Button */
.btn-primary-200-outline {
  background-color: transparent;
  color: var(--bs-primary-200);
  border: 1px solid var(--bs-primary-200);
}

.btn-primary-200-outline .btn-icon {
  background-color: var(--bs-primary-200);
}

.btn-primary-200-outline:hover {
  background-color: var(--bs-primary-200);
  color: var(--bs-primary-800);
}

.btn-primary-200-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-200-outline:active,
.btn-primary-200-outline.active {
  background-color: var(--bs-primary-300);
  color: var(--bs-primary-800);
}

.btn-primary-200-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-200-outline:focus {
  outline: 0.125rem solid var(--bs-primary-200);
  outline-offset: 0.125rem;
}

.btn-primary-200-outline:disabled,
.btn-primary-200-outline.disabled {
  color: var(--bs-primary-300);
  border-color: var(--bs-primary-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-300 Outline Button */
.btn-primary-300-outline {
  background-color: transparent;
  color: var(--bs-primary-300);
  border: 1px solid var(--bs-primary-300);
}

.btn-primary-300-outline .btn-icon {
  background-color: var(--bs-primary-300);
}

.btn-primary-300-outline:hover {
  background-color: var(--bs-primary-300);
  color: var(--bs-primary-800);
}

.btn-primary-300-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-300-outline:active,
.btn-primary-300-outline.active {
  background-color: var(--bs-primary-400);
  color: var(--bs-primary-800);
}

.btn-primary-300-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-300-outline:focus {
  outline: 0.125rem solid var(--bs-primary-300);
  outline-offset: 0.125rem;
}

.btn-primary-300-outline:disabled,
.btn-primary-300-outline.disabled {
  color: var(--bs-primary-400);
  border-color: var(--bs-primary-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-500 Outline Button */
.btn-primary-500-outline {
  background-color: transparent;
  color: var(--bs-primary-500);
  border: 1px solid var(--bs-primary-500);
}

.btn-primary-500-outline .btn-icon {
  background-color: var(--bs-primary-500);
}

.btn-primary-500-outline:hover {
  background-color: var(--bs-primary-500);
  color: white;
}

.btn-primary-500-outline:hover .btn-icon {
  background-color: white;
}

.btn-primary-500-outline:active,
.btn-primary-500-outline.active {
  background-color: var(--bs-primary-600);
  color: white;
}

.btn-primary-500-outline:active .btn-icon {
  background-color: white;
}

.btn-primary-500-outline:focus {
  outline: 0.125rem solid var(--bs-primary-500);
  outline-offset: 0.125rem;
}

.btn-primary-500-outline:disabled,
.btn-primary-500-outline.disabled {
  color: var(--bs-primary-600);
  border-color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-600 Outline Button */
.btn-primary-600-outline {
  background-color: transparent;
  color: var(--bs-primary-600);
  border: 1px solid var(--bs-primary-600);
}

.btn-primary-600-outline .btn-icon {
  background-color: var(--bs-primary-600);
}

.btn-primary-600-outline:hover {
  background-color: var(--bs-primary-600);
  color: white;
}

.btn-primary-600-outline:hover .btn-icon {
  background-color: white;
}

.btn-primary-600-outline:active,
.btn-primary-600-outline.active {
  background-color: var(--bs-primary-700);
  color: white;
}

.btn-primary-600-outline:active .btn-icon {
  background-color: white;
}

.btn-primary-600-outline:focus {
  outline: 0.125rem solid var(--bs-primary-600);
  outline-offset: 0.125rem;
}

.btn-primary-600-outline:disabled,
.btn-primary-600-outline.disabled {
  color: var(--bs-primary-700);
  border-color: var(--bs-primary-700);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-700 Outline Button */
.btn-primary-700-outline {
  background-color: transparent;
  color: var(--bs-primary-700);
  border: 1px solid var(--bs-primary-700);
}

.btn-primary-700-outline .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-700-outline:hover {
  background-color: var(--bs-primary-700);
  color: white;
}

.btn-primary-700-outline:hover .btn-icon {
  background-color: white;
}

.btn-primary-700-outline:active,
.btn-primary-700-outline.active {
  background-color: var(--bs-primary-800);
  color: white;
}

.btn-primary-700-outline:active .btn-icon {
  background-color: white;
}

.btn-primary-700-outline:focus {
  outline: 0.125rem solid var(--bs-primary-700);
  outline-offset: 0.125rem;
}

.btn-primary-700-outline:disabled,
.btn-primary-700-outline.disabled {
  color: var(--bs-primary-800);
  border-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-800 Outline Button */
.btn-primary-800-outline {
  background-color: transparent;
  color: var(--bs-primary-800);
  border: 1px solid var(--bs-primary-800);
}

.btn-primary-800-outline .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-800-outline:hover {
  background-color: var(--bs-primary-800);
  color: white;
}

.btn-primary-800-outline:hover .btn-icon {
  background-color: white;
}

.btn-primary-800-outline:active,
.btn-primary-800-outline.active {
  background-color: var(--bs-primary-900);
  color: white;
}

.btn-primary-800-outline:active .btn-icon {
  background-color: white;
}

.btn-primary-800-outline:focus {
  outline: 0.125rem solid var(--bs-primary-800);
  outline-offset: 0.125rem;
}

.btn-primary-800-outline:disabled,
.btn-primary-800-outline.disabled {
  color: var(--bs-primary-900);
  border-color: var(--bs-primary-900);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-900 Outline Button */
.btn-primary-900-outline {
  background-color: transparent;
  color: var(--bs-primary-900);
  border: 1px solid var(--bs-primary-900);
}

.btn-primary-900-outline .btn-icon {
  background-color: var(--bs-primary-900);
}

.btn-primary-900-outline:hover {
  background-color: var(--bs-primary-900);
  color: white;
}

.btn-primary-900-outline:hover .btn-icon {
  background-color: white;
}

.btn-primary-900-outline:active,
.btn-primary-900-outline.active {
  background-color: var(--bs-primary-800);
  color: white;
}

.btn-primary-900-outline:active .btn-icon {
  background-color: white;
}

.btn-primary-900-outline:focus {
  outline: 0.125rem solid var(--bs-primary-900);
  outline-offset: 0.125rem;
}

.btn-primary-900-outline:disabled,
.btn-primary-900-outline.disabled {
  color: var(--bs-primary-800);
  border-color: var(--bs-primary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   SECONDARY COLOR SHADE VARIATIONS
   ======================================== */

/* Secondary-25 Solid Button */
.btn-secondary-25 {
  background-color: var(--bs-secondary-25);
  color: var(--bs-secondary-800);
}

.btn-secondary-25 .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-25:hover {
  background-color: var(--bs-secondary-50);
}

.btn-secondary-25:active,
.btn-secondary-25.active {
  background-color: var(--bs-secondary-100);
}

.btn-secondary-25:focus {
  outline: 0.125rem solid var(--bs-secondary-25);
  outline-offset: 0.125rem;
}

.btn-secondary-25:disabled,
.btn-secondary-25.disabled {
  background-color: var(--bs-secondary-50);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-50 Solid Button */
.btn-secondary-50 {
  background-color: var(--bs-secondary-50);
  color: var(--bs-secondary-800);
}

.btn-secondary-50 .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-50:hover {
  background-color: var(--bs-secondary-100);
}

.btn-secondary-50:active,
.btn-secondary-50.active {
  background-color: var(--bs-secondary-200);
}

.btn-secondary-50:focus {
  outline: 0.125rem solid var(--bs-secondary-50);
  outline-offset: 0.125rem;
}

.btn-secondary-50:disabled,
.btn-secondary-50.disabled {
  background-color: var(--bs-secondary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-100 Solid Button */
.btn-secondary-100 {
  background-color: var(--bs-secondary-100);
  color: var(--bs-secondary-800);
}

.btn-secondary-100 .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-100:hover {
  background-color: var(--bs-secondary-200);
}

.btn-secondary-100:active,
.btn-secondary-100.active {
  background-color: var(--bs-secondary-300);
}

.btn-secondary-100:focus {
  outline: 0.125rem solid var(--bs-secondary-100);
  outline-offset: 0.125rem;
}

.btn-secondary-100:disabled,
.btn-secondary-100.disabled {
  background-color: var(--bs-secondary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-200 Solid Button */
.btn-secondary-200 {
  background-color: var(--bs-secondary-200);
  color: var(--bs-secondary-800);
}

.btn-secondary-200 .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-200:hover {
  background-color: var(--bs-secondary-300);
}

.btn-secondary-200:active,
.btn-secondary-200.active {
  background-color: var(--bs-secondary-400);
}

.btn-secondary-200:focus {
  outline: 0.125rem solid var(--bs-secondary-200);
  outline-offset: 0.125rem;
}

.btn-secondary-200:disabled,
.btn-secondary-200.disabled {
  background-color: var(--bs-secondary-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-300 Solid Button */
.btn-secondary-300 {
  background-color: var(--bs-secondary-300);
  color: var(--bs-secondary-800);
}

.btn-secondary-300 .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-300:hover {
  background-color: var(--bs-secondary-400);
}

.btn-secondary-300:active,
.btn-secondary-300.active {
  background-color: var(--bs-secondary-500);
}

.btn-secondary-300:focus {
  outline: 0.125rem solid var(--bs-secondary-300);
  outline-offset: 0.125rem;
}

.btn-secondary-300:disabled,
.btn-secondary-300.disabled {
  background-color: var(--bs-secondary-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-400 Solid Button */
.btn-secondary-400 {
  background-color: var(--bs-secondary-400);
  color: white;
}

.btn-secondary-400 .btn-icon {
  background-color: white;
}

.btn-secondary-400:hover {
  background-color: var(--bs-secondary-500);
}

.btn-secondary-400:active,
.btn-secondary-400.active {
  background-color: var(--bs-secondary-600);
}

.btn-secondary-400:focus {
  outline: 0.125rem solid var(--bs-secondary-400);
  outline-offset: 0.125rem;
}

.btn-secondary-400:disabled,
.btn-secondary-400.disabled {
  background-color: var(--bs-secondary-500);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-500 Solid Button */
.btn-secondary-500 {
  background-color: var(--bs-secondary-500);
  color: white;
}

.btn-secondary-500 .btn-icon {
  background-color: white;
}

.btn-secondary-500:hover {
  background-color: var(--bs-secondary-600);
}

.btn-secondary-500:active,
.btn-secondary-500.active {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-500:focus {
  outline: 0.125rem solid var(--bs-secondary-500);
  outline-offset: 0.125rem;
}

.btn-secondary-500:disabled,
.btn-secondary-500.disabled {
  background-color: var(--bs-secondary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-600 Solid Button */
.btn-secondary-600 {
  background-color: var(--bs-secondary-600);
  color: white;
}

.btn-secondary-600 .btn-icon {
  background-color: white;
}

.btn-secondary-600:hover {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-600:active,
.btn-secondary-600.active {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-600:focus {
  outline: 0.125rem solid var(--bs-secondary-600);
  outline-offset: 0.125rem;
}

.btn-secondary-600:disabled,
.btn-secondary-600.disabled {
  background-color: var(--bs-secondary-700);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-700 Solid Button */
.btn-secondary-700 {
  background-color: var(--bs-secondary-700);
  color: white;
}

.btn-secondary-700 .btn-icon {
  background-color: white;
}

.btn-secondary-700:hover {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-700:active,
.btn-secondary-700.active {
  background-color: var(--bs-secondary-900);
}

.btn-secondary-700:focus {
  outline: 0.125rem solid var(--bs-secondary-700);
  outline-offset: 0.125rem;
}

.btn-secondary-700:disabled,
.btn-secondary-700.disabled {
  background-color: var(--bs-secondary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-800 Solid Button */
.btn-secondary-800 {
  background-color: var(--bs-secondary-800);
  color: white;
}

.btn-secondary-800 .btn-icon {
  background-color: white;
}

.btn-secondary-800:hover {
  background-color: var(--bs-secondary-900);
}

.btn-secondary-800:active,
.btn-secondary-800.active {
  background-color: var(--bs-secondary-900);
}

.btn-secondary-800:focus {
  outline: 0.125rem solid var(--bs-secondary-800);
  outline-offset: 0.125rem;
}

.btn-secondary-800:disabled,
.btn-secondary-800.disabled {
  background-color: var(--bs-secondary-900);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-900 Solid Button */
.btn-secondary-900 {
  background-color: var(--bs-secondary-900);
  color: white;
}

.btn-secondary-900 .btn-icon {
  background-color: white;
}

.btn-secondary-900:hover {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-900:active,
.btn-secondary-900.active {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-900:focus {
  outline: 0.125rem solid var(--bs-secondary-900);
  outline-offset: 0.125rem;
}

.btn-secondary-900:disabled,
.btn-secondary-900.disabled {
  background-color: var(--bs-secondary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   SECONDARY COLOR SHADE OUTLINE VARIATIONS
   ======================================== */

/* Secondary-25 Outline Button */
.btn-secondary-25-outline {
  background-color: transparent;
  color: var(--bs-secondary-25);
  border: 1px solid var(--bs-secondary-25);
}

.btn-secondary-25-outline .btn-icon {
  background-color: var(--bs-secondary-25);
}

.btn-secondary-25-outline:hover {
  background-color: var(--bs-secondary-25);
  color: var(--bs-secondary-800);
}

.btn-secondary-25-outline:hover .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-25-outline:active,
.btn-secondary-25-outline.active {
  background-color: var(--bs-secondary-50);
  color: var(--bs-secondary-800);
}

.btn-secondary-25-outline:active .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-25-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-25);
  outline-offset: 0.125rem;
}

.btn-secondary-25-outline:disabled,
.btn-secondary-25-outline.disabled {
  color: var(--bs-secondary-50);
  border-color: var(--bs-secondary-50);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-50 Outline Button */
.btn-secondary-50-outline {
  background-color: transparent;
  color: var(--bs-secondary-50);
  border: 1px solid var(--bs-secondary-50);
}

.btn-secondary-50-outline .btn-icon {
  background-color: var(--bs-secondary-50);
}

.btn-secondary-50-outline:hover {
  background-color: var(--bs-secondary-50);
  color: var(--bs-secondary-800);
}

.btn-secondary-50-outline:hover .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-50-outline:active,
.btn-secondary-50-outline.active {
  background-color: var(--bs-secondary-100);
  color: var(--bs-secondary-800);
}

.btn-secondary-50-outline:active .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-50-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-50);
  outline-offset: 0.125rem;
}

.btn-secondary-50-outline:disabled,
.btn-secondary-50-outline.disabled {
  color: var(--bs-secondary-100);
  border-color: var(--bs-secondary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-100 Outline Button */
.btn-secondary-100-outline {
  background-color: transparent;
  color: var(--bs-secondary-100);
  border: 1px solid var(--bs-secondary-100);
}

.btn-secondary-100-outline .btn-icon {
  background-color: var(--bs-secondary-100);
}

.btn-secondary-100-outline:hover {
  background-color: var(--bs-secondary-100);
  color: var(--bs-secondary-800);
}

.btn-secondary-100-outline:hover .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-100-outline:active,
.btn-secondary-100-outline.active {
  background-color: var(--bs-secondary-200);
  color: var(--bs-secondary-800);
}

.btn-secondary-100-outline:active .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-100-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-100);
  outline-offset: 0.125rem;
}

.btn-secondary-100-outline:disabled,
.btn-secondary-100-outline.disabled {
  color: var(--bs-secondary-200);
  border-color: var(--bs-secondary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-200 Outline Button */
.btn-secondary-200-outline {
  background-color: transparent;
  color: var(--bs-secondary-200);
  border: 1px solid var(--bs-secondary-200);
}

.btn-secondary-200-outline .btn-icon {
  background-color: var(--bs-secondary-200);
}

.btn-secondary-200-outline:hover {
  background-color: var(--bs-secondary-200);
  color: var(--bs-secondary-800);
}

.btn-secondary-200-outline:hover .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-200-outline:active,
.btn-secondary-200-outline.active {
  background-color: var(--bs-secondary-300);
  color: var(--bs-secondary-800);
}

.btn-secondary-200-outline:active .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-200-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-200);
  outline-offset: 0.125rem;
}

.btn-secondary-200-outline:disabled,
.btn-secondary-200-outline.disabled {
  color: var(--bs-secondary-300);
  border-color: var(--bs-secondary-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-300 Outline Button */
.btn-secondary-300-outline {
  background-color: transparent;
  color: var(--bs-secondary-300);
  border: 1px solid var(--bs-secondary-300);
}

.btn-secondary-300-outline .btn-icon {
  background-color: var(--bs-secondary-300);
}

.btn-secondary-300-outline:hover {
  background-color: var(--bs-secondary-300);
  color: var(--bs-secondary-800);
}

.btn-secondary-300-outline:hover .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-300-outline:active,
.btn-secondary-300-outline.active {
  background-color: var(--bs-secondary-400);
  color: var(--bs-secondary-800);
}

.btn-secondary-300-outline:active .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-300-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-300);
  outline-offset: 0.125rem;
}

.btn-secondary-300-outline:disabled,
.btn-secondary-300-outline.disabled {
  color: var(--bs-secondary-400);
  border-color: var(--bs-secondary-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-400 Outline Button */
.btn-secondary-400-outline {
  background-color: transparent;
  color: var(--bs-secondary-400);
  border: 1px solid var(--bs-secondary-400);
}

.btn-secondary-400-outline .btn-icon {
  background-color: var(--bs-secondary-400);
}

.btn-secondary-400-outline:hover {
  background-color: var(--bs-secondary-400);
  color: white;
}

.btn-secondary-400-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-400-outline:active,
.btn-secondary-400-outline.active {
  background-color: var(--bs-secondary-500);
  color: white;
}

.btn-secondary-400-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-400-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-400);
  outline-offset: 0.125rem;
}

.btn-secondary-400-outline:disabled,
.btn-secondary-400-outline.disabled {
  color: var(--bs-secondary-500);
  border-color: var(--bs-secondary-500);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-500 Outline Button */
.btn-secondary-500-outline {
  background-color: transparent;
  color: var(--bs-secondary-500);
  border: 1px solid var(--bs-secondary-500);
}

.btn-secondary-500-outline .btn-icon {
  background-color: var(--bs-secondary-500);
}

.btn-secondary-500-outline:hover {
  background-color: var(--bs-secondary-500);
  color: white;
}

.btn-secondary-500-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-500-outline:active,
.btn-secondary-500-outline.active {
  background-color: var(--bs-secondary-600);
  color: white;
}

.btn-secondary-500-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-500-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-500);
  outline-offset: 0.125rem;
}

.btn-secondary-500-outline:disabled,
.btn-secondary-500-outline.disabled {
  color: var(--bs-secondary-600);
  border-color: var(--bs-secondary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-600 Outline Button */
.btn-secondary-600-outline {
  background-color: transparent;
  color: var(--bs-secondary-600);
  border: 1px solid var(--bs-secondary-600);
}

.btn-secondary-600-outline .btn-icon {
  background-color: var(--bs-secondary-600);
}

.btn-secondary-600-outline:hover {
  background-color: var(--bs-secondary-600);
  color: white;
}

.btn-secondary-600-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-600-outline:active,
.btn-secondary-600-outline.active {
  background-color: var(--bs-secondary-700);
  color: white;
}

.btn-secondary-600-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-600-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-600);
  outline-offset: 0.125rem;
}

.btn-secondary-600-outline:disabled,
.btn-secondary-600-outline.disabled {
  color: var(--bs-secondary-700);
  border-color: var(--bs-secondary-700);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-700 Outline Button */
.btn-secondary-700-outline {
  background-color: transparent;
  color: var(--bs-secondary-700);
  border: 1px solid var(--bs-secondary-700);
}

.btn-secondary-700-outline .btn-icon {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-700-outline:hover {
  background-color: var(--bs-secondary-700);
  color: white;
}

.btn-secondary-700-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-700-outline:active,
.btn-secondary-700-outline.active {
  background-color: var(--bs-secondary-800);
  color: white;
}

.btn-secondary-700-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-700-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-700);
  outline-offset: 0.125rem;
}

.btn-secondary-700-outline:disabled,
.btn-secondary-700-outline.disabled {
  color: var(--bs-secondary-800);
  border-color: var(--bs-secondary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-800 Outline Button */
.btn-secondary-800-outline {
  background-color: transparent;
  color: var(--bs-secondary-800);
  border: 1px solid var(--bs-secondary-800);
}

.btn-secondary-800-outline .btn-icon {
  background-color: var(--bs-secondary-800);
}

.btn-secondary-800-outline:hover {
  background-color: var(--bs-secondary-800);
  color: white;
}

.btn-secondary-800-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-800-outline:active,
.btn-secondary-800-outline.active {
  background-color: var(--bs-secondary-900);
  color: white;
}

.btn-secondary-800-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-800-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-800);
  outline-offset: 0.125rem;
}

.btn-secondary-800-outline:disabled,
.btn-secondary-800-outline.disabled {
  color: var(--bs-secondary-900);
  border-color: var(--bs-secondary-900);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary-900 Outline Button */
.btn-secondary-900-outline {
  background-color: transparent;
  color: var(--bs-secondary-900);
  border: 1px solid var(--bs-secondary-900);
}

.btn-secondary-900-outline .btn-icon {
  background-color: var(--bs-secondary-900);
}

.btn-secondary-900-outline:hover {
  background-color: var(--bs-secondary-900);
  color: white;
}

.btn-secondary-900-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-900-outline:active,
.btn-secondary-900-outline.active {
  background-color: var(--bs-secondary-800);
  color: white;
}

.btn-secondary-900-outline:active .btn-icon {
  background-color: white;
}

.btn-secondary-900-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-900);
  outline-offset: 0.125rem;
}

.btn-secondary-900-outline:disabled,
.btn-secondary-900-outline.disabled {
  color: var(--bs-secondary-800);
  border-color: var(--bs-secondary-800);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL COLOR SHADE VARIATIONS
   ======================================== */

/* Neutral-100 Solid Button */
.btn-neutral-100 {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.btn-neutral-100 .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-100:hover {
  background-color: var(--neutral-200);
}

.btn-neutral-100:active,
.btn-neutral-100.active {
  background-color: var(--neutral-300);
}

.btn-neutral-100:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-100:disabled,
.btn-neutral-100.disabled {
  background-color: var(--neutral-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-200 Solid Button */
.btn-neutral-200 {
  background-color: var(--neutral-200);
  color: var(--neutral-600);
}

.btn-neutral-200 .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-200:hover {
  background-color: var(--neutral-300);
}

.btn-neutral-200:active,
.btn-neutral-200.active {
  background-color: var(--neutral-400);
}

.btn-neutral-200:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-200:disabled,
.btn-neutral-200.disabled {
  background-color: var(--neutral-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-300 Solid Button */
.btn-neutral-300 {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.btn-neutral-300 .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-300:hover {
  background-color: var(--neutral-400);
}

.btn-neutral-300:active,
.btn-neutral-300.active {
  background-color: var(--neutral-500);
}

.btn-neutral-300:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-300:disabled,
.btn-neutral-300.disabled {
  background-color: var(--neutral-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-400 Solid Button */
.btn-neutral-400 {
  background-color: var(--neutral-400);
  color: white;
}

.btn-neutral-400 .btn-icon {
  background-color: white;
}

.btn-neutral-400:hover {
  background-color: var(--neutral-500);
}

.btn-neutral-400:active,
.btn-neutral-400.active {
  background-color: var(--neutral-600);
}

.btn-neutral-400:focus {
  outline: 0.125rem solid var(--neutral-400);
  outline-offset: 0.125rem;
}

.btn-neutral-400:disabled,
.btn-neutral-400.disabled {
  background-color: var(--neutral-500);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-500 Solid Button */
.btn-neutral-500 {
  background-color: var(--neutral-500);
  color: white;
}

.btn-neutral-500 .btn-icon {
  background-color: white;
}

.btn-neutral-500:hover {
  background-color: var(--neutral-600);
}

.btn-neutral-500:active,
.btn-neutral-500.active {
  background-color: var(--neutral-600);
}

.btn-neutral-500:focus {
  outline: 0.125rem solid var(--neutral-500);
  outline-offset: 0.125rem;
}

.btn-neutral-500:disabled,
.btn-neutral-500.disabled {
  background-color: var(--neutral-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-600 Solid Button (already exists, keeping for consistency) */
/* Neutral-700 Solid Button */
.btn-neutral-700 {
  background-color: var(--neutral-700);
  color: white;
}

.btn-neutral-700 .btn-icon {
  background-color: white;
}

.btn-neutral-700:hover {
  background-color: var(--neutral-600);
}

.btn-neutral-700:active,
.btn-neutral-700.active {
  background-color: var(--neutral-600);
}

.btn-neutral-700:focus {
  outline: 0.125rem solid var(--neutral-700);
  outline-offset: 0.125rem;
}

.btn-neutral-700:disabled,
.btn-neutral-700.disabled {
  background-color: var(--neutral-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL COLOR SHADE OUTLINE VARIATIONS
   ======================================== */

/* Neutral-100 Outline Button */
.btn-neutral-100-outline {
  background-color: transparent;
  color: var(--neutral-100);
  border: 1px solid var(--neutral-100);
}

.btn-neutral-100-outline .btn-icon {
  background-color: var(--neutral-100);
}

.btn-neutral-100-outline:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.btn-neutral-100-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-100-outline:active,
.btn-neutral-100-outline.active {
  background-color: var(--neutral-200);
  color: var(--neutral-600);
}

.btn-neutral-100-outline:active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-100-outline:focus {
  outline: 0.125rem solid var(--neutral-100);
  outline-offset: 0.125rem;
}

.btn-neutral-100-outline:disabled,
.btn-neutral-100-outline.disabled {
  color: var(--neutral-200);
  border-color: var(--neutral-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-200 Outline Button */
.btn-neutral-200-outline {
  background-color: transparent;
  color: var(--neutral-200);
  border: 1px solid var(--neutral-200);
}

.btn-neutral-200-outline .btn-icon {
  background-color: var(--neutral-200);
}

.btn-neutral-200-outline:hover {
  background-color: var(--neutral-200);
  color: var(--neutral-600);
}

.btn-neutral-200-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-200-outline:active,
.btn-neutral-200-outline.active {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.btn-neutral-200-outline:active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-200-outline:focus {
  outline: 0.125rem solid var(--neutral-200);
  outline-offset: 0.125rem;
}

.btn-neutral-200-outline:disabled,
.btn-neutral-200-outline.disabled {
  color: var(--neutral-300);
  border-color: var(--neutral-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-300 Outline Button */
.btn-neutral-300-outline {
  background-color: transparent;
  color: var(--neutral-300);
  border: 1px solid var(--neutral-300);
}

.btn-neutral-300-outline .btn-icon {
  background-color: var(--neutral-300);
}

.btn-neutral-300-outline:hover {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.btn-neutral-300-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-300-outline:active,
.btn-neutral-300-outline.active {
  background-color: var(--neutral-400);
  color: var(--neutral-600);
}

.btn-neutral-300-outline:active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-300-outline:focus {
  outline: 0.125rem solid var(--neutral-300);
  outline-offset: 0.125rem;
}

.btn-neutral-300-outline:disabled,
.btn-neutral-300-outline.disabled {
  color: var(--neutral-400);
  border-color: var(--neutral-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-400 Outline Button */
.btn-neutral-400-outline {
  background-color: transparent;
  color: var(--neutral-400);
  border: 1px solid var(--neutral-400);
}

.btn-neutral-400-outline .btn-icon {
  background-color: var(--neutral-400);
}

.btn-neutral-400-outline:hover {
  background-color: var(--neutral-400);
  color: white;
}

.btn-neutral-400-outline:hover .btn-icon {
  background-color: white;
}

.btn-neutral-400-outline:active,
.btn-neutral-400-outline.active {
  background-color: var(--neutral-500);
  color: white;
}

.btn-neutral-400-outline:active .btn-icon {
  background-color: white;
}

.btn-neutral-400-outline:focus {
  outline: 0.125rem solid var(--neutral-400);
  outline-offset: 0.125rem;
}

.btn-neutral-400-outline:disabled,
.btn-neutral-400-outline.disabled {
  color: var(--neutral-500);
  border-color: var(--neutral-500);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-500 Outline Button */
.btn-neutral-500-outline {
  background-color: transparent;
  color: var(--neutral-500);
  border: 1px solid var(--neutral-500);
}

.btn-neutral-500-outline .btn-icon {
  background-color: var(--neutral-500);
}

.btn-neutral-500-outline:hover {
  background-color: var(--neutral-500);
  color: white;
}

.btn-neutral-500-outline:hover .btn-icon {
  background-color: white;
}

.btn-neutral-500-outline:active,
.btn-neutral-500-outline.active {
  background-color: var(--neutral-600);
  color: white;
}

.btn-neutral-500-outline:active .btn-icon {
  background-color: white;
}

.btn-neutral-500-outline:focus {
  outline: 0.125rem solid var(--neutral-500);
  outline-offset: 0.125rem;
}

.btn-neutral-500-outline:disabled,
.btn-neutral-500-outline.disabled {
  color: var(--neutral-600);
  border-color: var(--neutral-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-600 Outline Button (already exists, keeping for consistency) */

/* Neutral-700 Outline Button */
.btn-neutral-700-outline {
  background-color: transparent;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-700);
}

.btn-neutral-700-outline .btn-icon {
  background-color: var(--neutral-700);
}

.btn-neutral-700-outline:hover {
  background-color: var(--neutral-700);
  color: white;
}

.btn-neutral-700-outline:hover .btn-icon {
  background-color: white;
}

.btn-neutral-700-outline:active,
.btn-neutral-700-outline.active {
  background-color: var(--neutral-600);
  color: white;
}

.btn-neutral-700-outline:active .btn-icon {
  background-color: white;
}

.btn-neutral-700-outline:focus {
  outline: 0.125rem solid var(--neutral-700);
  outline-offset: 0.125rem;
}

.btn-neutral-700-outline:disabled,
.btn-neutral-700-outline.disabled {
  color: var(--neutral-600);
  border-color: var(--neutral-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   MISSING OUTLINE VARIATIONS
   ======================================== */

/* Neutral Light Outline */
.btn-neutral-light-outline {
  background-color: transparent;
  color: var(--neutral-600);
  border: 1px solid var(--neutral-200);
}

.btn-neutral-light-outline .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-light-outline:hover {
  background-color: rgba(var(--btn-neutral-light-shadow-rgb), 0.05);
}

.btn-neutral-light-outline:active,
.btn-neutral-light-outline.active {
  background-color: rgba(var(--btn-neutral-light-shadow-rgb), 0.1);
}

.btn-neutral-light-outline:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-light-outline:disabled,
.btn-neutral-light-outline.disabled {
  color: var(--neutral-500);
  border-color: var(--neutral-300);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary Light Outline */
.btn-primary-light-outline {
  background-color: transparent;
  color: var(--bs-primary-100);
  border: 1px solid var(--bs-primary-100);
}

.btn-primary-light-outline .btn-icon {
  background-color: var(--bs-primary-100);
}

.btn-primary-light-outline:hover {
  background-color: var(--bs-primary-25);
  color: var(--bs-primary-700);
}

.btn-primary-light-outline:hover .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-light-outline:active,
.btn-primary-light-outline.active {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-700);
}

.btn-primary-light-outline:active .btn-icon,
.btn-primary-light-outline.active .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-light-outline:focus {
  outline: 0.125rem solid var(--bs-primary-700);
  outline-offset: 0.125rem;
}

.btn-primary-light-outline:disabled,
.btn-primary-light-outline.disabled {
  color: var(--bs-primary-100);
  border-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary Light Outline */
.btn-secondary-light-outline {
  background-color: transparent;
  color: var(--bs-secondary-700);
  border: 1px solid var(--bs-secondary-100);
}

.btn-secondary-light-outline .btn-icon {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-light-outline:hover {
  background-color: var(--bs-secondary-25);
  color: var(--bs-secondary-700);
}

.btn-secondary-light-outline:hover .btn-icon {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-light-outline:active,
.btn-secondary-light-outline.active {
  background-color: var(--bs-secondary-50);
  color: var(--bs-secondary-700);
}

.btn-secondary-light-outline:active .btn-icon,
.btn-secondary-light-outline.active .btn-icon {
  background-color: var(--bs-secondary-700);
}

.btn-secondary-light-outline:focus {
  outline: 0.125rem solid var(--bs-secondary-700);
  outline-offset: 0.125rem;
}

.btn-secondary-light-outline:disabled,
.btn-secondary-light-outline.disabled {
  color: var(--bs-secondary-600);
  border-color: var(--bs-secondary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success Solid Outline */
.btn-success-solid-outline {
  background-color: transparent;
  color: var(--bs-success);
  border: 1px solid var(--bs-success);
}

.btn-success-solid-outline .btn-icon {
  background-color: var(--bs-success);
}

.btn-success-solid-outline:hover {
  background-color: rgba(var(--btn-success-shadow-rgb), 0.05);
}

.btn-success-solid-outline:active,
.btn-success-solid-outline.active {
  background-color: rgba(var(--btn-success-shadow-rgb), 0.1);
}

.btn-success-solid-outline:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

.btn-success-solid-outline:disabled,
.btn-success-solid-outline.disabled {
  color: var(--btn-success-active);
  border-color: var(--btn-success-active);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   SEMANTIC COLOR BUTTON VARIATIONS
   ======================================== */

/* Link Color Button (Primary-600) - Solid */
.btn-link {
  background-color: var(--bs-link-color);
  color: white;
}

.btn-link .btn-icon {
  background-color: white;
}

.btn-link:hover {
  background-color: var(--bs-link-hover-color);
}

.btn-link:active,
.btn-link.active {
  background-color: var(--bs-primary-700);
}

.btn-link:focus {
  outline: 0.125rem solid var(--bs-link-color);
  outline-offset: 0.125rem;
}

.btn-link:disabled,
.btn-link.disabled {
  background-color: var(--bs-link-hover-color);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Link Color Button Outline */
.btn-link-outline {
  background-color: transparent;
  color: var(--bs-link-color);
  border: 1px solid var(--bs-link-color);
}

.btn-link-outline .btn-icon {
  background-color: var(--bs-link-color);
}

.btn-link-outline:hover {
  background-color: var(--bs-link-color);
  color: white;
}

.btn-link-outline:hover .btn-icon {
  background-color: white;
}

.btn-link-outline:active,
.btn-link-outline.active {
  background-color: var(--bs-link-hover-color);
  color: white;
}

.btn-link-outline:active .btn-icon {
  background-color: white;
}

.btn-link-outline:focus {
  outline: 0.125rem solid var(--bs-link-color);
  outline-offset: 0.125rem;
}

.btn-link-outline:disabled,
.btn-link-outline.disabled {
  color: var(--bs-link-hover-color);
  border-color: var(--bs-link-hover-color);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success-100 Light Button (Light Emerald) - Solid */
.btn-success-100 {
  background-color: var(--bs-success-100);
  color: var(--bs-primary-700);
  border: 1px solid var(--bs-primary-200);
}

.btn-success-100 .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-success-100:hover {
  background-color: rgba(186, 250, 234, 0.8);
}

.btn-success-100:active,
.btn-success-100.active {
  background-color: rgba(154, 245, 222, 0.9);
}

.btn-success-100:focus {
  outline: 0.125rem solid var(--bs-primary-700);
  outline-offset: 0.125rem;
}

.btn-success-100:disabled,
.btn-success-100.disabled {
  background-color: rgba(186, 250, 234, 0.6);
  color: var(--bs-primary-600);
  border-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success-100 Light Button Outline */
.btn-success-100-outline {
  background-color: transparent;
  color: var(--bs-success-100);
  border: 1px solid var(--bs-success-100);
}

.btn-success-100-outline .btn-icon {
  background-color: var(--bs-success-100);
}

.btn-success-100-outline:hover {
  background-color: var(--bs-success-100);
  color: var(--bs-primary-700);
}

.btn-success-100-outline:hover .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-success-100-outline:active,
.btn-success-100-outline.active {
  background-color: rgba(186, 250, 234, 0.8);
  color: var(--bs-primary-700);
}

.btn-success-100-outline:active .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-success-100-outline:focus {
  outline: 0.125rem solid var(--bs-success-100);
  outline-offset: 0.125rem;
}

.btn-success-100-outline:disabled,
.btn-success-100-outline.disabled {
  color: rgba(186, 250, 234, 0.6);
  border-color: rgba(186, 250, 234, 0.6);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer Link Color Button - Solid */
.btn-footer-link {
  background-color: var(--footer-link-color);
  color: var(--bs-primary-800);
}

.btn-footer-link .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-footer-link:hover {
  background-color: var(--bs-primary-200);
}

.btn-footer-link:active,
.btn-footer-link.active {
  background-color: var(--bs-primary-300);
}

.btn-footer-link:focus {
  outline: 0.125rem solid var(--footer-link-color);
  outline-offset: 0.125rem;
}

.btn-footer-link:disabled,
.btn-footer-link.disabled {
  background-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer Link Color Button Outline */
.btn-footer-link-outline {
  background-color: transparent;
  color: var(--footer-link-color);
  border: 1px solid var(--footer-link-color);
}

.btn-footer-link-outline .btn-icon {
  background-color: var(--footer-link-color);
}

.btn-footer-link-outline:hover {
  background-color: var(--footer-link-color);
  color: var(--bs-primary-800);
}

.btn-footer-link-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-footer-link-outline:active,
.btn-footer-link-outline.active {
  background-color: var(--bs-primary-200);
  color: var(--bs-primary-800);
}

.btn-footer-link-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-footer-link-outline:focus {
  outline: 0.125rem solid var(--footer-link-color);
  outline-offset: 0.125rem;
}

.btn-footer-link-outline:disabled,
.btn-footer-link-outline.disabled {
  color: var(--bs-primary-200);
  border-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer Border Color Button - Solid */
.btn-footer-border {
  background-color: var(--footer-border-color);
  color: white;
}

.btn-footer-border .btn-icon {
  background-color: white;
}

.btn-footer-border:hover {
  background-color: var(--bs-primary-600);
}

.btn-footer-border:active,
.btn-footer-border.active {
  background-color: var(--bs-primary-700);
}

.btn-footer-border:focus {
  outline: 0.125rem solid var(--footer-border-color);
  outline-offset: 0.125rem;
}

.btn-footer-border:disabled,
.btn-footer-border.disabled {
  background-color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer Border Color Button Outline */
.btn-footer-border-outline {
  background-color: transparent;
  color: var(--footer-border-color);
  border: 1px solid var(--footer-border-color);
}

.btn-footer-border-outline .btn-icon {
  background-color: var(--footer-border-color);
}

.btn-footer-border-outline:hover {
  background-color: var(--footer-border-color);
  color: white;
}

.btn-footer-border-outline:hover .btn-icon {
  background-color: white;
}

.btn-footer-border-outline:active,
.btn-footer-border-outline.active {
  background-color: var(--bs-primary-600);
  color: white;
}

.btn-footer-border-outline:active .btn-icon {
  background-color: white;
}

.btn-footer-border-outline:focus {
  outline: 0.125rem solid var(--footer-border-color);
  outline-offset: 0.125rem;
}

.btn-footer-border-outline:disabled,
.btn-footer-border-outline.disabled {
  color: var(--bs-primary-600);
  border-color: var(--bs-primary-600);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   PRIMARY-100 BUTTON VARIATIONS
   ======================================== */

/* Primary-100 Solid Button */
.btn-primary-100 {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-800);
}

.btn-primary-100 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-100:hover {
  background-color: var(--bs-primary-200);
}

.btn-primary-100:active,
.btn-primary-100.active {
  background-color: var(--bs-primary-300);
}

.btn-primary-100:focus {
  outline: 0.125rem solid var(--bs-primary-100);
  outline-offset: 0.125rem;
}

.btn-primary-100:disabled,
.btn-primary-100.disabled {
  background-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-100 Outline Button */
.btn-primary-100-outline {
  background-color: transparent;
  color: var(--bs-primary-100);
  border: 1px solid var(--bs-primary-100);
}

.btn-primary-100-outline .btn-icon {
  background-color: var(--bs-primary-100);
}

.btn-primary-100-outline:hover {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-800);
}

.btn-primary-100-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-100-outline:active,
.btn-primary-100-outline.active {
  background-color: var(--bs-primary-200);
  color: var(--bs-primary-800);
}

.btn-primary-100-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-100-outline:focus {
  outline: 0.125rem solid var(--bs-primary-100);
  outline-offset: 0.125rem;
}

.btn-primary-100-outline:disabled,
.btn-primary-100-outline.disabled {
  color: var(--bs-primary-200);
  border-color: var(--bs-primary-200);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   PRIMARY-50 BUTTON VARIATIONS
   ======================================== */

/* Primary-50 Solid Button */
.btn-primary-50 {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-800);
  border: 1px solid var(--bs-primary-50);
}

.btn-primary-50 .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50:hover {
  background-color: var(--bs-primary-100);
}

.btn-primary-50:active,
.btn-primary-50.active {
  background-color: var(--bs-primary-200);
}

.btn-primary-50:focus {
  outline: 0.125rem solid var(--bs-primary-50);
  outline-offset: 0.125rem;
}

.btn-primary-50:disabled,
.btn-primary-50.disabled {
  background-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary-50 Outline Button */
.btn-primary-50-outline {
  background-color: transparent;
  color: var(--bs-primary-50);
  border: 1px solid var(--bs-primary-50);
}

.btn-primary-50-outline .btn-icon {
  background-color: var(--bs-primary-50);
}

.btn-primary-50-outline:hover {
  background-color: var(--bs-primary-50);
  color: var(--bs-primary-800);
}

.btn-primary-50-outline:hover .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50-outline:active,
.btn-primary-50-outline.active {
  background-color: var(--bs-primary-100);
  color: var(--bs-primary-800);
}

.btn-primary-50-outline:active .btn-icon {
  background-color: var(--bs-primary-800);
}

.btn-primary-50-outline:focus {
  outline: 0.125rem solid var(--bs-primary-50);
  outline-offset: 0.125rem;
}

.btn-primary-50-outline:disabled,
.btn-primary-50-outline.disabled {
  color: var(--bs-primary-100);
  border-color: var(--bs-primary-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL-50 BUTTON VARIATIONS
   ======================================== */

/* Neutral-50 Solid Button */
.btn-neutral-50 {
  background-color: var(--neutral-50);
  color: var(--neutral-600);
}

.btn-neutral-50 .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-50:hover {
  background-color: var(--neutral-100);
}

.btn-neutral-50:active,
.btn-neutral-50.active {
  background-color: var(--neutral-200);
}

.btn-neutral-50:focus {
  outline: 0.125rem solid var(--neutral-600);
  outline-offset: 0.125rem;
}

.btn-neutral-50:disabled,
.btn-neutral-50.disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-400);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Neutral-50 Outline Button */
.btn-neutral-50-outline {
  background-color: transparent;
  color: var(--neutral-50);
  border: 1px solid var(--neutral-50);
}

.btn-neutral-50-outline .btn-icon {
  background-color: var(--neutral-50);
}

.btn-neutral-50-outline:hover {
  background-color: var(--neutral-50);
  color: var(--neutral-600);
}

.btn-neutral-50-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-50-outline:active,
.btn-neutral-50-outline.active {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.btn-neutral-50-outline:active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-50-outline:focus {
  outline: 0.125rem solid var(--neutral-50);
  outline-offset: 0.125rem;
}

.btn-neutral-50-outline:disabled,
.btn-neutral-50-outline.disabled {
  color: var(--neutral-100);
  border-color: var(--neutral-100);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   SOLID BUTTON BORDERS (all states)
   Border color always matches background color
   ======================================== */

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

.btn-primary:active,
.btn-primary.active {
  border-color: var(--bs-primary-500);
}

.btn-primary:disabled,
.btn-primary.disabled {
  border-color: var(--bs-primary-600);
}

/* --- btn-secondary --- */
.btn-secondary:hover {
  border-color: var(--bs-secondary-500);
}

.btn-secondary:active,
.btn-secondary.active {
  border-color: var(--bs-secondary-600);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  border-color: var(--bs-secondary-600);
}

/* --- btn-success --- */
.btn-success:hover {
  border-color: var(--btn-success-hover);
}

.btn-success:active,
.btn-success.active {
  border-color: var(--btn-success-active);
}

.btn-success:disabled,
.btn-success.disabled {
  border-color: var(--btn-success-active);
}

/* --- btn-success-solid --- */
.btn-success-solid:hover {
  border-color: var(--btn-success-hover);
}

.btn-success-solid:active,
.btn-success-solid.active {
  border-color: var(--btn-success-active);
}

.btn-success-solid:disabled,
.btn-success-solid.disabled {
  border-color: var(--btn-success-active);
}

/* --- btn-neutral-dark --- */
.btn-neutral-dark:hover {
  border-color: var(--neutral-500);
}

.btn-neutral-dark:active,
.btn-neutral-dark.active {
  border-color: var(--neutral-600);
}

.btn-neutral-dark:disabled,
.btn-neutral-dark.disabled {
  border-color: var(--neutral-500);
}

/* --- btn-neutral-light --- */
.btn-neutral-light:hover {
  border-color: var(--neutral-200);
}

.btn-neutral-light:active,
.btn-neutral-light.active {
  border-color: var(--neutral-300);
}

.btn-neutral-light:disabled,
.btn-neutral-light.disabled {
  border-color: var(--neutral-200);
}

/* --- btn-dark --- */
.btn-dark:hover {
  border-color: var(--bs-primary-400);
}

.btn-dark:active,
.btn-dark.active {
  border-color: var(--bs-primary-400);
}

.btn-dark:disabled,
.btn-dark.disabled {
  border-color: var(--bs-primary-800);
}

/* --- btn-primary-light --- */
.btn-primary-light:hover {
  border-color: var(--bs-primary-50);
}

.btn-primary-light:active,
.btn-primary-light.active {
  border-color: var(--bs-primary-100);
}

.btn-primary-light:disabled,
.btn-primary-light.disabled {
  border-color: var(--bs-primary-50);
}

/* --- btn-secondary-light --- */
.btn-secondary-light:hover {
  border-color: var(--bs-secondary-50);
}

.btn-secondary-light:active,
.btn-secondary-light.active {
  border-color: var(--bs-secondary-100);
}

.btn-secondary-light:disabled,
.btn-secondary-light.disabled {
  border-color: var(--bs-secondary-50);
}

/* --- Primary shade solid buttons --- */
.btn-primary-25:hover {
  border-color: var(--bs-primary-50);
}

.btn-primary-25:active,
.btn-primary-25.active {
  border-color: var(--bs-primary-100);
}

.btn-primary-25:disabled,
.btn-primary-25.disabled {
  border-color: var(--bs-primary-50);
}

.btn-primary-50:hover {
  border-color: var(--bs-primary-100);
}

.btn-primary-50:active,
.btn-primary-50.active {
  border-color: var(--bs-primary-200);
}

.btn-primary-50:disabled,
.btn-primary-50.disabled {
  border-color: var(--bs-primary-100);
}

.btn-primary-100:hover {
  border-color: var(--bs-primary-200);
}

.btn-primary-100:active,
.btn-primary-100.active {
  border-color: var(--bs-primary-300);
}

.btn-primary-100:disabled,
.btn-primary-100.disabled {
  border-color: var(--bs-primary-200);
}

.btn-primary-200:hover {
  border-color: var(--bs-primary-300);
}

.btn-primary-200:active,
.btn-primary-200.active {
  border-color: var(--bs-primary-400);
}

.btn-primary-200:disabled,
.btn-primary-200.disabled {
  border-color: var(--bs-primary-300);
}

.btn-primary-300:hover {
  border-color: var(--bs-primary-400);
}

.btn-primary-300:active,
.btn-primary-300.active {
  border-color: var(--bs-primary-500);
}

.btn-primary-300:disabled,
.btn-primary-300.disabled {
  border-color: var(--bs-primary-400);
}

.btn-primary-500:hover {
  border-color: var(--bs-primary-600);
}

.btn-primary-500:active,
.btn-primary-500.active {
  border-color: var(--bs-primary-700);
}

.btn-primary-500:disabled,
.btn-primary-500.disabled {
  border-color: var(--bs-primary-600);
}

.btn-primary-600:hover {
  border-color: var(--bs-primary-700);
}

.btn-primary-600:active,
.btn-primary-600.active {
  border-color: var(--bs-primary-800);
}

.btn-primary-600:disabled,
.btn-primary-600.disabled {
  border-color: var(--bs-primary-700);
}

.btn-primary-700:hover {
  border-color: var(--bs-primary-800);
}

.btn-primary-700:active,
.btn-primary-700.active {
  border-color: var(--bs-primary-900);
}

.btn-primary-700:disabled,
.btn-primary-700.disabled {
  border-color: var(--bs-primary-800);
}

.btn-primary-800:hover {
  border-color: var(--bs-primary-900);
}

.btn-primary-800:active,
.btn-primary-800.active {
  border-color: var(--bs-primary-900);
}

.btn-primary-800:disabled,
.btn-primary-800.disabled {
  border-color: var(--bs-primary-900);
}

.btn-primary-900:hover {
  border-color: var(--bs-primary-800);
}

.btn-primary-900:active,
.btn-primary-900.active {
  border-color: var(--bs-primary-800);
}

.btn-primary-900:disabled,
.btn-primary-900.disabled {
  border-color: var(--bs-primary-800);
}

/* --- Secondary shade solid buttons --- */
.btn-secondary-25:hover {
  border-color: var(--bs-secondary-50);
}

.btn-secondary-25:active,
.btn-secondary-25.active {
  border-color: var(--bs-secondary-100);
}

.btn-secondary-25:disabled,
.btn-secondary-25.disabled {
  border-color: var(--bs-secondary-50);
}

.btn-secondary-50:hover {
  border-color: var(--bs-secondary-100);
}

.btn-secondary-50:active,
.btn-secondary-50.active {
  border-color: var(--bs-secondary-200);
}

.btn-secondary-50:disabled,
.btn-secondary-50.disabled {
  border-color: var(--bs-secondary-100);
}

.btn-secondary-100:hover {
  border-color: var(--bs-secondary-200);
}

.btn-secondary-100:active,
.btn-secondary-100.active {
  border-color: var(--bs-secondary-300);
}

.btn-secondary-100:disabled,
.btn-secondary-100.disabled {
  border-color: var(--bs-secondary-200);
}

.btn-secondary-200:hover {
  border-color: var(--bs-secondary-300);
}

.btn-secondary-200:active,
.btn-secondary-200.active {
  border-color: var(--bs-secondary-400);
}

.btn-secondary-200:disabled,
.btn-secondary-200.disabled {
  border-color: var(--bs-secondary-300);
}

.btn-secondary-300:hover {
  border-color: var(--bs-secondary-400);
}

.btn-secondary-300:active,
.btn-secondary-300.active {
  border-color: var(--bs-secondary-500);
}

.btn-secondary-300:disabled,
.btn-secondary-300.disabled {
  border-color: var(--bs-secondary-400);
}

.btn-secondary-400:hover {
  border-color: var(--bs-secondary-500);
}

.btn-secondary-400:active,
.btn-secondary-400.active {
  border-color: var(--bs-secondary-600);
}

.btn-secondary-400:disabled,
.btn-secondary-400.disabled {
  border-color: var(--bs-secondary-500);
}

.btn-secondary-500:hover {
  border-color: var(--bs-secondary-600);
}

.btn-secondary-500:active,
.btn-secondary-500.active {
  border-color: var(--bs-secondary-700);
}

.btn-secondary-500:disabled,
.btn-secondary-500.disabled {
  border-color: var(--bs-secondary-600);
}

.btn-secondary-600:hover {
  border-color: var(--bs-secondary-700);
}

.btn-secondary-600:active,
.btn-secondary-600.active {
  border-color: var(--bs-secondary-800);
}

.btn-secondary-600:disabled,
.btn-secondary-600.disabled {
  border-color: var(--bs-secondary-700);
}

.btn-secondary-700:hover {
  border-color: var(--bs-secondary-800);
}

.btn-secondary-700:active,
.btn-secondary-700.active {
  border-color: var(--bs-secondary-900);
}

.btn-secondary-700:disabled,
.btn-secondary-700.disabled {
  border-color: var(--bs-secondary-800);
}

.btn-secondary-800:hover {
  border-color: var(--bs-secondary-900);
}

.btn-secondary-800:active,
.btn-secondary-800.active {
  border-color: var(--bs-secondary-900);
}

.btn-secondary-800:disabled,
.btn-secondary-800.disabled {
  border-color: var(--bs-secondary-900);
}

.btn-secondary-900:hover {
  border-color: var(--bs-secondary-800);
}

.btn-secondary-900:active,
.btn-secondary-900.active {
  border-color: var(--bs-secondary-800);
}

.btn-secondary-900:disabled,
.btn-secondary-900.disabled {
  border-color: var(--bs-secondary-800);
}

/* --- Neutral shade solid buttons --- */
.btn-neutral-50:hover {
  border-color: var(--neutral-100);
}

.btn-neutral-50:active,
.btn-neutral-50.active {
  border-color: var(--neutral-200);
}

.btn-neutral-50:disabled,
.btn-neutral-50.disabled {
  border-color: var(--neutral-100);
}

.btn-neutral-100:hover {
  border-color: var(--neutral-200);
}

.btn-neutral-100:active,
.btn-neutral-100.active {
  border-color: var(--neutral-300);
}

.btn-neutral-100:disabled,
.btn-neutral-100.disabled {
  border-color: var(--neutral-200);
}

.btn-neutral-200:hover {
  border-color: var(--neutral-300);
}

.btn-neutral-200:active,
.btn-neutral-200.active {
  border-color: var(--neutral-400);
}

.btn-neutral-200:disabled,
.btn-neutral-200.disabled {
  border-color: var(--neutral-300);
}

.btn-neutral-300:hover {
  border-color: var(--neutral-400);
}

.btn-neutral-300:active,
.btn-neutral-300.active {
  border-color: var(--neutral-500);
}

.btn-neutral-300:disabled,
.btn-neutral-300.disabled {
  border-color: var(--neutral-400);
}

.btn-neutral-400:hover {
  border-color: var(--neutral-500);
}

.btn-neutral-400:active,
.btn-neutral-400.active {
  border-color: var(--neutral-600);
}

.btn-neutral-400:disabled,
.btn-neutral-400.disabled {
  border-color: var(--neutral-500);
}

.btn-neutral-500:hover {
  border-color: var(--neutral-600);
}

.btn-neutral-500:active,
.btn-neutral-500.active {
  border-color: var(--neutral-600);
}

.btn-neutral-500:disabled,
.btn-neutral-500.disabled {
  border-color: var(--neutral-600);
}

.btn-neutral-700:hover {
  border-color: var(--neutral-600);
}

.btn-neutral-700:active,
.btn-neutral-700.active {
  border-color: var(--neutral-600);
}

.btn-neutral-700:disabled,
.btn-neutral-700.disabled {
  border-color: var(--neutral-600);
}

/* --- Semantic solid buttons --- */
.btn-link:hover {
  border-color: var(--bs-link-hover-color);
}

.btn-link:active,
.btn-link.active {
  border-color: var(--bs-primary-700);
}

.btn-link:disabled,
.btn-link.disabled {
  border-color: var(--bs-link-hover-color);
}

.btn-success-100:hover {
  border-color: rgba(186, 250, 234, 0.8);
}

.btn-success-100:active,
.btn-success-100.active {
  border-color: rgba(154, 245, 222, 0.9);
}

.btn-success-100:disabled,
.btn-success-100.disabled {
  border-color: rgba(186, 250, 234, 0.6);
}

.btn-footer-link:hover {
  border-color: var(--bs-primary-200);
}

.btn-footer-link:active,
.btn-footer-link.active {
  border-color: var(--bs-primary-300);
}

.btn-footer-link:disabled,
.btn-footer-link.disabled {
  border-color: var(--bs-primary-200);
}

.btn-footer-border:hover {
  border-color: var(--bs-primary-600);
}

.btn-footer-border:active,
.btn-footer-border.active {
  border-color: var(--bs-primary-700);
}

.btn-footer-border:disabled,
.btn-footer-border.disabled {
  border-color: var(--bs-primary-600);
}

/* ========================================
   OUTLINE BUTTON STATES (all variants)
   Hover/Active/Disabled fill with color
   Text colors set for WCAG AA contrast compliance
   ======================================== */

/* Primary shade outline buttons */
.btn-primary-25-outline:hover,
.btn-primary-50-outline:hover,
.btn-primary-100-outline:hover,
.btn-primary-200-outline:hover,
.btn-primary-300-outline:hover,
.btn-primary-500-outline:hover,
.btn-primary-600-outline:hover,
.btn-primary-700-outline:hover,
.btn-primary-800-outline:hover,
.btn-primary-900-outline:hover {
  color: var(--bs-primary-800);
}

.btn-primary-25-outline:hover .btn-icon,
.btn-primary-50-outline:hover .btn-icon,
.btn-primary-100-outline:hover .btn-icon,
.btn-primary-200-outline:hover .btn-icon,
.btn-primary-300-outline:hover .btn-icon,
.btn-primary-500-outline:hover .btn-icon,
.btn-primary-600-outline:hover .btn-icon,
.btn-primary-700-outline:hover .btn-icon,
.btn-primary-800-outline:hover .btn-icon,
.btn-primary-900-outline:hover .btn-icon {
  background-color: var(--bs-black);
}

.btn-primary-25-outline:active .btn-icon,
.btn-primary-25-outline.active .btn-icon,
.btn-primary-50-outline:active .btn-icon,
.btn-primary-50-outline.active .btn-icon,
.btn-primary-100-outline:active .btn-icon,
.btn-primary-100-outline.active .btn-icon,
.btn-primary-200-outline:active .btn-icon,
.btn-primary-200-outline.active .btn-icon,
.btn-primary-300-outline:active .btn-icon,
.btn-primary-300-outline.active .btn-icon,
.btn-primary-500-outline:active .btn-icon,
.btn-primary-500-outline.active .btn-icon,
.btn-primary-600-outline:active .btn-icon,
.btn-primary-600-outline.active .btn-icon,
.btn-primary-700-outline:active .btn-icon,
.btn-primary-700-outline.active .btn-icon,
.btn-primary-800-outline:active .btn-icon,
.btn-primary-800-outline.active .btn-icon,
.btn-primary-900-outline:active .btn-icon,
.btn-primary-900-outline.active .btn-icon {
  background-color: var(--bs-black);
}

.btn-primary-25-outline:active,
.btn-primary-25-outline.active,
.btn-primary-50-outline:active,
.btn-primary-50-outline.active,
.btn-primary-100-outline:active,
.btn-primary-100-outline.active,
.btn-primary-200-outline:active,
.btn-primary-200-outline.active,
.btn-primary-300-outline:active,
.btn-primary-300-outline.active,
.btn-primary-500-outline:active,
.btn-primary-500-outline.active,
.btn-primary-600-outline:active,
.btn-primary-600-outline.active,
.btn-primary-700-outline:active,
.btn-primary-700-outline.active,
.btn-primary-800-outline:active,
.btn-primary-800-outline.active,
.btn-primary-900-outline:active,
.btn-primary-900-outline.active {
  color: var(--bs-primary-800);
}

.btn-primary-25-outline:disabled,
.btn-primary-25-outline.disabled,
.btn-primary-50-outline:disabled,
.btn-primary-50-outline.disabled,
.btn-primary-100-outline:disabled,
.btn-primary-100-outline.disabled,
.btn-primary-200-outline:disabled,
.btn-primary-200-outline.disabled,
.btn-primary-300-outline:disabled,
.btn-primary-300-outline.disabled,
.btn-primary-500-outline:disabled,
.btn-primary-500-outline.disabled,
.btn-primary-600-outline:disabled,
.btn-primary-600-outline.disabled,
.btn-primary-700-outline:disabled,
.btn-primary-700-outline.disabled,
.btn-primary-800-outline:disabled,
.btn-primary-800-outline.disabled,
.btn-primary-900-outline:disabled,
.btn-primary-900-outline.disabled {
  opacity: 0.6;
}

/* Secondary shade outline buttons */
.btn-secondary-25-outline:hover,
.btn-secondary-50-outline:hover,
.btn-secondary-100-outline:hover,
.btn-secondary-200-outline:hover,
.btn-secondary-300-outline:hover,
.btn-secondary-400-outline:hover,
.btn-secondary-500-outline:hover,
.btn-secondary-600-outline:hover,
.btn-secondary-700-outline:hover,
.btn-secondary-800-outline:hover,
.btn-secondary-900-outline:hover {
  color: white;
}

.btn-secondary-25-outline:hover .btn-icon,
.btn-secondary-50-outline:hover .btn-icon,
.btn-secondary-100-outline:hover .btn-icon,
.btn-secondary-200-outline:hover .btn-icon,
.btn-secondary-300-outline:hover .btn-icon,
.btn-secondary-400-outline:hover .btn-icon,
.btn-secondary-500-outline:hover .btn-icon,
.btn-secondary-600-outline:hover .btn-icon,
.btn-secondary-700-outline:hover .btn-icon,
.btn-secondary-800-outline:hover .btn-icon,
.btn-secondary-900-outline:hover .btn-icon {
  background-color: white;
}

.btn-secondary-25-outline:active,
.btn-secondary-25-outline.active,
.btn-secondary-50-outline:active,
.btn-secondary-50-outline.active,
.btn-secondary-100-outline:active,
.btn-secondary-100-outline.active,
.btn-secondary-200-outline:active,
.btn-secondary-200-outline.active,
.btn-secondary-300-outline:active,
.btn-secondary-300-outline.active,
.btn-secondary-400-outline:active,
.btn-secondary-400-outline.active,
.btn-secondary-500-outline:active,
.btn-secondary-500-outline.active,
.btn-secondary-600-outline:active,
.btn-secondary-600-outline.active,
.btn-secondary-700-outline:active,
.btn-secondary-700-outline.active,
.btn-secondary-800-outline:active,
.btn-secondary-800-outline.active,
.btn-secondary-900-outline:active,
.btn-secondary-900-outline.active {
  color: white;
}

.btn-secondary-25-outline:active .btn-icon,
.btn-secondary-25-outline.active .btn-icon,
.btn-secondary-50-outline:active .btn-icon,
.btn-secondary-50-outline.active .btn-icon,
.btn-secondary-100-outline:active .btn-icon,
.btn-secondary-100-outline.active .btn-icon,
.btn-secondary-200-outline:active .btn-icon,
.btn-secondary-200-outline.active .btn-icon,
.btn-secondary-300-outline:active .btn-icon,
.btn-secondary-300-outline.active .btn-icon,
.btn-secondary-400-outline:active .btn-icon,
.btn-secondary-400-outline.active .btn-icon,
.btn-secondary-500-outline:active .btn-icon,
.btn-secondary-500-outline.active .btn-icon,
.btn-secondary-600-outline:active .btn-icon,
.btn-secondary-600-outline.active .btn-icon,
.btn-secondary-700-outline:active .btn-icon,
.btn-secondary-700-outline.active .btn-icon,
.btn-secondary-800-outline:active .btn-icon,
.btn-secondary-800-outline.active .btn-icon,
.btn-secondary-900-outline:active .btn-icon,
.btn-secondary-900-outline.active .btn-icon {
  background-color: white;
}

.btn-secondary-25-outline:disabled,
.btn-secondary-25-outline.disabled,
.btn-secondary-50-outline:disabled,
.btn-secondary-50-outline.disabled,
.btn-secondary-100-outline:disabled,
.btn-secondary-100-outline.disabled,
.btn-secondary-200-outline:disabled,
.btn-secondary-200-outline.disabled,
.btn-secondary-300-outline:disabled,
.btn-secondary-300-outline.disabled,
.btn-secondary-400-outline:disabled,
.btn-secondary-400-outline.disabled,
.btn-secondary-500-outline:disabled,
.btn-secondary-500-outline.disabled,
.btn-secondary-600-outline:disabled,
.btn-secondary-600-outline.disabled,
.btn-secondary-700-outline:disabled,
.btn-secondary-700-outline.disabled,
.btn-secondary-800-outline:disabled,
.btn-secondary-800-outline.disabled,
.btn-secondary-900-outline:disabled,
.btn-secondary-900-outline.disabled {
  opacity: 0.6;
}

/* Neutral shade outline buttons */
.btn-neutral-50-outline:hover,
.btn-neutral-100-outline:hover,
.btn-neutral-200-outline:hover,
.btn-neutral-300-outline:hover,
.btn-neutral-400-outline:hover,
.btn-neutral-500-outline:hover,
.btn-neutral-700-outline:hover {
  color: var(--neutral-600);
}

.btn-neutral-50-outline:hover .btn-icon,
.btn-neutral-100-outline:hover .btn-icon,
.btn-neutral-200-outline:hover .btn-icon,
.btn-neutral-300-outline:hover .btn-icon,
.btn-neutral-400-outline:hover .btn-icon,
.btn-neutral-500-outline:hover .btn-icon,
.btn-neutral-700-outline:hover .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-50-outline:active,
.btn-neutral-50-outline.active,
.btn-neutral-100-outline:active,
.btn-neutral-100-outline.active,
.btn-neutral-200-outline:active,
.btn-neutral-200-outline.active,
.btn-neutral-300-outline:active,
.btn-neutral-300-outline.active,
.btn-neutral-400-outline:active,
.btn-neutral-400-outline.active,
.btn-neutral-500-outline:active,
.btn-neutral-500-outline.active,
.btn-neutral-700-outline:active,
.btn-neutral-700-outline.active {
  color: var(--neutral-600);
}

.btn-neutral-50-outline:active .btn-icon,
.btn-neutral-50-outline.active .btn-icon,
.btn-neutral-100-outline:active .btn-icon,
.btn-neutral-100-outline.active .btn-icon,
.btn-neutral-200-outline:active .btn-icon,
.btn-neutral-200-outline.active .btn-icon,
.btn-neutral-300-outline:active .btn-icon,
.btn-neutral-300-outline.active .btn-icon,
.btn-neutral-400-outline:active .btn-icon,
.btn-neutral-400-outline.active .btn-icon,
.btn-neutral-500-outline:active .btn-icon,
.btn-neutral-500-outline.active .btn-icon,
.btn-neutral-700-outline:active .btn-icon,
.btn-neutral-700-outline.active .btn-icon {
  background-color: var(--neutral-600);
}

.btn-neutral-50-outline:disabled,
.btn-neutral-50-outline.disabled,
.btn-neutral-100-outline:disabled,
.btn-neutral-100-outline.disabled,
.btn-neutral-200-outline:disabled,
.btn-neutral-200-outline.disabled,
.btn-neutral-300-outline:disabled,
.btn-neutral-300-outline.disabled,
.btn-neutral-400-outline:disabled,
.btn-neutral-400-outline.disabled,
.btn-neutral-500-outline:disabled,
.btn-neutral-500-outline.disabled,
.btn-neutral-700-outline:disabled,
.btn-neutral-700-outline.disabled {
  opacity: 0.6;
}

/* Light outline buttons */
.btn-primary-light-outline:hover,
.btn-secondary-light-outline:hover {
  color: var(--bs-primary-700);
}

.btn-primary-light-outline:hover .btn-icon,
.btn-secondary-light-outline:hover .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-light-outline:active,
.btn-primary-light-outline.active,
.btn-secondary-light-outline:active,
.btn-secondary-light-outline.active {
  color: var(--bs-primary-700);
}

.btn-primary-light-outline:active .btn-icon,
.btn-primary-light-outline.active .btn-icon,
.btn-secondary-light-outline:active .btn-icon,
.btn-secondary-light-outline.active .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-primary-light-outline:disabled,
.btn-primary-light-outline.disabled,
.btn-secondary-light-outline:disabled,
.btn-secondary-light-outline.disabled {
  opacity: 0.6;
}

/* Semantic outline buttons */
.btn-link-outline:hover,
.btn-footer-link-outline:hover,
.btn-footer-border-outline:hover {
  color: white;
}

.btn-link-outline:hover .btn-icon,
.btn-footer-link-outline:hover .btn-icon,
.btn-footer-border-outline:hover .btn-icon {
  background-color: white;
}

.btn-link-outline:active,
.btn-link-outline.active,
.btn-footer-link-outline:active,
.btn-footer-link-outline.active,
.btn-footer-border-outline:active,
.btn-footer-border-outline.active {
  color: white;
}

.btn-link-outline:active .btn-icon,
.btn-link-outline.active .btn-icon,
.btn-footer-link-outline:active .btn-icon,
.btn-footer-link-outline.active .btn-icon,
.btn-footer-border-outline:active .btn-icon,
.btn-footer-border-outline.active .btn-icon {
  background-color: white;
}

.btn-link-outline:disabled,
.btn-link-outline.disabled,
.btn-footer-link-outline:disabled,
.btn-footer-link-outline.disabled,
.btn-footer-border-outline:disabled,
.btn-footer-border-outline.disabled {
  opacity: 0.6;
}

.btn-success-100-outline:hover,
.btn-neutral-light-outline:hover {
  color: var(--bs-primary-700);
}

.btn-success-100-outline:hover .btn-icon,
.btn-neutral-light-outline:hover .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-success-100-outline:active,
.btn-success-100-outline.active,
.btn-neutral-light-outline:active,
.btn-neutral-light-outline.active {
  color: var(--bs-primary-700);
}

.btn-success-100-outline:active .btn-icon,
.btn-success-100-outline.active .btn-icon,
.btn-neutral-light-outline:active .btn-icon,
.btn-neutral-light-outline.active .btn-icon {
  background-color: var(--bs-primary-700);
}

.btn-success-100-outline:disabled,
.btn-success-100-outline.disabled,
.btn-neutral-light-outline:disabled,
.btn-neutral-light-outline.disabled {
  opacity: 0.6;
}