/* ── Base ── */
.wk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-sp-2, 8px);
  font-family: var(--wk-font-sans);
  font-weight: var(--wk-font-medium);
  font-size: var(--wk-text-size-md);
  line-height: var(--wk-leading-normal);
  border-radius: var(--wk-r-md);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--wk-dur-fast) var(--wk-ease),
              box-shadow var(--wk-dur-fast) var(--wk-ease),
              border-color var(--wk-dur-fast) var(--wk-ease),
              color var(--wk-dur-fast) var(--wk-ease);
  user-select: none;
  position: relative;
}

.wk-btn:focus-visible {
  outline: 2px solid var(--wk-border-glow);
  outline-offset: 2px;
}

/* ── Sizes ── */
.wk-btn--md {
  padding: var(--wk-sp-2) var(--wk-sp-4);
  height: 36px;
}

.wk-btn--sm {
  padding: var(--wk-sp-1) var(--wk-sp-3);
  height: 28px;
  font-size: var(--wk-text-size-sm);
  border-radius: var(--wk-r-sm);
}

/* ── Icon only ── */
.wk-btn--icon-only.wk-btn--md {
  width: 36px;
  height: 36px;
  padding: 0;
}

.wk-btn--icon-only.wk-btn--sm {
  width: 28px;
  height: 28px;
  padding: 0;
}

/* ── Variants ── */

/* primary */
.wk-btn--primary {
  background: var(--wk-brand-gradient);
  color: var(--wk-text-inverse);
  border: none;
}
.wk-btn--primary:hover:not(:disabled) {
  background: var(--wk-brand-gradient-hover);
  box-shadow: 0 4px 16px var(--wk-brand-glow);
}
.wk-btn--primary:active:not(:disabled) {
  box-shadow: none;
}

/* secondary */
.wk-btn--secondary {
  background: var(--wk-bg-elevated);
  color: var(--wk-text-primary);
  border: 1px solid var(--wk-border-default);
}
.wk-btn--secondary:hover:not(:disabled) {
  background: var(--wk-bg-hover);
  border-color: var(--wk-border-strong);
}
.wk-btn--secondary:active:not(:disabled) {
  background: var(--wk-bg-active);
}

/* ghost */
.wk-btn--ghost {
  background: transparent;
  color: var(--wk-text-secondary);
  border: none;
}
.wk-btn--ghost:hover:not(:disabled) {
  background: var(--wk-bg-hover);
  color: var(--wk-text-primary);
}
.wk-btn--ghost:active:not(:disabled) {
  background: var(--wk-bg-active);
}

/* danger */
.wk-btn--danger {
  background: var(--wk-color-error-bg);
  color: var(--wk-color-error);
  border: 1px solid rgba(255, 92, 114, 0.2);
}
.wk-btn--danger:hover:not(:disabled) {
  background: rgba(255, 92, 114, 0.15);
  border-color: rgba(255, 92, 114, 0.35);
}
.wk-btn--danger:active:not(:disabled) {
  background: rgba(255, 92, 114, 0.2);
}

/* ── Disabled ── */
.wk-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Loading ── */
.wk-btn--loading {
  cursor: wait;
}

.wk-btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--wk-r-full);
  animation: wk-btn-spin var(--wk-dur-slow) linear infinite;
  flex-shrink: 0;
}

@keyframes wk-btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Icon ── */
.wk-btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 16px;
}

.wk-btn__label {
  display: inline-flex;
  align-items: center;
}
