CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

.input-group { display: flex; flex-direction: column; gap: 0.375rem; }

.input-label {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

.input {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border); border-radius: 0.5rem;
  font-size: 0.9375rem; background: var(--surface); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.input.error { border-color: #EF4444; }
.input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }

.input-hint  { font-size: 0.75rem; color: var(--muted); }
.input-error { font-size: 0.75rem; color: #EF4444; }