@use "sass:map"
@use "sass:color"

@use 'fonts'
@use 'variables'
@use 'themes/light' as theme
@use 'mixins'
@use 'tables'


// Base styles
body
  line-height: 1.6
  color: theme.$primary-color
  background-color: theme.$background-color
  padding: 1em
  max-width: 800px
  margin: 0 auto

// Headers
@each $header, $props in theme.$header-styles
  #{$header}
    font-family: theme.$secondary-font
    font-weight: bold
    color: map.get($props, color)
    font-size: map.get($props, size)

    margin-top: 1.5em
    margin-bottom: 0.5em
    line-height: 1.2

    text-transform: capitalize

h3
  text-transform: uppercase


// remember to use toggle!
@include mixins.remove-section-number(h3)
@include mixins.remove-section-number(h4)

p
  margin-bottom: 1em

a
  @include variables.link-primary

a.secondary
  @include variables.link-secondary

a.inverse
  @include variables.link-inverse


ul, ol
  margin-bottom: 1em
  padding-left: 1.5em

li
  margin-bottom: 0.5em

blockquote
  border-left: 4px solid theme.$secondary-color
  padding-left: 1em
  color: theme.$secondary-color
  margin: 1.5em 0

pre, code
  font-family: "Courier New", monospace
  background-color: theme.$code-bg-color
  padding: 0.2em 0.4em
  border-radius: 3px

pre
  padding: 1em
  overflow-x: auto

table
  width: 100%
  border-collapse: collapse
  margin-bottom: 1em

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

th
  //background-color: lighten(theme.$background-color, 10%)
  background-color: color.adjust(theme.$background-color, $lightness: 10%)
  font-weight: bold


div#postamble
  border-top: dashed 1px black
  margin-top: 3em
  padding-top: 1em