.button {
  align-items: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  padding: 9px 16px;
  text-decoration: none;
  transition: 0.15s;
}

.button:hover {
  box-shadow: var(--shadow-small);
  transform: translateY(-1px);
}

.button:active { transform: translateY(0); }
.button--primary { background: var(--color-primary); color: #ffffff; }
.button--primary:hover { background: var(--color-primary-dark); }
.button--success { background: var(--color-success); color: #ffffff; }
.button--danger { background: var(--color-danger); color: #ffffff; }
.button--warning { background: var(--color-warning); color: #ffffff; }
.button--outline { background: #ffffff; border: 1px solid var(--color-border); color: var(--color-text); }
.button--outline:hover { background: #f8fafc; }
.button--small { font-size: 12px; padding: 6px 12px; }
.button--large { font-size: 15px; padding: 14px 26px; }
.button--block { width: 100%; }