Accessibility
:where(:root) and [data-theme='dark'] when a surface uses custom color.
createAppearancePreference does not disable motion. Reduced motion is prefers-reduced-motion and data-motion="reduced" on the document element. Appearance changes still apply; they do not animate in those cases.
Do not communicate state with color alone. Status text uses the --color-status-* foreground tokens, and focus uses --color-border-focus or the accent ring.