/* ===== BUTTON COMPONENT ===== */

.pg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pg-space-3) var(--pg-space-6);
  font-size: var(--pg-text-base);
  font-weight: var(--pg-font-medium);
  line-height: 1;
  text-decoration: none;
  border: var(--pg-border-width-2) solid transparent;
  border-radius: var(--pg-border-radius);
  cursor: pointer;
  transition: all var(--pg-transition);
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Primary button */
.pg-button--primary {
  background: linear-gradient(135deg, var(--pg-primary) 0%, var(--pg-primary-light) 100%);
  color: var(--pg-text-primary);
  border-color: var(--pg-primary);
  box-shadow: var(--pg-shadow);
}

.pg-button--primary:hover,
.pg-button--primary:focus {
  background: linear-gradient(135deg, var(--pg-primary-dark) 0%, var(--pg-primary) 100%);
  transform: translateY(-2px);
  box-shadow: var(--pg-shadow-glow);
}

.pg-button--primary:active {
  transform: translateY(0);
}

/* Outline button */
.pg-button--outline {
  background: transparent;
  color: var(--pg-primary);
  border-color: var(--pg-primary);
}

.pg-button--outline:hover,
.pg-button--outline:focus {
  background: var(--pg-primary);
  color: var(--pg-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--pg-shadow-glow);
}

.pg-button--outline:active {
  transform: translateY(0);
}

/* Button sizes */
.pg-button--small {
  padding: var(--pg-space-2) var(--pg-space-4);
  font-size: var(--pg-text-sm);
}

.pg-button--large {
  padding: var(--pg-space-4) var(--pg-space-8);
  font-size: var(--pg-text-lg);
}

/* Full width button */
.pg-button--full {
  width: 100%;
}

/* Disabled state */
.pg-button:disabled,
.pg-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pg-button:disabled:hover,
.pg-button--disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Button with icon */
.pg-button--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-2);
}

.pg-button--icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive */
@media (min-width: 768px) {
  .pg-button {
    padding: var(--pg-space-4) var(--pg-space-8);
    font-size: var(--pg-text-lg);
  }
  
  .pg-button--small {
    padding: var(--pg-space-3) var(--pg-space-6);
    font-size: var(--pg-text-base);
  }
  
  .pg-button--large {
    padding: var(--pg-space-5) var(--pg-space-10);
    font-size: var(--pg-text-xl);
  }
}