// Solution 2 is to use more selectors right up top here.
// Solution 3 is to use the `*` selector here.
html {
  --color-1: red;
  --color-2: blue;

  // Solution 1) Move this to the div.
  // --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

div {
  // Solution 4 is this `default` tactic.
  --bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg, var(--bg-default));

  padding: 20px;
  margin: 10px;

  // Part of solution 1
  // background: var(--bg);
}
.variant {
  --color-1: green;
}
.variant-2 {
  --bg: red;
}