///////////
// ITCSS -- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

// Settings
//     used with preprocessors and contain font, colors definitions, etc.
@import 'settings/colors';
@import 'settings/variables';

// Tools
//     globally used mixins and functions. It’s important not to output
//     any CSS in the first 2 layers.
@import 'tools/mixins';
@import 'tools/keyframes';

// Generic
//     reset and/or normalize styles, box-sizing definition, etc. This is
//     the first layer which generates actual CSS.
@import 'generic/reset';
@import 'generic/container';
@import 'generic/grid';
@import 'generic/typography';

// Elements
//     styling for bare HTML elements (like H1, A, etc.). These come with
//     default styling from the browser so we can redefine them here.
@import 'elements/body';
@import 'elements/header';
@import 'elements/headings';
@import 'elements/main';
@import 'elements/section';
@import 'elements/article';
@import 'elements/p';
@import 'elements/img';
@import 'elements/video';
@import 'elements/lists';
@import 'elements/links';
@import 'elements/form';
@import 'elements/inputs';
@import 'elements/footer';

// Components
//     specific UI components. This is where majority of our work takes place
//     and our UI components are often composed of Objects and Components
@import 'components/main-nav';

// Utilities
//     utilities and helper classes with ability to override anything which
//     goes before in the triangle, eg. hide helper class
@import 'utilities/helpers';