/* Module 02: Button sizes and link variant (extends claymorphism.css) */
.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.clay-btn-sm {
  height: 32px;
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}
.clay-btn-md {
  height: 40px;
  padding: 12px 20px;
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
}
.clay-btn-lg {
  height: 48px;
  padding: 16px 24px;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}
.clay-btn-link {
  color: var(--color-primary);
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: auto;
}
.clay-btn-link:hover:not(:disabled) {
  text-decoration: underline;
  transform: none;
}
.clay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}