.wwr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--font-md);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-dark);
  background-image: var(--brand-gradient);
  background-color: var(--brand-primary);
  box-shadow: var(--shadow-glow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  line-height: 1;
  white-space: nowrap;
}

.wwr-btn[data-variant='ghost'] {
  background: rgba(var(--bg-dark-rgb, 6, 20, 32), 0.75);
  background-image: none;
  color: var(--wwr-text-high);
  border-color: rgba(var(--text-light-rgb, 255, 255, 255), 0.3);
  box-shadow: none;
}

.wwr-btn:hover,
.wwr-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(var(--brand-primary-rgb, 0, 188, 242), 0.55);
  text-decoration: none;
}

.wwr-btn:focus-visible {
  outline: 2px solid rgba(var(--text-light-rgb, 255, 255, 255), 0.4);
  outline-offset: 2px;
}

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

.wwr-btn[data-variant='ghost']:hover,
.wwr-btn[data-variant='ghost']:focus-visible {
  background: rgba(var(--bg-dark-rgb, 6, 20, 32), 0.9);
  border-color: rgba(var(--text-light-rgb, 255, 255, 255), 0.55);
  box-shadow: none;
}

.wwr-btn[aria-pressed='true'],
.wwr-btn[data-active='true'] {
  box-shadow: 0 0 32px rgba(var(--brand-secondary-rgb, 105, 234, 255), 0.5), inset 0 0 0 1px rgba(var(--text-light-rgb, 255, 255, 255), 0.25);
}

.wwr-btn[aria-pressed='true']:hover,
.wwr-btn[data-active='true']:hover {
  transform: translateY(-1px);
}

.wwr-btn[aria-disabled='true'],
.wwr-btn[data-disabled='true'],
.wwr-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}