@import '../brand.import';

setup-color-system($customSettings = {}) {

	/*
   * Default settings:
   */
	$defaultSettings = {
		text: $brandBlack,
		bgBody: $brandWhite,
		link: $brandBlack,
		hover: $brandRed,
		pressed: #6A0000,
		visited: $brandBlack,
		selection: $brandRed,
		bgCode: #f7f7f7,
		colorCode: $brandBlack,
		colourHero: white
	}

	$settings = merge($defaultSettings, $customSettings);

  /*
   * Breakpoint setup:
   */
	body {
		color: $settings.text;
		background: $settings.bgBody;
	}

	::selection {
		background: $settings.selection;
		color: white;
		fill: white;
	}

	a {
  	color: $settings.link;
	}

	a:visited {
		color: $settings.visited;
	}

	a:hover,
	a:visited:hover {
		color: $settings.hover;
	}

	a:active {
		color: $settings.pressed;
  }

	a:focus {
		outline: none;
		color: $settings.hover;
	}

	p code {
    color: $settings.colorCode;
		background-color: $settings.bgCode;
	}

	pre {
    color: $settings.colorCode;
		background-color: $settings.bgCode;
	}

	.content {
		background-color: $settings.bgCode;
	}

	.content__container,
	.content__container--expand {
		background-color: $settings.bgBody;
	}

  .informational {
    color: #bbb;
  }

	/* Images so assume white text is required */
	.hero {
		h1, h2, h3, h4, h5, p, code {
			color: $settings.colourHero;
		}
	}
}