Token and spacing effects appear here.
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1.25rem; border-radius: 0.5rem;
font-size: 0.875rem; font-weight: 500; cursor: pointer;
transition: all 0.15s; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { border-color: var(--accent); color: var(--accent); }
.btn-secondary:hover { background: var(--accent-dim); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { background: var(--border); color: var(--text); }
.btn-destructive { background: #EF4444; color: #fff; }
.btn-sm { padding: 0.35rem 0.875rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }