// Font Families
$base-font-family: -apple-system-font, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

$monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;

// Site Wide Variables
$site-header-background-color: #161616 !default;
$site-header-text-color: #ffffff !default;
$site-header-text-color-visited: darken(#828282, 25%); // --grey-color-dark in light mode
$site-title-font-size: 28px !default;
$site-footer-font-size: 16px !default;

// Font Sizes
// $title-large-font-size: 1px !default;
$title-font-size: 42px !default;
$title-medium-font-size: 32px !default;
$title-small-font-size: 27px !default;

$subtitle-font-size: 24px !default;
$subtitle-small-font-size: 22px !default;

$meta-font-size: 21px !default;
$meta-small-font-size: 19px !default;

$lead-font-size: 20px !default;
$lead-small-font-size: 18px !default;

$base-font-size: 17px !default;
$caption-font-size: 17px !default;
$blockquote-font-size: 18px !default;
$small-font-size:   $base-font-size * 0.875 !default;
$nav-font-size:     16px !default;

// Font Variables
$base-font-weight: 400 !default;
$heavy-font-weight: 600 !default;
$base-line-height: 1.5 !default;

// Spacing/Padding
$spacing-unit: 20px !default;
$page-content-padding: 80px !default;

// Colors
$grey-color:        #828282 !default;
$brand-color:       #2568ba !default;
$a-color:           #0070c9 !default;
$a-hover-opacity:   .65 !default;

// Width of the content area
$content-width:     1080px !default;
$on-palm:           692px !default;
$on-laptop:         980px !default;
$on-medium:         1068px !default;
$on-small:          735px !default;

// Variables that change with dark mode
:root {
  --text-color: #333333;
  --dim-text-color: #ffffff;
  --background-color: #ffffff;
  --footer-background-color: #f2f2f2;
  --footer-text-color: $grey-color;
  --grey-color-light: lighten(#828282, 40%); // Use the $grey-color as base
  --grey-color-lighter: lighten(#828282, 50%); // Use the $grey-color as base
  --grey-color-dark: darken(#828282, 25%); // Use the $grey-color as base
  --grey-color-darker: darken(#828282, 35%); // Use the $grey-color as base
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f2f2f2;
    --dim-text-color: #000000;
    --background-color: #2C2C2C;
    --footer-background-color: #414141;
    --footer-text-color: lighten(#828282, 40%); // Use the $grey-color as base
    --grey-color-light: darken(#828282, 25%); // Use the $grey-color as base
    --grey-color-lighter: darken(#828282, 35%); // Use the $grey-color as base
    --grey-color-dark: lighten(#828282, 40%); // Use the $grey-color as base
    --grey-color-darker: lighten(#828282, 50%); // Use the $grey-color as base
  }
}

// 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.
@import
  "jsblog/base",
  "jsblog/layout",
  "jsblog/syntax-highlighting"
;