/* Button - "Action should feel effortless"
 * Tactile, confident, and respectful of attention
 * Uses design tokens directly for all visual properties
 */

.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-md;
  font-weight: var(--tone-whisper);
  padding: var(--space-breath) var(--space-comfort);
  transition: all var(--motion-micro) var(--ease-natural);
  transform-style: preserve-3d;
  box-shadow: var(--elevation-raised);
}

.btn:hover:not(:disabled) {
  transform: var(--hover-lift);
  box-shadow: var(--elevation-floating);
}

.btn:active:not(:disabled) {
  transform: var(--active-press);
  box-shadow: var(--elevation-raised);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Size variants */
.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

.btn-xs {
  @apply px-2 py-1 text-xs;
}

.btn-xxs {
  @apply px-1 py-0.5 text-xs;
}

/* Color variants */
.btn-primary {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border: 1px solid var(--color-button-primary-border);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-button-primary-bg-hover);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-button-primary-bg-active);
}

.btn-secondary {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
  border: 1px solid var(--color-button-secondary-border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-button-secondary-bg-hover);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--color-button-secondary-bg-active);
}

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

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

.btn-warning {
  background-color: var(--color-warning-500);
  color: white;
  border: 1px solid transparent;
}

.btn-warning:hover:not(:disabled) {
  background-color: var(--color-warning-600);
}

.btn-danger {
  background-color: var(--color-error-500);
  color: white;
  border: 1px solid transparent;
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-error-600);
}