CSS Button Variant Generator

:root { --primary: #6366f1; --destructive: #dc2626; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem;
       font-weight: 600; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer;
       transition: all 0.15s; border: 1px solid transparent; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }
.btn-secondary:hover { background: #e5e7eb; }

.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: rgba(99, 102, 241, 0.1); }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }

.btn-destructive { background: var(--destructive); color: white; }
.btn-destructive:hover { filter: brightness(1.1); }