:root {
	/* palette */

	--primary: #20a8d8; /* NB: do not use this directly but use a role variable (below). Doing so preserves shading when using a theme */
	--secondary: #515b65;
	--danger: #f86c6b;
	--warn: #f8a41a;
	--success: #4dbd74;
	--disabled: #6b6b6b;


	/* roles */

	--bg-canvas: #0f1114;
	--bg-sunken: #1e1e1e;
	--bg-base: #212427;
	--bg-raised: #2e353a;
	--bg-overlay: #3a4149;
	--bg-selected: #515b65;

	--bg-track: rgba(255, 255, 255, 0.2); /* for sliders */

	--bg-accent: var(--primary);
	--bg-accent-hover: color-mix(in srgb, var(--bg-accent), black 10%);

	/* the following should match the --bg-* variables */
	--border-seam: #212427;
	--border-raised: #2e353a;
	--border-strong: #888888;

	--border-accent: var(--primary);


	--text-accent: var(--primary);
	--text-primary: #e9e9e9;
	--text-muted: #a9a9a9;
	--text-on-fill: var(--text-primary); /* useful for overrides (e.g.: b/w overrides this to black to be shown in light buttons) */

	--ink-inverse: var(--bg-canvas);


	/* misc */

	--scrim: #00000080;
	--overlay-glass: #2e353af2;
	--shadow: #000000;
}