@import url(https://fonts.googleapis.com/css?family=PT+Sans);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab); 
:root {
	/** Base colors */
	--clr-dark-a0: #000000;
	--clr-light-a0: #ffffff;

	/** Theme primary colors */
	--clr-primary-a0: #cf2759;
	--clr-primary-a10: #d8496a;
	--clr-primary-a20: #e0637b;
	--clr-primary-a30: #e77b8c;
	--clr-primary-a40: #ed929e;
	--clr-primary-a50: #f2a8b1;

	/** Theme surface colors */
	--clr-surface-a0: #121212;
	--clr-surface-a10: #282828;
	--clr-surface-a20: #3f3f3f;
	--clr-surface-a30: #575757;
	--clr-surface-a40: #717171;
	--clr-surface-a50: #8b8b8b;

	/** Theme tonal surface colors */
	--clr-surface-tonal-a0: #241719;
	--clr-surface-tonal-a10: #392c2e;
	--clr-surface-tonal-a20: #4f4344;
	--clr-surface-tonal-a30: #665b5c;
	--clr-surface-tonal-a40: #7d7475;
	--clr-surface-tonal-a50: #968e8f;
}
.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-slab-header {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: light;
}

/** Examples */
.bg-primary {
	color: var(--clr-primary-a50);
	background-color: var(--clr-surface-a0);
}
body {
	font-family: "PT Sans", sans-serif; 
	font-weight: 400; 
	font-style: normal; 

	background-color: var(--clr-surface-a0); 
	color: var(--clr-primary-a0); 
}
h1 { 
      	font-family: "Roboto Slab", serif;
  	font-optical-sizing: auto;
  	font-weight: 300;
  	font-style: light;
}

*, ::after, ::before {
    box-sizing: content-box
}