/* Button component styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  border: var(--border-1) solid transparent;
  min-height: 36px;
  cursor: pointer;
  transition: background var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.btn-sm {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg {
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-lg);
}

/* Icon-only buttons */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
  border-color: transparent;
}

.btn-primary:hover {
  background: var(--button-primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-secondary {
  background: var(--surface-panel);
  color: var(--text-primary);
  border: var(--border-1) solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--surface-hover);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--surface-hover);
}

.btn-danger {
  background: var(--accent-red);
  color: var(--white);
}

.btn-danger:hover {
  background: var(--accent-red-hover);
  box-shadow: var(--shadow-sm);
}

.btn-success {
  background: var(--accent-green);
  color: var(--white);
}

.btn-success:hover {
  background: var(--accent-green-hover);
  box-shadow: var(--shadow-sm);
}

.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-spin 0.75s linear infinite;
}

@keyframes btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* Legacy class aliases */
.btn-info {
  background: transparent;
  color: var(--button-outline-text);
  border: var(--border-1) solid var(--button-outline-border);
}
.btn-info:hover {
  background: var(--button-outline-hover-bg);
}
.btn-info:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-warning {
  background: var(--accent-red);
  color: var(--white);
}
.btn-warning:hover {
  background: var(--accent-red-hover);
  box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--button-outline-text);
  border: var(--border-1) solid var(--button-outline-border);
}
.btn-outline-secondary:hover {
  background: var(--button-outline-hover-bg);
  color: var(--button-outline-text);
}
.btn-outline-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Badge styles */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.badge.bg-success {
  background: var(--accent-green);
  color: var(--white);
}

.badge.bg-secondary {
  background: var(--primary-600);
  color: var(--white);
}

.badge.bg-danger {
  background: var(--accent-red);
  color: var(--white);
}