variables in CSS

There was a presentation on Angular Elements at my work today. It was alright. iFrames were suggested to be used some in clickjacking, etc. ...hence it would be best to include reusable stuff with Angular Elements instead of iFrames, etc. Anyhow, it was mentioned that while the CSS in Angular Elements is mostly sandboxed, a loophole in the sandboxing is CSS. These can be overpowered from the outside. So what are CSS variables? This has this example that would appear at the top of your stylesheet:

:root {
   --bgcolour: #ffffd0;
   --bqindents: 40px;
   --warningtextsize: 125%;
}

 
 

The example the link above has for using this stuff is:

table {
   background-color: var(--bgcolour);
}
blockquote {
   margin-left: var(--bqindents);
   margin-right: var(--bqindents);
}
p.warning {
   color: red;
   background-color: var(--bgcolour);
   font-size: var(--warningtextsize);
}