CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

.grad-warm    { background: linear-gradient(135deg, #C4640A, #E8A050); }
.grad-cool    { background: linear-gradient(135deg, #1A4A6A, #3A8AAA); }
.grad-nature  { background: linear-gradient(135deg, #2A5A3A, #5A9A6A); }
.grad-purple  { background: linear-gradient(135deg, #4A2A6A, #8A5AAA); }
.grad-sunset  { background: linear-gradient(135deg, #C4640A, #8A3A6A); }
.grad-ocean   { background: linear-gradient(135deg, #1A3A6A, #2A8A9A); }
.grad-neutral { background: linear-gradient(135deg, #3A3836, #7A7876); }
.grad-soft    { background: linear-gradient(135deg, #F2EDE4, #E4D8C8); }