@use "sass:map"

// Colors for the theme
$primary-color: #d10094 // Dark pink for headers
$secondary-color: #5b8ee8 // Rich blue for secondary headers
$tertiary-color: #228b22 // Dark green for subheaders
$text-color: #f8f8f2 // Off-white for body text
$background-color: #282a36 // Dark black-gray background

$link-color: #1e90ff // Dodger blue for links
$link-hover-color: #e0006f// Vibrant pink for link hover

$table-header-bg: #44475a // Steely blue for table headers
$table-border-color: #6272a4 // Muted blue-gray for borders
$code-bg-color: #1e1f29 // Very dark blue for code blocks
$code-text-color: #f8f8f2 // Off-white for code text

// Fonts
$primary-font: 'Fira Mono', monospace
$secondary-font: 'Roboto', sans-serif

// Base styles
body
  font-family: $primary-font
  font-size: 16px
  line-height: 1.6
  color: $text-color
  background-color: $background-color
  margin: 0 auto
  max-width: 800px
  padding: 1em

// Headers
h1, h2, h3, h4, h5, h6
  font-family: $secondary-font
  font-weight: bold
  margin-top: 1.5em
  margin-bottom: 0.5em

h1
  font-size: 2.5em
  color: $primary-color

h2
  font-size: 2em
  color: $secondary-color

h3
  font-size: 1.5em
  color: $secondary-color

  a
    font-size: 1em
    text-transform: uppercase

h4, h5, h6
  font-size: 1.2em
  color: lighten($text-color, 10%)

// Links
a
  color: $link-color
  text-decoration: underline
  text-underline-offset: 2px
  &:hover
    color: $link-hover-color

// Paragraphs
p
  margin-bottom: 1em

// Lists
ul, ol
  margin: 1em 0
  padding-left: 1.5em
  list-style-position: inside

ul
  list-style-type: disc

ol
  list-style-type: decimal

li
  margin-bottom: 0.5em

// Blockquotes
blockquote
  border-left: 4px solid $secondary-color
  padding-left: 1em
  color: lighten($text-color, 10%)
  margin: 1.5em 0

// Tables
table
  width: 100%
  border-collapse: collapse
  margin-bottom: 1em
  color: $text-color

th, td
  padding: 0.75em
  text-align: left
  border: 1px solid $table-border-color

th
  background-color: $table-header-bg
  color: $text-color

tr:nth-child(even)
  background-color: lighten($background-color, 5%)

// Code Blocks
pre, code
  background-color: $code-bg-color
  color: $code-text-color
  font-family: $primary-font
  border-radius: 4px
  padding: 0.5em
  display: block
  overflow-x: auto

pre
  padding: 1em

code.inline
  display: inline
  padding: 0.2em 0.4em
  border-radius: 3px

// Postamble
div#postamble
  border-top: 1px dashed $table-border-color
  margin-top: 2em
  padding-top: 1em
  color: lighten($text-color, 20%)
  font-size: 0.9em