// Colors
$black:        hsl(0, 0%, 4%) 
$black-bis:    hsl(0, 0%, 7%) 
$black-ter:    hsl(0, 0%, 14%) 

$grey-darker:  hsl(0, 0%, 21%) 
$grey-dark:    hsl(0, 0%, 29%) 
$grey:         hsl(0, 0%, 48%) 
$grey-light:   hsl(0, 0%, 71%) 
$grey-lighter: hsl(0, 0%, 86%) 

$white-ter:    hsl(0, 0%, 96%) 
$white-bis:    hsl(0, 0%, 98%) 
$white:        hsl(0, 0%, 100%) 

$orange:       hsl(14,  100%, 53%) 
$yellow:       hsl(48,  100%, 67%) 
$green:        hsl(121, 71%,  38%) 
$turquoise:    hsl(171, 100%, 41%) 
$blue:         hsl(217, 71%,  53%) 
$purple:       hsl(271, 100%, 71%) 
$red:          hsl(358, 100%, 61%) 


// Typography
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif 
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace 

$size-1: 3rem
$size-2: 2.5rem
$size-3: 1.75rem
$size-4: 1.5rem
$size-5: 1.25rem
$size-6: 1rem
$size-7: 0.75rem


// Miscellaneous
$easing:  ease
$radius: 4px
$speed: 250ms


// Hauteur du header
$header-height: 68px
$footer-height: 90px


////////////////////////////////////////////////
////////////////////////////////////////////////
// 2. Primary colors

$primary: $black !default

$info: $blue !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default

$light: $white-ter !default
$dark: $grey-darker !default

////////////////////////////////////////////////
////////////////////////////////////////////////
// 3. Applied variables

// Invert colors
// $primary-invert: findColorInvert($primary) !default

// $info-invert: findColorInvert($info) !default
// $success-invert: findColorInvert($success) !default
// $warning-invert: findColorInvert($warning) !default
// $danger-invert: findColorInvert($danger) !default

$light-invert: $dark !default
$dark-invert: $light !default

// General colors
$body-background: $white !default

$background: $white-ter !default

$border: $grey-lighter !default
$border-hover: $grey-light !default

// Text colors
$text: $grey-dark !default
$text-invert: findColorInvert($text) !default
$text-light: $grey !default
$text-strong: $grey-darker !default

// Code colors
$code: $red !default
$code-background: $background !default

$pre: $text !default
$pre-background: $background !default

// Link colors
$link: $primary !default

// $link-invert: $primary-invert !default
$link-visited: $primary !default

$link-hover: $grey-darker !default
$link-hover-background: $white-ter !default
$link-hover-border: $grey-darker !default

$link-active: $grey-darker !default
$link-active-border: $grey-darker !default

$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-3 !default
$size-huge: $size-1 !default



// |--------------------------------------------------------------------------
// | Breakpoints
// |--------------------------------------------------------------------------

// $breakpoint-full-sup: 120.063rem;
// $breakpoint-full: 120rem;
// $breakpoint-ipadH-sup: 64.063rem;
// $breakpoint-ipadH: 64rem;
// $breakpoint-ipadV-sup: 48.063rem;
// $breakpoint-ipadV: 48rem;
// $breakpoint-phone-sup: 25.063rem;
// $breakpoint-phone: 25rem;

$phone: 480px;
$tablet-verticale: 768px;
$tablet-horizontale: 1024px;

$global-max-width: 1320px;