CSS block preview sample

Primary Action
Input Surface
Subtle Surface

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; }