Let's read a box that uses one variable in multiple properties, and understand why that's so powerful.
:root { --brand-color: #1E2A5A; --spacing: 16px; }. This declares two variables, available across the ENTIRE page because :root represents the whole document not just this one box, but potentially hundreds of other elements too, if they choose to use them.
.box { color: var(--brand-color); border: 2px solid var(--brand-color); padding: var(--spacing); }. Notice --brand-color is referenced TWICE here once for text color, once inside the border shorthand. Both var(--brand-color) calls currently resolve to #1E2A5A, so the text and border match exactly.
Now imagine changing just one line: --brand-color: #1E2A5A; becomes --brand-color: #C0392B; inside :root. Without touching .box at all, BOTH the text color AND the border color would instantly become red, since they were never hardcoded they were always just pointing back to the same single source of truth.
This is the entire point of variables: instead of updating #1E2A5A in two separate places inside .box (and potentially dozens of other rules across a real stylesheet), one change in one place cascades everywhere it's referenced.