Success, warning, danger, info. These pull from Tailwind (green, amber, red, blue) so brand accents stay meaning-free. Coral ≠ danger. Teal ≠ success. Users need learned signals that survive any brand retune.
Brand accents exist to carry identity; state tokens exist to carry meaning. If coral doubled as "warning," a warm marketing pill and a validation error would collide. Tailwind's red / amber / green / blue are already tuned for AA legibility at small sizes — we inherit that work.
Every component binds to these — not raw hex or raw Tailwind classes.
--color-success: #16A34A; --color-success-surface: #F0FDF4; --color-on-success: #fff; --color-warning: #F59E0B; --color-warning-surface: #FFFBEB; --color-on-warning: #451A03; --color-danger: #DC2626; --color-danger-surface: #FEF2F2; --color-on-danger: #fff; --color-info: #2563EB; --color-info-surface: #EFF6FF; --color-on-info: #fff;
