Custom Properties

:root {
  --color-primary: #1976d2;
  --spacing: 8px;
  --radius: 4px;
}

.button {
  background: var(--color-primary);
  padding: calc(var(--spacing) * 2);
  border-radius: var(--radius);
  color: #fff;
}

/* Override per component or theme */
.dark {
  --color-primary: #90caf9;
}

/* Fallback value if the variable is undefined */
.box {
  color: var(--missing, #333);
}

/* Update at runtime via JS */
// document.documentElement.style.setProperty("--spacing", "12px");