@use "sass:map"

// Color Variables for Dark Theme (Updated)
$primary-color: #f39c12 // Vibrant yellow for headers (contrast with dark background)
$secondary-color: #e74c3c
$tertiary-color: #1abc9c // Bright green for subheaders
$quaternary-color: #8e44ad // Deep violet for smaller headers
$link-color-primary: #e67e22 // Bright orange for primary links
$link-color-secondary: #2980b9 // Bright blue for secondary links
$background-color: #2c3e50 // Dark navy background
$text-color: #ffffff // Pure white text for strong contrast
$table-header-bg: #3b4a5a // Muted steel blue for table headers
$table-border-color: #7f8c8d // Soft cool gray border

// Inverse Link Colors
$inverse-link-color: #2c3e50 // Dark background for inverse links
$inverse-link-hover-color: #ecf0f1 // Light text color for inverse link hover

// Font Variables
$primary-font: 'fira-mono'
$secondary-font: 'roboto'

// 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.7em, 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))

// Code Block Background
$code-bg-color: #3d5a6e // Muted navy for code blocks
$code-font-color: $text-color