/**
 * button.css
 * Button styles - premium dark theme
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast) var(--easing-material);
  position: relative;
  overflow: hidden;
  min-height: var(--min-touch-target);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  gap: var(--spacing-2);
}

.btn-primary {
  background: linear-gradient(180deg, #f1d57a 0%, #d4af37 48%, #b4891d 100%);
  color: #111111;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background: linear-gradient(180deg, #e3c560 0%, #c49e2f 100%);
}

.btn-secondary {
  background: linear-gradient(180deg, rgba(28, 31, 38, 0.96), rgba(16, 18, 23, 0.96));
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled),
.btn-icon:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active:not(:disabled),
.btn-icon:active:not(:disabled) {
  background: #101217;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
}

.btn-outline:hover:not(:disabled),
.btn-text:hover:not(:disabled) {
  background-color: var(--color-accent-soft);
}

.btn-outline:active:not(:disabled),
.btn-text:active:not(:disabled) {
  background-color: var(--color-accent-strong);
}

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

.btn-icon {
  background: linear-gradient(180deg, rgba(28, 31, 38, 0.96), rgba(16, 18, 23, 0.96));
  border-color: var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
}

.btn-success {
  background: linear-gradient(180deg, #29dd92 0%, #19c37d 100%);
  color: #08110d;
}

.btn-success:hover:not(:disabled),
.trading-actions__buy:hover {
  filter: brightness(1.05);
}

.btn-error {
  background: linear-gradient(180deg, #ff7d87 0%, #ff5c6c 100%);
  color: #17090c;
}

.btn-error:hover:not(:disabled),
.trading-actions__sell:hover {
  filter: brightness(1.05);
}

.btn-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-xs);
}

.btn-md {
  height: 44px;
  min-height: 44px;
  padding: 0 var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn-lg {
  height: 56px;
  min-height: 56px;
  padding: 0 var(--spacing-6);
  font-size: var(--font-size-base);
}

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

.btn-loading {
  pointer-events: none;
  cursor: default;
}

.btn-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(17, 17, 17, 0.25);
  border-top-color: rgba(17, 17, 17, 0.7);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0);
  animation: ripple 300ms ease-out forwards;
  pointer-events: none;
}

.btn-full {
  width: 100%;
}