/* ================== BUTTONS ================== */
.btn {
  padding: 0.55rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
}

.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
}

.btn-span {
  color: #aaa;
}

/* Primary — blue */
.btn-outline-primary {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-group .btn-outline-primary.active {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--btn-primary-hover-text);
  box-shadow: var(--btn-primary-shadow);
}

/* Success — green (Download, Donate, Enable All) */
.btn-outline-success {
  border-color: var(--success-green);
  color: var(--success-green);
}
.btn-outline-success:hover,
.btn-outline-success.active,
.btn-group .btn-outline-success.active {
  background-color: var(--success-green);
  border-color: var(--success-green);
  color: var(--btn-success-hover-text);
  box-shadow: var(--btn-success-shadow);
}

/* Warning — amber (Edit, Buy Me a Coffee) */
.btn-outline-warning {
  border-color: var(--warning-yellow);
  color: var(--btn-warning-text);
}
.btn-outline-warning:hover,
.btn-outline-warning.active,
.btn-group .btn-outline-warning.active {
  background-color: var(--warning-yellow);
  border-color: var(--warning-yellow);
  color: var(--btn-warning-hover-text);
  box-shadow: var(--btn-warning-shadow);
}

/* Danger — red (Delete, Clear, Start Over) */
.btn-outline-danger {
  border-color: var(--danger-red);
  color: var(--danger-red);
}
.btn-outline-danger:hover,
.btn-outline-danger.active,
.btn-group .btn-outline-danger.active {
  background-color: var(--danger-red);
  border-color: var(--danger-red);
  color: var(--btn-danger-hover-text);
  box-shadow: var(--btn-danger-shadow);
}

/* Secondary — grey (theme toggle, cancel, back) */
.btn-outline-secondary {
  border-color: var(--secondary-gray);
  color: var(--secondary-gray);
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active,
.btn-group .btn-outline-secondary.active {
  background-color: var(--secondary-gray);
  border-color: var(--secondary-gray);
  color: var(--btn-secondary-hover-text);
  box-shadow: var(--btn-secondary-shadow);
}

/* Info — cyan (OCR, upload image, help) */
.btn-outline-info {
  border-color: var(--info-cyan);
  color: var(--btn-info-text);
}
.btn-outline-info:hover,
.btn-outline-info.active,
.btn-group .btn-outline-info.active {
  background-color: var(--info-cyan);
  border-color: var(--info-cyan);
  color: var(--btn-info-hover-text);
  box-shadow: var(--btn-info-shadow);
}

/* Dark — charcoal (Portal) */
.btn-outline-dark {
  border-color: var(--dark-charcoal);
  color: var(--dark-charcoal);
}
.btn-outline-dark:hover,
.btn-outline-dark.active,
.btn-group .btn-outline-dark.active {
  background-color: var(--dark-charcoal);
  border-color: var(--dark-charcoal);
  color: var(--btn-dark-hover-text);
  box-shadow: var(--btn-dark-shadow);
}

/* Solid Bootstrap buttons — transition + colored hover shadow */
.btn-primary, .btn-success, .btn-danger,
.btn-warning, .btn-secondary, .btn-info {
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary:hover   { box-shadow: var(--btn-primary-shadow); }
.btn-success:hover   { box-shadow: var(--btn-success-shadow); }
.btn-danger:hover    { box-shadow: var(--btn-danger-shadow); }
.btn-warning:hover   { box-shadow: var(--btn-warning-shadow); }
.btn-secondary:hover { box-shadow: var(--btn-secondary-shadow); }
.btn-info:hover      { box-shadow: var(--btn-info-shadow); }