/* ==========================================================================
   ELX UI · Typography
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| Document
|--------------------------------------------------------------------------
*/

body{

    font-family:
        var(--elx-font-family);

    font-size:
        var(--elx-font-md);

    font-weight:
        var(--elx-font-normal);

    line-height:
        var(--elx-line-normal);

    color:
        var(--elx-text);

    background:
        var(--elx-background);

}


/*
|--------------------------------------------------------------------------
| Headings
|--------------------------------------------------------------------------
*/

h1,

h2,

h3,

h4,

h5,

h6{

    font-family:
        inherit;

    font-weight:
        var(--elx-font-bold);

    line-height:
        var(--elx-line-tight);

    color:
        inherit;

}

h1{

    font-size:
        var(--elx-font-3xl);

}

h2{

    font-size:
        var(--elx-font-2xl);

}

h3{

    font-size:
        var(--elx-font-xl);

}

h4{

    font-size:
        var(--elx-font-lg);

}

h5{

    font-size:
        var(--elx-font-md);

}

h6{

    font-size:
        var(--elx-font-sm);

}


/*
|--------------------------------------------------------------------------
| Paragraphs
|--------------------------------------------------------------------------
*/

p{

    line-height:
        inherit;

}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a{

    color:
        inherit;

    text-decoration:
        none;

    transition:
        color var(--elx-transition);

}


/*
|--------------------------------------------------------------------------
| Lists
|--------------------------------------------------------------------------
*/

ul,

ol{

    padding-left:
        var(--elx-space-lg);

}

li{

    line-height:
        inherit;

}


/*
|--------------------------------------------------------------------------
| Inline Elements
|--------------------------------------------------------------------------
*/

strong,

b{

    font-weight:
        var(--elx-font-bold);

}

em,

i{

    font-style:
        italic;

}

small{

    font-size:
        var(--elx-font-sm);

}

mark{

    padding:
        .1em
        .3em;

    border-radius:
        var(--elx-radius-xs);

    background:
        var(--elx-warning-soft);

    color:
        inherit;

}

abbr{

    cursor:
        help;

}


/*
|--------------------------------------------------------------------------
| Quotes
|--------------------------------------------------------------------------
*/

blockquote{

    padding-left:
        var(--elx-space-md);

    border-left:

        4px

        solid

        var(--elx-border);

    color:
        var(--elx-text-muted);

    font-style:
        italic;

}


/*
|--------------------------------------------------------------------------
| Code
|--------------------------------------------------------------------------
*/

code,

kbd,

samp{

    font-family:
        var(--elx-font-family-mono);

    font-size:
        .95em;

}

pre{

    overflow:auto;

    font-family:
        inherit;

}

pre code{

    font-family:
        inherit;

}