Status surfaces demo
Status surfaces demo for sub-issue #132. Covers alerts, badges, tags/chips, and tooltips — all driven by semantic color tokens color-accent, color-success, color-warning, color-danger.
Alerts / callouts
Each variant uses a semantic color token for background, text, and border. Token contract: bg-accent / bg-success / bg-warning / bg-danger with text-bg text and matching border-* outline. Padding: px-hsp-md py-vsp-md. Corners: rounded-md.
bg-accent, text-bg, border-accent. Token: color-accent.bg-success, text-bg, border-success. Token: color-success.bg-warning, text-bg, border-warning. Token: color-warning.bg-danger, text-bg, border-danger. Token: color-danger.Badges
Filled badges: bg-{color} + text-bg. Outlined badges: border-{color} + text-{color}. Both use px-hsp-xs, rounded-md, text-helper. Vertical padding py-[0.125rem] is below vsp-xs granularity — local exception per G4 row 5.
Filled
Outlined
Tags / chips
Container: inline-flex items-center gap-hsp-xs bg-surface text-fg + px-hsp-sm py-vsp-xs rounded-md text-helper border border-muted. Close button: text-muted hover:text-danger.
Tooltips
Hover over the annotated terms. Bubble: bg-surface, text-fg, border-muted, rounded-md, px-hsp-sm py-vsp-xs, text-helper. Opacity transition uses easing-tab-open (--zfbtw-easing-tab-open). Implementation: position: absolute with translateX(-50%) on the sibling bubble span.