---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// FONTS

// $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:  SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-serif:      "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;

// SOLARIZED COLOR SCHEME

$base03:  #002b36; // darkest
$base02:  #073642;
$base01:  #586e75;
$base00:  #657b83;
$base0:   #839496;
$base1:   #93a1a1;
$base2:   #eee8d5;
$base3:   #fdf6e3; // lightest
$yellow:  #b58900;
$orange:  #cb4b16;
$red:     #dc322f;
$magenta: #d33682;
$violet:  #6c71c4;
$blue:    #268bd2;
$cyan:    #2aa198;
$green:   #859900;

$black-color:        $base03;
$off-black-color:    $base02;
$grey-color-darker:  $base01;
$grey-color-dark:    $base00;
$grey-color:         $base0;
$grey-color-light:   $base1;
$off-white-color:    $base2;
$white-color:        $base3;

// OTHER VARIABLES

$base-font-family:   $font-family-serif;
$base-font-size:     18px;
$base-font-weight:   400;
$base-line-height:   $base-font-size * 1.618;
$spacing-unit:       $base-line-height;

$small-font-size:    0.8rem;
$small-line-height:  $small-font-size * 1.618;

$background-color:     $white-color;
$text-color:           $grey-color-dark;
$highlight-bg-color:   $off-white-color;
$highlight-text-color: $grey-color-darker;
$muted-text-color:     $grey-color-light;

$dark-background-color:     $black-color;
$dark-text-color:           $grey-color;
$dark-highlight-bg-color:   $off-black-color;
$dark-highlight-text-color: $grey-color-light;
$dark-muted-text-color:     $grey-color-darker;

$brand-color:          $grey-color-dark;
$accent-color:         $green;
$title-color:          $green;
$warning-text-color:   $orange;

// Width of the content area
$content-width:      calc(620px + (#{$spacing-unit}*2));
$on-palm:            600px;
$on-laptop:          800px;


@mixin dark-mode {
  background-color: $dark-background-color;
  color:            $dark-text-color;
}


// Use media queries like this:
// @include media-query($on-palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left:  $spacing-unit / 2;
//     }
// }
@mixin media-query($device) {
  @media screen and (max-width: $device) {
    @content;
  }
}


// Import partials from `sass_dir` (defaults to `_sass`)
@import
  "fonts", 
  "base",
  "layout"
;