/*                                                                                                                                         
                                                ,,            ,,                          ,,                                             
 .M"""bgd mm                                    db          `7MM        mm         mm   `7MM                                    OO OO OO 
,MI    "Y MM                                                  MM        MM         MM     MM                                    88 88 88 
`MMb.   mmMMmm ,pW"Wq.`7MMpdMAo.     `7Mb,od8 `7MM  .P"Ybmmm  MMpMMMb.mmMMmm     mmMMmm   MMpMMMb.  .gP"Ya `7Mb,od8 .gP"Ya      || || || 
  `YMMNq. MM  6W'   `Wb MM   `Wb       MM' "'   MM :MI  I8    MM    MM  MM         MM     MM    MM ,M'   Yb  MM' "',M'   Yb     || || || 
.     `MM MM  8M     M8 MM    M8       MM       MM  WmmmP"    MM    MM  MM         MM     MM    MM 8M""""""  MM    8M""""""     `' `' `' 
Mb     dM MM  YA.   ,A9 MM   ,AP       MM       MM 8M         MM    MM  MM         MM     MM    MM YM.    ,  MM    YM.    ,     ,, ,, ,, 
P"Ybmmd"  `Mbmo`Ybmd9'  MMbmmd'      .JMML.   .JMML.YMMMMMb .JMML  JMML.`Mbmo      `Mbmo.JMML  JMML.`Mbmmd'.JMML.   `Mbmmd'     db db db 
                        MM                         6'     dP                                                                             
                      .JMML.                       Ybmmmd'                                                                               

Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray!
You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet.
So please don't use these styles. They're just here to put together the demo, and nothing more.
They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself.

Atomic design is philosophically complimentary with these CSS approaches:

* SMACSS by Jonathan Snook http://smacss.com/
* OOCSS by Nicole Sullivan http://oocss.org/
* BEM CSS Methology : http://bem.info/method/
* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines

So feel free to use any of these approaches. Or don't. It's totally up to you.

*/

/*------------------------------------*\
    $TABLE OF CONTENTS 
    based generally on Harry Roberts excellent CSS Guidelines https://github.com/csswizardry/CSS-Guidelines
\*------------------------------------*/
/**
 * VARIABLES..............................Declarations of Sass variables 
 * .....Colors
 * .....Typography
 * .....Layout
 * .....Defaults
 * .....Breakpoints
 * MIXINS.................................Sass mixins 
 * RESET..................................Set reset defaults
 * GLOBAL CLASSES.........................Set reset defaults
 * GLOBAL ELEMENTS........................Establish global styles
 * .....Main
 * .....Headings
 * .....Text-related elements (p, blockquote, lists)
 * .....Defaults
 * .....Breakpoints
 * TYPOGRAPHY------------------------------
 * MEDIA------------------------------
 * LAYOUT------------------------------
 * NAVIGATION------------------------------
 * TOC To Be Continued
 */



@import "scss/generic/variables";
@import "scss/generic/mixins";
@import "scss/generic/reset";





/*------------------------------------*\
    $GLOBAL ELEMENTS
\*------------------------------------*/
@import "scss/base/global-classes";
@import "scss/base/main";
@import "scss/base/links";
@import "scss/base/headings";
@import "scss/base/text";
@import "scss/base/lists";
@import "scss/base/media";
@import "scss/base/forms";
@import "scss/base/tables";
@import "scss/base/animation";





/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
@import "scss/objects/layout";


/*------------------------------------*\
    $PAGE STRUCTURE
\*------------------------------------*/
@import "scss/objects/header";
@import "scss/objects/nav";
@import "scss/objects/main";
@import "scss/objects/footer";



/*------------------------------------*\
    $TEXT Styles
\*------------------------------------*/
@import "scss/objects/text";


/*------------------------------------*\
    $COMPONENTS
\*------------------------------------*/
@import "scss/objects/icons";
@import "scss/objects/buttons";
@import "scss/objects/blocks";
@import "scss/objects/lists";
@import "scss/objects/tooltip";
@import "scss/objects/accordion";
@import "scss/objects/tabs";
@import "scss/objects/sections";
@import "scss/objects/article";
@import "scss/objects/comments";
@import "scss/objects/messaging";