Why do custom properties inherit by default, unlike most other CSS properties?

Short interview answer

They're defined as inherited properties specifically so a value set high in the tree, commonly on :root, is available to every descendant unless something overrides it closer to the element; that inheritance is what lets one override on a theme class or [data-theme] attribute cascade down to every component using var() beneath it.