// Standard page width
$page-width: 1000px
// Minimum supported page width (forced on html, body)
$min-page-width: 500px

// Small card objects, wrap text or small images on lists
$card-width: 400px
$card-height: 500px

// Consistent spacing for elements
$smallest-spacer: 10px
$small-spacer: 30px
$spacer: 1rem
$large-spacer: $spacer * 1.5
$huge-spacer: $spacer * 3

// Fonts
$body-line-height: 1.5

$huge-font-size: 3em
$large-font-size: 2em
$bigger-font-size: 1em
$body-font-size: 20px

// Consistent border radius
$border-radius: 0.25rem

// Z indexes for consistent ordering across site
$foremost:    100
$above:       30
$front:       20
$foreground:  1
$background:  0
$back:       -1
$far:        -20
$farthest:   -100

// Color palette
$gray-000: #f8f9fa
$gray-100: #f1f3f5
$gray-200: #e9ecef
$gray-300: #dee2e6
$gray-400: #ced4da
$gray-500: #adb5bd
$gray-600: #868e96
$gray-700: #495057
$gray-800: #343a40
$gray-900: #212529

$red: #fa5252
$pink: #e64980
$grape: #be4bdb
$purple: #7950f2
$indigo: #4c6ef5
$blue: #228be6
$cyan: #15aabf
$teal: #12b886
$green: #40c057
$yellow: #fab005
$orange: #fd7e14
$gray: #454545

$blue-300: #74c0fc
$blue-400: #4dabf7
$yellow-100: #fff3bf

// Color Theme

$background-color: #efefef
$background-color-dark: #151515
$alt-background-color: #dfdfdf
$alt-background-color-dark: #111
$foreground-color: $gray-700
$foreground-color-dark: $gray-500
$surface-color: $cyan
$surface-color-dark:  $cyan
$accent-color: $cyan
$accent-color-dark: $cyan

$text-color: #fff
$text-color-dark: #000
$title-text-color: #444
$title-text-color-dark: #ddd

\:root
  --background-color: #{$background-color}
  --alt-background-color: #{$alt-background-color}
  --foreground-color: #{$foreground-color}


  --body-font: -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"

  --text-color: #{$text-color}
  --title-text-color: #{$title-text-color}

  --link-color: #{$blue}
  --link-hover-color: #1c7ed6
  --prose-link-color: #{$gray-800}
  --prose-link-hover-color: #{$gray-500}
  --prose-link-shadow-color: #{$gray-000}

  --highlight-color: #fff

  --heading-color: #{$gray-900}
  --border-color: #{$gray-300}

  // --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

@media (prefers-color-scheme:dark)
  \:root
    --background-color: #{$background-color-dark}
    --alt-background-color: #{$alt-background-color-dark}
    --foreground-color: #{$foreground-color-dark}

    --text-color: #{$text-color-dark}
    --title-text-color: #{$title-text-color-dark}

    --prose-link-color: #fff
    --prose-link-hover-color: #{$gray-200}
    --prose-link-shadow-color: #{$gray-500}

    --highlight-color: #{$gray-800}

    --heading-color: #fff

    --link-color: #{$blue-300}
    --link-hover-color: #{$blue-400}

    --border-color: rgba(255, 255, 255, 0.15)