Comece criando o arquivo HTML:

<!DOCTYPE html>

<html lang="pt-br">

<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Variáveis no CSS</title>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
    <header>
        <h1>Variáveis no CSS</h1>
    </header>

    <section>
        <h2>Como declarar e usar variáveis no CSS</h2>
        <p>As variáveis do CSS podem ser usadas para armazenar valores que serão reutilizados em várias partes do código. Esses valores podem ser facilmente modificados para atualizar a interface de forma facilitada.</p>
        <div>Caixa com cor da variável global</div>
        <div class="red-box">Caixa com cor da variável local</div>
    </section>
</body>

</html>

Para criar variáveis globais no CSS usamos o seletor :root e dentro dele definimos os nomes iniciados por --:

:root {
    --cor-principal: #3c59e7;
    --cor-claro: #cfc9c9;
    --cor-escuro: #232323;
    --preenchimento-pq: .25rem 1rem;
    --preenchimento-md: 2rem;
    --preenchimento-gd: 4rem;
}

header {
    background-color: var(--cor-escuro);
    color: var(--cor-claro);
    padding: var(--preenchimento-pq);
}

section {
    background-color: var(--cor-claro);
    padding: var(--preenchimento-md);
}

Quando necessário, também podemos modificar variáveis dentro de um elemento específico:

div {
    --preenchimento-pq: 1rem;
    background-color: var(--cor-principal);
    color: var(--cor-claro);
    padding: var(--preenchimento-pq);
}

.red-box {
    --cor-principal: #f64348;
}

Agora você pode ver que os valores são facilmente ajustáveis, atualizando toda a interface.