//******************//
//     Settings     //
//******************//

//-----------------//
//   Breakpoints   //
//-----------------//
@function screen($breakpoints) {
  $query: "only screen";
  @each $property, $value in $breakpoints {
    $query: "#{$query} and (#{$property}: #{$value})";
  }

  @return "#{$query}";
}

//--- Breakpoints ---//
$phone-breakpoint:   480px;
$tablet-breakpoint:  768px;

//--- Page Width ---//
$minimum-page-width: 320px;
$maximum-page-width: 1080px;

//--- Screens ---//
$phone-screen:              screen((max-width: $phone-breakpoint));
$tablet-screen:             screen((min-width: $phone-breakpoint + 1, max-width: $tablet-breakpoint));
$desktop-screen:            screen((min-width: $tablet-breakpoint + 1));
$phone-and-tablet-screen:   screen((max-width: $tablet-breakpoint));
$tablet-and-desktop-screen: screen((min-width: $tablet-breakpoint));

//--- Others Screens ---//
$phone-to-tablet-screen:    screen((min-width: $phone-breakpoint + 1, max-width: $tablet-breakpoint - 1));
$tablet-to-desktop-screen:  screen((min-width: $tablet-breakpoint + 1, max-width: $maximum-page-width - 1));
$largest-phone-screen:      screen((max-width: $tablet-breakpoint - 1));
$largest-tablet-screen:     screen((max-width: $maximum-page-width - 1));


//-----------//
//   Fonts   //
//-----------//
$font-smoothing: antialiased !default;

//--- Page ---//
$font-size:   16px !default;
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
$font-weight: normal !default;
$line-height: 1.5 !default;

//--- Header ---//
$header-font-family: $font-family !default;
$header-font-weight: bold !default;
$header-line-height: 1.3 !default;


//------------//
//   Colors   //
//------------//

$blue:   #005fb2 !default;
$green:  #04844b !default;
$red:    #a61a14 !default;
$yellow: #ffb75d !default;

//--- Gray Scale ---//
$white:  #ffffff !default;
$silver: #cccccc !default;
$gray:   #3f3f3f !default;
$black:  #000000 !default;

//--- Emotive ---//
$positive-color: $green !default;
$negative-color: $red !default;
$info-color:     $blue !default;
$warning-color:  $yellow !default;

//--- Theme ---//
$primary-color:   #4d5256 !default;
$secondary-color: $silver !default;

//--- Page ---//
$background-color: #eeeeee !default;
$text-color:       $gray !default;

//--- Highlighting ---//
$highlight-background: rgba($primary-color, 0.5) !default;
$highlight-color:      $white !default;


//-------------//
//   Borders   //
//-------------//
$radius:          4px !default;
$circular-radius: 500rem !default;
