// Variables to setup globally some site standard values.

// # Colours

$lighter-blue:                hsl(201, 88%, 84%) !default;
$light-blue:                  hsl(212, 100%, 45%) !default;
$blue:                        hsl(212, 100%, 35%) !default;
$dark-blue:                   hsl(212, 100%, 25%) !default;

$white:                       hsl(0, 0%, 100%) !default;
$lighter-grey:                hsl(210, 25%, 94%) !default;
$light-grey:                  hsl(213, 26%, 83%) !default;
$grey:                        hsl(214, 21%, 73%) !default;
$dark-grey:                   hsl(213, 17%, 58%) !default;
$darker-grey:                 hsl(214, 20%, 41%) !default;
$almost-black:                hsl(204, 25%, 20%) !default;
$black:                       hsl(0, 0%, 11%) !default;
$black-alpha-2:               hsla(0, 0%, 0%, .3) !default;
$black-alpha-3:               hsla(0, 0%, 0%, .3) !default;

$light-green:                 hsl(149, 57%, 91%) !default;
$green:                       hsl(148, 97%, 38%) !default;

$light-orange:                hsl(27, 100%, 95%) !default;
$orange:                      hsl(27, 100%, 64%) !default;

$light-red:                   hsl(5, 70%, 79%) !default;
$red:                         hsl(5, 70%, 49%) !default;

// # Theme colours

$primary:                     $blue !default;
$primary-light:               $light-blue !default;
$primary-dark:                $dark-blue !default;

$secondary:                   $blue !default;
$secondary-dark:              $dark-blue !default;

$border:                      $grey !default;
$border-lighter:              $light-grey !default;
$border-active:               $light-blue !default;
$border-radius:               3px !default;

$background-white:            $white !default;
$background-grey:             $lighter-grey !default;
$background-color:            $blue !default;
$background-dark:             $black !default;

$box-shadow:                  $light-grey !default;
$dark-text:                   $almost-black !default;
$label-text:                  $darker-grey !default;

// ## Dropdown

$box-shadow-dropdown:         $black-alpha-2 !default;

// ## Buttons
$box-shadow-button:           $black-alpha-3 !default;
$box-shadow-button-hover:     $secondary-dark !default;

// ## Messages

$border-message-success:      $green !default;
$border-message-warning:      $orange !default;
$border-message-error:        $red !default;
$border-message-info:         $light-blue !default;

$background-message-success:  $light-green !default;
$background-message-warning:  $light-orange !default;
$background-message-error:    $light-red !default;
$background-message-info:     $lighter-blue !default;

// # Typography

$font-size:                   calc(.75em + .25vw) !default;
$font-family-primary:         'Source Sans Pro', Arial, sans-serif !default;
$font-family-secondary:       'Evolventa', 'Trebuchet MS', sans-serif !default;

// # Content breakpoints

$breakpoint-tablet:           40em !default;
$breakpoint-desktop:          53.75em !default;

// # Other global variables

$fa-font-path:                '~@fortawesome/fontawesome-free/webfonts' !default;

$space-l: 2em !default;
$space-xs: 0.5em !default;

:root {
  --primary-color-producer: var(--theme-primary);
  --primary-color-reuser: #00ac8c;
}
