
// Colors -----------------------
// TODO: Audit for contrast

// main
$main-bg-color:       hsl(190, 12%, 100%) !default;
$main-bg-color-shade: hsl(190, 12%, 97%) !default;
$main-color-subtle:   hsl(190, 12%, 54%) !default;
$main-color:          hsl(192, 24%, 30%) !default;
$main-color-strong:   hsl(190, 48%, 24%) !default;

$main-border-color:   hsl(190, 12%, 84%) !default;
$main-link-color:     hsl(190, 89%, 31%) !default;
$main-drop-shadow: hsl(0, 0, 28%) !default;

// Jumbo
$jumbo-bg-color:     hsl(230, 16%, 20%) !default;
$jumbo-color-subtle: hsl(190, 24%, 52%) !default;
$jumbo-color:        hsl(190, 36%, 60%) !default;
$jumbo-color-strong: hsl(190, 88%, 80%) !default;
$jumbo-bg-border: hsl(233, 15%, 12%) !default;

// Sub
$sub-bg-color:     $main-bg-color-shade !default;

// Mini
$mini-bg-color:     hsl(230, 24%, 36%) !default;
$mini-color:        hsl(230, 24%, 80%) !default;
$mini-color-link:   hsl(230, 24%, 100%) !default;

// Accent
$accent-color: hsl(335, 87%, 47%) !default;
$screen-shot-bg: hsl(0, 0%, 89%);

// Basecoat overrides

$theme-color: $main-color-strong !default;

$body-color:    $main-color !default;
$heading-color: $main-color-strong !default;

$border-color: $main-border-color !default;

// Increase xl breakpoint
// So that containers start breaking before touching the edge
// Default: $container-max-widths: ( xl: 1260px );
$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1300px)) !default;

$code-font-family: consolas, "Liberation Mono", menlo, courier, monospace !default;

$nodejs-color: #65aa4c;
$chromium-color: #5586eb;
