A CSS variable (also called a custom property) is a value you define once and reuse throughout a stylesheet. Instead of writing the same color hex code in 40 different places, you define it once as a variable and reference it everywhere. When you want to change it, you change it in one place and every reference updates automatically.
CSS variables are written with 2 hyphens at the start: --brand-color: #4A90D9. You reference them using the var() function: color: var(--brand-color). Themes and page builders use them extensively, which means when you see a color that won't change no matter what you do to a specific element, there's a good chance the real value is being set through a variable somewhere higher up in the stylesheet.
Overriding a CSS variable directly often gets better results than trying to override the property that uses it, because the variable is the source of truth. Loupely Lens detects when a property's winning value comes from a variable and surfaces the variable override as one of the fix options on the Triage Page.