/* The @layer CSS at-rule is used to declare a cascade layer 
and can also be used to define the order of precedence 
in case of multiple cascade layers
@link: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
*/
@layer abstract, reset, base;

/* 
* The variables/tokens (or whatever you 
* wish to call them) that power the rest of your styles
*/
@import url('abstracts/fonts.css')     layer(abstract);
@import url('abstracts/variables.css') layer(abstract);

/* 
* Embrace the cascade and inheritance to 
* style as much as possible at a global level 
*/
@import url('base/reset.css' ) layer(reset);
@import url('base/global.css') layer(base);

/* 
* High level, flexible layouts that provide a 
* skeleton to support any variant of a component
*/
@import url('compositions/cluster.css') layer(compositions);

/* 
* Classes that do one job and one job well 
*/
@import url('utilities/a11y.css') layer(utilities);