/* ============ */
/* Unified Button System */
/* ============ */
/* Consolidates .auth-button, .btn, .btn-primary, .btn-secondary, etc. */

/* Base Button Styles */
.btn,
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 0.5rem);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-md, 12px);
  font-weight: var(--font-semibold, 600);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.5);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
  min-height: 48px;
  font-family: inherit;
  white-space: nowrap;
}

/* Ensure button text and icons are always visible */
.btn,
.auth-button,
button.btn-primary,
a.btn-primary {
  color: inherit;
}

.btn *,
.auth-button *,
button.btn-primary *,
a.btn-primary * {
  color: inherit;
}

/* Button Variants */

/* Primary Button - Using exact purple values */
.btn-primary,
.auth-button--primary,
.btn-primary {
  background: var(--btn-primary-bg, var(--primary));
  color: var(--btn-primary-text, var(--primary-foreground)) !important;
  border: 1px solid var(--btn-primary-border, color-mix(in srgb, var(--btn-primary-bg, var(--primary)) 55%, transparent));
  box-shadow: var(--btn-primary-shadow, none);
  transition: all 0.25s ease;
}

.btn-primary:hover,
.auth-button--primary:hover {
  background: var(--btn-primary-hover-bg, color-mix(in srgb, var(--btn-primary-bg, var(--primary)) 86%, black 14%));
  border-color: var(--btn-primary-border-hover, color-mix(in srgb, var(--btn-primary-bg, var(--primary)) 65%, transparent));
  color: var(--btn-primary-text, var(--primary-foreground)) !important;
  box-shadow: var(--btn-primary-shadow-hover, var(--shadow-primary, none));
  transform: translateY(-1px);
}

.btn-primary:active,
.auth-button--primary:active {
  transform: translateY(0);
  box-shadow: var(--btn-primary-shadow-active, var(--btn-primary-shadow, none));
}

/* Secondary Button (Outline) - Using exact purple values */
.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--btn-outline-text, var(--text-primary));
  border: 1px solid var(--btn-outline-border, var(--border-light));
  transition: all 0.25s ease;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--btn-outline-hover-bg, var(--btn-ghost-hover-bg, var(--surface-hover)));
  border-color: var(--btn-outline-border-hover, var(--border-medium));
  color: var(--btn-outline-hover-text, var(--text-primary));
  transform: translateY(-1px);
}

/* Ghost Button - Matching landing page ghost button */
.btn-ghost,
.auth-button--ghost {
  background: var(--btn-ghost-bg, transparent);
  color: var(--btn-ghost-text, var(--text-primary));
  border: 1px solid var(--btn-ghost-border, var(--border-light));
  transition: all 0.25s ease;  /* Matching landing page transition */
}

.btn-ghost:hover,
.auth-button--ghost:hover {
  border-color: var(--btn-ghost-border-hover, var(--border-medium));
  background: var(--btn-ghost-hover-bg, var(--surface-hover));
  color: var(--btn-ghost-hover-text, var(--text-primary));
}

/* Danger Button */
.btn-danger {
  background: var(--color-error, var(--destructive));
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 84, 112, 0.3);
}

.btn-danger:hover {
  background: #ff6785;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 84, 112, 0.4);
}

.btn-danger:active {
  transform: translateY(0);
}

/* Button Sizes */

.btn-sm,
.auth-button--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--text-sm, 0.875rem);
  min-height: 40px;
}

.btn-lg,
.auth-button--lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg, 1.125rem);
  min-height: 52px;
}

/* Compact Button Variants */
.btn--compact,
.auth-button--compact {
  padding: 0.625rem 1rem;  /* Smaller padding */
  font-size: var(--mobile-text-sm, 0.8125rem);  /* Smaller font */
  min-height: 36px;  /* Smaller min-height, but still touch-friendly */
  border-radius: var(--mobile-radius-md, 8px);  /* Smaller border radius */
  gap: var(--mobile-space-1, 0.375rem);  /* Smaller gap */
}

/* Mobile defaults - make common buttons compact on mobile */
@media (max-width: 768px) {
  .btn:not(.btn-lg):not(.btn-danger),
  .auth-button:not(.auth-button--lg) {
    padding: 0.625rem 1rem;
    font-size: var(--mobile-text-sm, 0.8125rem);
    min-height: 36px;
    border-radius: var(--mobile-radius-md, 8px);
    gap: var(--mobile-space-1, 0.375rem);
  }
}
body.is-mobile .btn:not(.btn-lg):not(.btn-danger),
body.is-mobile .auth-button:not(.auth-button--lg) {
  padding: 0.625rem 1rem;
  font-size: var(--mobile-text-sm, 0.8125rem);
  min-height: 36px;
  border-radius: var(--mobile-radius-md, 8px);
  gap: var(--mobile-space-1, 0.375rem);
}

/* Button Modifiers */

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn:disabled,
.auth-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus States */
.btn:focus-visible,
.auth-button:focus-visible {
  outline: 3px solid var(--focus-ring, var(--ring));
  outline-offset: 2px;
}

/* Legacy Support - Map old classes to new system */
.btn-legacy {
  /* Maps to .btn-primary */
  @extend .btn-primary;
}