/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  text-decoration: none;
}

/* Button Variants */
.btn-primary {
  color: #fff;
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

.btn-secondary {
  color: #fff;
  background-color: var(--color-secondary-500);
  border-color: var(--color-secondary-500);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-secondary-600);
  border-color: var(--color-secondary-600);
  color: #fff;
}

.btn-outline {
  color: var(--color-text-primary);
  background-color: transparent;
  border-color: var(--color-border);
}
.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-hover);
}

.btn-ghost {
  color: var(--color-text-primary);
  background-color: transparent;
}
.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--color-bg-secondary);
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

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