$indigo: #3F51B5;
$light-indigo: lighten($indigo, 10%);
$dark-indigo: darken($indigo, 10%);

$purple: #AA00FF;
$light-purple: lighten($purple, 10%);
$dark-purple: darken($purple, 10%);

$black: #000;
$white: #fff;

$colors: (
	body-bg: $indigo,
	body-color: $white,
	light-title-bg: $light-purple,
	title-bg: $purple,
	dark-title-bg: $dark-purple,
	content-bg: rgba($white, 0.1),
	a-color: $light-purple
);
// Color Map Get Function
@function color($key) {
	@if map-has-key($colors, $key) {
		@return map-get($colors, $key);
	}

	@warn "Unkown '#{$key}' in $colors.";
	@return null;
}

@include size-with-rem;

body {
	background: color(body-bg);
	color: color(body-color);
	font-family: "Roboto", sans-serif;
	font-size: 1.6rem;
}

.container {
	@include container;	
	padding: 0 1.6rem;
	
	@include respond-to(large) {
		padding: 0;
	}
}

h1 {
	font-size: 4rem;
}

p {
	font-size: 1.8rem;
}

.accordion {
	width: 100%;
	
	& + & {
		margin-top: 2rem;
	}

	
	@include e(title) {
		@include clearfix;
		background: linear-gradient(to right, color(light-title-bg), color(title-bg), color(dark-title-bg));
		cursor: pointer;
		padding: 1rem;
		position: relative;
		
		span {
			float: left;
			font-size: 2.4rem;
			font-weight: 700;
		}
		
		.toggle{
			@include triangle(bottom, 20px, 10px, color(body-color));
			position: absolute;
			right: 2.5rem;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
	@include e(content) {
		background: color(content-bg);
		display: none;
		padding: 0 1.6rem;
		
		p {
			&:first-child {
				margin-top: 0;
				padding-top: 1.6rem;
			}
			
			&:last-child {
				margin-bottom: 0;
				padding-bottom: 1.6rem; 
			}
		}
	}
}

a {
	color: color(a-color);
}