In the theme editor there is a WYSIWYG editor for these variables. For file based themes you can set the values of the variables in your assets/variables.neon file.
Basic Customizations
global.mainColors.bg : The background color of your site.global.mainColors.fg : The foreground (text) color of your site.global.mainColors.primary : The primary (brand) color of your site. This is the default color for elements like the title bar and links.global.links.default : Your link color.
You can get your theme up and running pretty well with just the basic customizations because many of the other styles are calculated from them. If you want to do further customizations then read on.
Advanced Customizations
global.body.backgroundImage : Give the URL of a background image for the main content of the site.global.fonts.families.body : Change the font family of the site. Note that if you are using a custom font then you will have to load it yourself.global.meta.text.color : Meta text is small text that gives additional information such as dates. It should be a subtle color. It defaults to 85% of the global foreground color.global.links.state: Your link hover/active color if you want a specific color for these states.