// 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-text-color: #ffffff !default;
$site-header-text-color-visited: darken(#828282, 25%); // --grey-color-dark in light mode
$site-title-font-size: 32px !default;
$site-title-small-font-size: 25px !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: 21px !default;
$lead-small-font-size: 19px !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;
$grey-color-light: lighten(#828282, 40%); // Use the $grey-color as base
$grey-color-lighter: lighten(#828282, 45%); // Use the $grey-color as base
$grey-color-dark: darken(#828282, 25%); // Use the $grey-color as base
$grey-color-darker: darken(#828282, 30%); // Use the $grey-color as base
$dm-grey-color-light: darken(#828282, 25%); // Use the $grey-color as base
$dm-grey-color-lighter: darken(#828282, 30%); // Use the $grey-color as base
$dm-grey-color-dark: lighten(#828282, 40%); // Use the $grey-color as base
$dm-grey-color-darker: lighten(#828282, 45%); // Use the $grey-color as base

$link-hover-opacity: .65 !default;

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

// Variables that change with dark mode
:root {
  --link-color: #0070c9;
  --link-visited-color: #0059a0;
  --text-color: #333333;
  --dim-text-color: #ffffff;
  --background-color: #ffffff;

  --grey-color-light: #{$grey-color-light};
  --grey-color-lighter: #{$grey-color-lighter};
  --grey-color-dark: #{$grey-color-dark};
  --grey-color-darker: #{$grey-color-darker};

  --content-width: 750px; // Original 980px
  --header-content-width: 1080px;

  --header-background-color: #2C2C2C;
  --footer-background-color: #f2f2f2;
  --footer-text-color: ${$grey-color};
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: #328cd3;
    --link-visited-color: #2870a8;
    --text-color: #f2f2f2;
    --dim-text-color: #000000;
    --background-color: #2C2C2C;

    --grey-color-light: #{$dm-grey-color-light};
    --grey-color-lighter: #{$dm-grey-color-lighter};
    --grey-color-dark: #{$dm-grey-color-dark};
    --grey-color-darker: #{$dm-grey-color-darker};

    --header-background-color: #161616;
    --footer-background-color: #414141;
    --footer-text-color: lighten(#828282, 40%); // 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"
;