We aim for a hierarchy for css variables, we want to go from blocks to more specific use cases. E.G. 

--modal-border-color: red;
--overlay-bg-color: #e2e2e2; 
--standard-font-color: #020202;

If it is for a specific part of Joomla, we prefix the value with the area, e.g.

--com-media-overlay-bg: var(--overlay-bg-color, ‘#fff’);
--mod-articles-font-color: var(--standard-font-color, ‘#000’);
--calendar-bg-color: var(--standard-bg-color);  // This is for fields such as the calendar field where they aren't specific to anb area in core

If a view is loaded in a modal then overrides should be applied at that level using existing classes rather than on :root e.g.

.modal.view-media-grid {
  --com-media-overlay-bg: orange;
}