reusing css color attributes

:root{
--primary-color:red;
--secondary-color:blue;

}

root element match the top most element in a web document(tree structure) so when creating variables in root it can be accessed anywhere inside the dom(Document Object Model)
--primary-color,--secondary-color are variablels.We can reuse this elements by the following code

div{
color:var(--primary-color);
background-color:var(--secondary-color);
}

this selects --primary-color to all elements with a div parent and background-color to --secondary-color