Trabajar con variables CSS es como construir una base sólida para tu proyecto: si lo haces bien desde el principio, todo lo demás se vuelve más fácil. En este caso, el error no está en el valor ni en el lugar donde se declara la variable, sino en la sintaxis. Para que el navegador reconozca una variable CSS, debe comenzar con dos guiones (--). Además, no basta con declararla, ¡hay que aplicarla! Usar var(--nombre-variable) es lo que realmente conecta la declaración con el estilo visual. Este tipo de detalle puede parecer pequeño, pero marca una gran diferencia en la eficiencia del código.