// Tipografia

$font--family           = Lato, "Helvetica Neue", Arial, sans-serif;
$font--light            = 300;
$font--regular          = 400;
$font--bold             = 700;
$font--black            = 900;
$font--color            = $color--main-dark;



// Breakpoints

$screen--xs             = 0px;
$screen--sm             = 360px;
$screen--md             = 768px;
$screen--lg             = 1280px;
$screen--xl             = 1600px;

// breakpoint intermediário para situações específicas

$screen--inter          = 992px;


// Gutter

$gutter--xs             = 20px;
$gutter--sm             = 10px;
$gutter--md             = 20px;
$gutter--lg             = 30px;
$gutter--xl             = $gutter--lg;



// Espaçamento vertical

$vertical--element-sm   = 20px;     // usado para separar elementos num mesmo contexto
$vertical--element-lg   = 40px;     // usado para separar elementos num mesmo contexto
$vertical--block-sm     = 80px;     // usado para separar blocos de conteúdos diferentes
$vertical--block-lg     = 160px;    // usado para separar blocos de conteúdos diferentes



//  Global nav

$gnav--h-sm             = 64px;
$gnav--w-collapsed      = 80px;
$gnav--w-open           = 320px;
$gnav--anim-time-sm     = .5s;
$gnav--anim-time-lg     = .5s;


// Cabeçalhos

$headings = {
    h1: {
        xs: { 
            font-size: 40px,
            line-height: 56px
        },
        sm: { 
            font-size: 52px,
            line-height: 64px
        },
        xl: { 
            font-size: 60px,
            line-height: 78px
        },
    },
    h2: {
        xs: {
            font-size: 32px,
            line-height: 42px
        },
        sm: {
            font-size: 36px,
            line-height: 56px
        },
        xl: {
            font-size: 40px,
            line-height: 56px
        }
    },
    h3: {
        xs: {
            font-size: 18px,
            line-height: 26px
        },
        xl: {
            font-size: 20px,
            line-height: 32px
        }
    },
    h4: {
        xs: {
            font-size: 16px,
            line-height: 22px
        },
        xl: {
            font-size: 18px,
            line-height: 26px
        }
    }
}



// Grid

$grid--total-xs         = 2;
$grid--total-sm         = 12;
$grid--total-md         = $grid--total-sm;
$grid--total-lg         = $grid--total-sm;
$grid--total-xl         = $grid--total-sm;



// Z-index

$level--chat            = 1700;
$level--menu            = 1800;
$level--modal           = 1900;
$level--toast           = 2000;