@use "sass:map"

// Color Variables
$primary-color: #c0392b // Darker red for main headers
$secondary-color: #2c3e50 // Darker navy blue for headers
$tertiary-color: #27ae60 // Darker green for subheaders
$quaternary-color: #7d3c98 // Darker purple for smaller headers
$link-color-primary: #d35400 // Darker and more saturated orange for primary links
$link-color-secondary: #1f618d // Darker and more saturated blue for secondary links
$background-color: #e5e5e5 // Slightly darker background
$text-color: #2c3e50 // Darker text color for better contrast
$table-header-bg: #b9770e // Even darker shade of orange for table headers
$table-border-color: #aaa // Darker border color

// Header Sizes and Colors Map
$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
$header-styles: map.set($header-styles, h2, (size: 1.75em, color: $secondary-color, border-size: 2px))
$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))

// Font Variables
$body-font: 'Fira Mono', monospace
$header-font: 'Roboto', sans-serif

// Table Style Variables
$table-padding: 10px
$code-bg-color: #d3d3d3 // Darker code background color
$code-font-color: $text-color
$code-border-radius: 5px
$list-padding-left: 20px

// Link Style Mixins
@mixin link-primary
  color: $link-color-primary
  text-decoration: none

  &:hover
    color: darken($link-color-primary, 10%)
    text-decoration: underline

@mixin link-secondary
  color: $link-color-secondary
  text-decoration: underline

  &:hover
    color: lighten($link-color-secondary, 10%)

@mixin link-inverse
  color: white
  background-color: $link-color-primary
  padding: 2px 4px
  text-decoration: none
  border-radius: 3px

  &:hover
    background-color: darken($link-color-primary, 10%)
    color: white