//
// Color system
//

$white:    #FFFFFF !default;
$black:    #000000 !default;

$logo-red: #E24329 !default;
$logo-orange: #FC6D26 !default;
$logo-yellow: #FCA326 !default;

$blue-50:  #F6FAFE !default;
$blue-100: #E4F0FB !default;
$blue-200: #B8D6F4 !default;
$blue-300: #73AFEA !default;
$blue-400: #418CD8 !default;
$blue-500: #1F78D1 !default;
$blue-600: #1B69B6 !default;
$blue-700: #17599C !default;
$blue-800: #134A81 !default;
$blue-900: #0F3B66 !default;
$blue-950: #0A2744 !default;

$green-50:  #F1FDF6 !default;
$green-100: #DCF5E7 !default;
$green-200: #B3E6C8 !default;
$green-300: #75D09B !default;
$green-400: #37B96D !default;
$green-500: #1AAA55 !default;
$green-600: #168F48 !default;
$green-700: #12753A !default;
$green-800: #0E5A2D !default;
$green-900: #0A4020 !default;
$green-950: #072B15 !default;

$red-50:  #FEF6F5 !default;
$red-100: #FBE5E1 !default;
$red-200: #F2B4A9 !default;
$red-300: #EA8271 !default;
$red-400: #E05842 !default;
$red-500: #DB3B21 !default;
$red-600: #C0341D !default;
$red-700: #A62D19 !default;
$red-800: #8B2615 !default;
$red-900: #711E11 !default;
$red-950: #4B140B !default;

$orange-50:  #FFFAF4 !default;
$orange-100: #FFF1DE !default;
$orange-200: #FED69F !default;
$orange-300: #FDBC60 !default;
$orange-400: #FCA429 !default;
$orange-500: #FC9403 !default;
$orange-600: #DE7E00 !default;
$orange-700: #C26700 !default;
$orange-800: #A35200 !default;
$orange-900: #853C00 !default;
$orange-950: #592800 !default;

$purple-50:  #F9F7FE !default;
$purple-100: #EDE8FC !default;
$purple-200: #D0C3F6 !default;
$purple-300: #B29DF1 !default;
$purple-400: #9578EB !default;
$purple-500: #805DE7 !default;
$purple-600: #6E49CB !default;
$purple-700: #5C35AE !default;
$purple-800: #4A2192 !default;
$purple-900: #380D75 !default;
$purple-950: #25094E !default;

$gray-50:  #FAFAFA !default;
$gray-100: #F2F2F2 !default;
$gray-200: #DFDFDF !default;
$gray-300: #CCCCCC !default;
$gray-400: #BABABA !default;
$gray-500: #A7A7A7 !default;
$gray-600: #949494 !default;
$gray-700: #707070 !default;
$gray-800: #4F4F4F !default;
$gray-900: #2E2E2E !default;
$gray-950: #1F1F1F !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue-500,
  "green":      $green-500,
  "red":        $red-500,
  "orange":     $orange-500,
  "purple":     $purple-500,
  "gray":       $gray-500,
), $colors);

// Scales

$grid-scale-1:     px-to-rem(1px) !default;
$grid-scale-2:     px-to-rem(2px) !default;
$grid-scale-3:     px-to-rem(4px) !default;
$grid-scale-4:     px-to-rem(8px) !default;
$grid-scale-5:     px-to-rem(12px) !default;
$grid-scale-6:     px-to-rem(16px) !default;
$grid-scale-7:     px-to-rem(24px) !default;
$grid-scale-8:     px-to-rem(32px) !default;
$grid-scale-9:     px-to-rem(48px) !default;
$grid-scale-10:    px-to-rem(64px) !default;
$grid-scale-11:    px-to-rem(96px) !default;
$grid-scale-12:    px-to-rem(128px) !default;
$grid-scale-13:    px-to-rem(176px) !default;
$grid-scale-14:    px-to-rem(256px) !default;

$type-scale-1:     px-to-rem(12px) !default;
$type-scale-2:     px-to-rem(14px) !default;
$type-scale-3:     px-to-rem(16px) !default;
$type-scale-4:     px-to-rem(20px) !default;
$type-scale-5:     px-to-rem(24px) !default;
$type-scale-6:     px-to-rem(28px) !default;
$type-scale-7:     px-to-rem(42px) !default;

// Fonts

$font-family-sans-serif:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace:   "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
$font-family-base:        $font-family-sans-serif !default;
$font-family-emoji:       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

// $font-size-base is defined in functions-variables.scss
$line-height-base:        $grid-scale-6 !default;

$border-radius-base:      $grid-scale-3 !default;

$transition-base:         background-color 100ms linear, color 100ms linear, border 100ms linear;

$primary-type-color:      $gray-900 !default;
$secondary-type-color:    $gray-700 !default;

$bold-base:               600 !default;

// Components

$border-width:            $grid-scale-1 !default;
$border-color:            $gray-300 !default;
$border-color-secondary:  $gray-200 !default;
$border-color-tertiary:   rgba(0,0,0,.1) !default;
$border:                  solid $border-width $border-color !default;

// Body

$body-font-size:          $type-scale-2 !default;

// Typography

$h1-font-size:            $type-scale-6 !default;
$h2-font-size:            $type-scale-4 !default;
$h3-font-size:            $type-scale-2 !default;
$h4-font-size:            $type-scale-1 !default;
$h5-font-size:            $type-scale-1 !default;
$h6-font-size:            $type-scale-1 !default;

$h1-line-height:          $grid-scale-8 !default;
$h2-line-height:          $grid-scale-7 !default;
$h3-line-height:          $grid-scale-6 !default;
$h4-line-height:          $grid-scale-6 !default;
$h5-line-height:          $grid-scale-6 !default;
$h6-line-height:          $grid-scale-6 !default;

$p-font-size:             $type-scale-2 !default;
$p-line-height:           $grid-scale-7 !default;
$p-margin:                0 !default;

$headings-font-weight:    600 !default;
$headings-margin:         0 !default;

$link-color:              $blue-600 !default;

// Components

$border-width:      $grid-scale-1 !default;
$border-color:      $gray-300 !default;
$border:            solid $border-width $border-color !default;

// Markdown

$markdown-h1-font-size:                    $type-scale-7 !default;
$markdown-h2-font-size:                    $type-scale-6 !default;
$markdown-h3-font-size:                    $type-scale-4 !default;
$markdown-h4-font-size:                    $type-scale-3 !default;
$markdown-h5-font-size:                    $type-scale-2 !default;
$markdown-h6-font-size:                    $type-scale-2 !default;

$markdown-h1-line-height:                  $grid-scale-9 !default;
$markdown-h2-line-height:                  $grid-scale-8 !default;
$markdown-h3-line-height:                  $grid-scale-7 !default;
$markdown-h4-line-height:                  $grid-scale-7 !default;
$markdown-h5-line-height:                  px-to-rem(20px) !default;
$markdown-h6-line-height:                  px-to-rem(20px) !default;

$markdown-h1-margin:                       $grid-scale-7 0 $grid-scale-6 0 !default;
$markdown-h2-margin:                       $grid-scale-7 0 $grid-scale-6 0 !default;
$markdown-h3-margin:                       $grid-scale-7 0 $grid-scale-4 0 !default;
$markdown-h4-margin:                       $grid-scale-7 0 $grid-scale-4 0 !default;
$markdown-h5-margin:                       $grid-scale-7 0 $grid-scale-4 0 !default;
$markdown-h6-margin:                       $grid-scale-7 0 $grid-scale-4 0 !default;

$markdown-h1-padding-bottom:               $grid-scale-6 !default;
$markdown-h2-padding-bottom:               $grid-scale-6 !default;

$markdown-p-font-size:                     $type-scale-3 !default;
$markdown-p-line-height:                   $grid-scale-7 !default;
$markdown-p-margin:                        0 0 $grid-scale-6 0 !default;

$markdown-monospace-font-size:             px-to-rem(15px) !default; // Monospace size is special, does not fit in type-scale
$markdown-mention-link-padding:            0 $grid-scale-3 !default;
$markdown-mention-link-background:         $blue-50 !default;
$markdown-mention-link-hover-background:   $blue-100 !default;

$markdown-code-color:                      $red-600 !default;
$markdown-code-background-color:           $red-100 !default;
$markdown-code-padding:                    0 $grid-scale-3 !default;

$markdown-color-chip-width:                $grid-scale-6 !default;
$markdown-color-chip-height:               $grid-scale-6 !default;
$markdown-color-chip-margin:               0 0 0 $grid-scale-3 !default;

$markdown-blockquote-background:           $gray-50 !default;
$markdown-blockquote-border-width:         $grid-scale-2 !default;
$markdown-blockquote-padding:              $grid-scale-6 !default;
$markdown-blockquote-margin:               0 0 $grid-scale-6 $grid-scale-7 !default;

$markdown-inline-diff-padding:             0 $grid-scale-2 !default;
$markdown-inline-diff-radius:              $grid-scale-2 !default;
$markdown-inline-diff-addition-color:      $green-800 !default;
$markdown-inline-diff-addition-background: $green-100 !default;
$markdown-inline-diff-deletion-color:      $red-800 !default;
$markdown-inline-diff-deletion-background: $red-100 !default;

$markdown-list-item-line-height:           $grid-scale-7 !default;
$markdown-list-left-margin:                $grid-scale-7 !default;
$markdown-list-bottom-margin:              $grid-scale-6 !default;
$markdown-list-input-right:                $grid-scale-4 !default;
$markdown-list-input-bottom:               $grid-scale-3 !default;
$markdown-list-input-left:                 px-to-rem(-20px) !default; // Aligns task list inputs with other list items
$markdown-list-input-size:                 $type-scale-1 !default;

$markdown-table-padding:                   $grid-scale-4 $grid-scale-6 !default;
$markdown-table-header-background:         $gray-50 !default;
$markdown-table-font-size:                 $type-scale-3 !default;
$markdown-table-line-height:               $grid-scale-7 !default;
$markdown-table-margin:                    0 0 $grid-scale-6 0 !default;
$markdown-table-border:                    $border !default;

$markdown-emoji-font-family:               $font-family-emoji !default;
$markdown-emoji-font-size:                 1.5em !default;
$markdown-emoji-line-height:               .5 !default;

$markdown-pre-font-size:                   $markdown-monospace-font-size !default;
$markdown-pre-margin:                      0 0 $grid-scale-6 0 !default;
$markdown-pre-padding:                     $grid-scale-4 $grid-scale-5 !default;
$markdown-pre-border-color:                $border-color-tertiary !default;
$markdown-pre-border-radius:               0 !default;
$markdown-pre-line-height:                 $grid-scale-7 !default;
$markdown-pre-code-padding:                0 !default;

$markdown-pre-highlight-selectors: () !default;
$markdown-pre-highlight-selectors: map-merge((
  "white": (
    "background":       $white-highlight-background,
    "selectors":        $white-highlight-selectors,
  ),
  "dark": (
    "color":            $dark-highlight-text-color,
    "background":       $dark-highlight-background,
    "selectors":        $dark-highlight-selectors,
  ),
  "monokai": (
    "color":            $monokai-highlight-text-color,
    "background":       $monokai-highlight-background,
    "selectors":        $monokai-highlight-selectors,
  ),
  "solarized-light": (
    "color":            $solarized-light-highlight-text-color,
    "background":       $solarized-light-highlight-background,
    "selectors":        $solarized-light-highlight-selectors,
  ),
  "solarized-dark": (
    "color":            $solarized-dark-highlight-text-color,
    "background":       $solarized-dark-highlight-background,
    "selectors":        $solarized-dark-highlight-selectors,
  ),
), $markdown-pre-highlight-selectors);
