/*  ==========================================================================
    TYPOGRAPHY AND COLORS
    ========================================================================== */


/*
    Font families
    ==================================== */





/*
    Typography
    ==================================== */
    

html, body
{
    @include rem('font-size', 14px);
    @include rem('line-height', 24px);
    color: $color-default;
    font-weight: $font-weight-400;
    font-family: $font-family-default;

    @media screen and (min-width:mq-em($bp-gamma)) {
        @include rem('font-size', 16px);
    }

}

h1, .h-1, h2, .h-2, h3, .h-3  {
    font-family: $font-family-default; font-weight: $font-weight-400; color: $color-default; 
    span {
        font-weight: $font-weight-100; /*color: $color-meta; */
    }
}
h3, .h-3
{
    font-weight: $font-weight-600;
}
  
/*
    Headings
*/
h1, .h-1                    { @include rem('font-size', 50px); @include rem('line-height', 50px); /*margin-bottom: 1em;*/ letter-spacing: -.05em; }
h2, .h-2                    { @include rem('font-size', 48px); @include rem('line-height', 48px); margin-bottom: 1em; letter-spacing: -.03em; }
h3, .h-3                    { @include rem('font-size', 36px); @include rem('line-height', 32px); margin-bottom: 1em; letter-spacing: -.01em; }
h4, .h-4                    { @include rem('font-size', 26px); @include rem('line-height', 32px); margin-bottom: 1em; }
h5, .h-5                    { @include rem('font-size', 24px); @include rem('line-height', 24px); margin-bottom: 1em; }
h6, .h-6                    { @include rem('font-size', 18px); @include rem('line-height', 24px); margin-bottom: 1em; }
p, .p, ul, ol, dl, table    { @include rem('font-size', 16px); @include rem('line-height', 24px); margin-bottom: 1em; }

.fs-xs                      { @include rem('font-size', 10px); @include rem('line-height', 10px); text-transform: uppercase; letter-spacing: -.01em; }
.fs-s                       { @include rem('font-size', 12px); @include rem('line-height', 16px); }

/*
    Article
*/
.Article p, .Article ul, .Article ol, .Article dl
                            { @include rem('font-size', 16px); @include rem('line-height', 24px); }

.Article li                 { position: relative; margin-bottom: 1em; }
ul.Data li                  { position: relative; }
.Article ul, ul.Data        { 
    counter-reset: ul_list-counter; 
}
.Article ul li, ul.Data li  
{
    &:before                { content: '\2022'; @include rem('font-size', 24px); @include rem('line-height', 24px); position: absolute; left: -0.75em; color: $color-dist; font-weight: $font-weight-700; }

}
.Article ol                 { counter-reset: list-counter; }
.Article ol li 
{
    &:before                { content: counter(list-counter, decimal)'.'; counter-increment: list-counter; font-weight: $font-weight-700; position: absolute; left: -1.5em; }
}
.Article ul ul, .Article ol ul, .Article ol ol, .Article ul ol
                            { margin-left: 1.33em; padding-bottom: 0; margin-top: 1em; }


/*
    Links
    ==================================== */

a 
{ 
    color: $color-dist; text-decoration: none; @include transition(color 0.2s ease-out);
    @include hover {
        color: $color-brand-epsilon;
    }
}

a.c-def 
{ 
    color: $color-default; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}

a.c-meta
{ 
    color: $color-meta; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}

a.c-light
{ 
    color: $color-light; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}

a.c-info
{ 
    color: $color-info; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}


a.c-note
{ 
    color: $color-note; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}

a.c-w
{ 
    color: $color-white; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}

a.c-b
{ 
    color: $color-black; text-decoration: none; 
    @include hover {
        color: $color-dist;
    }
}



/*
    Colors
    ==================================== */


/*
    Default colors
*/
.c-w                        { color: $color-white; }
.c-b                        { color: $color-black; }
.c-error                    { color: $color-error; }
.c-succes                   { color: $color-success; }
.c-default                  { color: $color-default; }

/*
    Site colors
*/
.c-def                      { color: $color-default; }
.c-dark                     { color: $color-dark; }
.c-meta                     { color: $color-meta; }
.c-light                    { color: $color-light; }
.c-info                     { color: $color-info; }
.c-note                     { color: $color-note; }
.c-dist                     { color: $color-dist; }

/*
    Brand colors
*/
.c-brand-alpha              { color: $color-brand-alpha; }
.c-brand-beta               { color: $color-brand-beta; }
.c-brand-gamma              { color: $color-brand-gamma; }
.c-brand-delta              { color: $color-brand-delta; }
.c-brand-epsilon            { color: $color-brand-epsilon; }
// .c-brand-zeta               { color: $color-brand-zeta; }



/*
    Site Sections
    ==================================== */


/*
    Article
*/
.Article-lead p, .Article-quote     
{ 
    @include rem('font-size', 22px); @include rem('line-height', 32px);
}

.Article ul, .Article ol    { margin-left: 1em; }

/*
    Footer
*/
.Footer                     { color: $color-meta; }
    .Copyright              { color: $color-note; font-weight: $font-weight-700;; }
