////////////////////////////////////////////////
////////////////////////////////////////////////
// 1. Initial variables

// 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(141, 71%,  48%);
$turquoise:    hsl(171, 100%, 41%);
$blue:         hsl(217, 71%,  53%);
$purple:       hsl(271, 100%, 71%);
$red:          hsl(348, 100%, 61%);

// Typography
// $family-sans-serif: "Noto Sans", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
// $family-monospace: "Noto Mono", monospace;

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

$weight-light: 300;
$weight-normal: 400;
$weight-semibold: 500;
$weight-bold: 700;

// Body
$body-background: $white;
$body-size: 16px;

// Responsiveness
// 960, 1152, and 1344 have been chosen because
// they are divisible by both 12 and 16
$tablet: 769px;
// 960px container + 40px
$desktop: 1000px;
// 1152px container + 40
$widescreen: 1192px;
// 1344px container + 40
$fullhd: 1384px;

// Miscellaneous
$easing: ease-out;
// $radius-small: 2px;
// $radius: 3px;
// $radius-large: 5px;
$radius-small: 0;
$radius: 0;
$radius-large: 0;
$speed: 86ms;

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

$primary: $turquoise;

$info: $blue;
$success: $green;
$warning: $yellow;
$danger: $red;

$light: $white-ter;
$dark: $grey-darker;

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

// General colors
$background: $white-ter;

$border: $grey-lighter;
$border-hover: $grey-light;

// Text colors
$text: $grey-dark;
$text-light: $grey;
$text-strong: $grey-darker;

// Code colors
$code: $red;
$code-background: $background;

$pre: $text;
$pre-background: $background;

// Link colors
$link: $primary;
$link-visited: $purple;

$link-hover: $grey-darker;
$link-hover-border: $grey-light;

$link-focus: $grey-darker;
$link-focus-border: $primary;

$link-active: $grey-darker;
$link-active-border: $grey-dark;

// Typography
// $family-primary: $family-sans-serif;
// $family-code: $family-monospace;

$size-small: $size-7;
$size-normal: $size-6;
$size-medium: $size-5;
$size-large: $size-4;