Variables CSS (Custom Properties)

Las variables CSS (custom properties) se definen con --nombre-variable: valor; dentro de :root para que sean globales. Se usan con var(--nombre-variable). Son ideales para colores, tamaños de fuente, espaciados y radios de borde que se repiten en todo el CSS. Si necesitas cambiar el color primario, cambias la variable y se actualiza en todo el sitio automáticamente.

Las variables CSS son la base de los temas dinámicos. Para implementar dark mode, defines dos sets de variables (una para light, otra para dark) y cambias cuál aplica con una clase en el body o con prefers-color-scheme. A diferencia de las variables de SASS/LESS, las CSS custom properties son dinámicas: puedes cambiarlas con JavaScript en tiempo real.

/* DEFINIR variables en :root (global) */
:root {
  --color-primario: #00E5A0;
  --color-secundario: #4D9FFF;
  --color-fondo: #0A0F1E;
  --color-texto: #FFFFFF;
  --fuente-base: "Inter", sans-serif;
  --espaciado-sm: 8px;
  --espaciado-md: 16px;
  --espaciado-lg: 24px;
  --border-radius: 12px;
  --sombra: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* USAR las variables */
.boton {
  background: var(--color-primario);
  padding: var(--espaciado-sm) var(--espaciado-md);
  border-radius: var(--border-radius);
  font-family: var(--fuente-base);
}

/* DARK MODE con variables */
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #0A0F1E;
    --color-texto: #FFFFFF;
  }
}