// Custom Colors - defaults
:root {
	--newspack-theme-color-primary: #36f; // TODO: rename --newspack-primary-color, --newspack-listings--primary elsewhere
	--newspack-theme-color-primary-variation: #2240d5;
	--newspack-theme-color-secondary: #555; // TODO: replace --newspack-secondary-color elsewhere
	--newspack-theme-color-secondary-variation: #3e3e3e;
	--newspack-theme-color-highlight: #fed850;
	--newspack-theme-color-primary-darken-5: #1a53ff; // TODO: find a better approach than being this literal.
	--newspack-theme-color-primary-darken-10: #0040ff; // TODO: find a better approach than being this literal.

	// Constast colors - text against white background, if light changes to grey:
	--newspack-theme-color-primary-against-white: var(--newspack-theme-color-primary); // primary color against white bg.
	--newspack-theme-color-secondary-against-white: var(--newspack-theme-color-secondary); // secondary color against white bg.

	// Contrast colors - text to use against primary or secondary (black or white)
	--newspack-theme-color-against-primary: #fff; // text color on top of primary color bg.
	--newspack-theme-color-against-secondary: #fff; // text color on top of primary color bg.

	// Backgrounds
	--newspack-theme-color-bg-body: #fff;
	--newspack-theme-color-bg-input: var(--newspack-theme-color-bg-body);
	--newspack-theme-color-bg-light: #f0f0f0;
	--newspack-theme-color-bg-button-hover: #111;
	--newspack-theme-color-bg-pre: #eee;
	--newspack-theme-color-bg-pre-lighten-5: #fbfbfb; // TODO: find a better approach than being this literal.
	--newspack-theme-color-bg-dark: #333;
	--newspack-theme-color-bg-dark-lighten-5: #404040; // TODO: find a better approach than being this literal.
	--newspack-theme-color-bg-dark-darken-5: #262626; // TODO: find a better approach than being this literal.

	// Text
	--newspack-theme-color-text-main: #111;
	--newspack-theme-color-text-light: #515151;
	--newspack-theme-color-text-hover: var(--newspack-theme-color-bg-dark-lighten-5);
	--newspack-theme-color-text-screen: #21759b;

	// Links
	--newspack-theme-color-link: var(--newspack-theme-color-secondary);
	--newspack-theme-color-link-hover: var(--newspack-theme-color-secondary-variation-against-white);

	// Borders
	--newspack-theme-color-border: #ccc;
	--newspack-theme-color-border-light: #e0e0e0;

	// Alert
	--newspack-theme-color-alert-yellow: #f0b849;
	--newspack-theme-color-alert-red: #cc1818;
	--newspack-theme-color-alert-green: #4ab866;
}
