What are CSS variables?
CSS variables, also known as custom properties, are defined using the `--` prefix followed by a name and assigned a value. Here's the general syntax for defining a CSS variable: :root { --variable-name: value; } - `:root`: The `:root` pseudo-class selects the highest-level element in the document tree, typically the `<html>` element. It's commonly used to define global CSS variables that can be accessed throughout the document. - `--variable-name`: This is the name of the CSS variable. It must start with two dashes (`--`) followed by a name. The name can consist of letters, digits, hyphens, and underscores, but it cannot start with a digit. - `value`: This is the value assigned to the CSS variable. It can be any valid CSS value, such as a color, size, font, or any other property value. Here's an example of how to define CSS variables: :root { --primary-color: #007bff; /* Define a CSS variable for the primary color */ --font-size: 16