@use "sass:map"

// Color Variables for Darker Theme
$primary-color: #d10094 // Dark pink for headers
$secondary-color: #5b8ee8 // Rich deep blue for secondary headers
$tertiary-color: #228b22 // Dark green for subheaders
$quaternary-color: #bd93f9 // Soft purple for smaller headers

$link-color-primary: #6272a4 // Muted blue for primary links
$link-color-secondary: #ff5555 // Bold pinkish-red for secondary links
$background-color: #282a36 // Rich black-gray background
$text-color: #f8f8f2 // Off-white text for high contrast
$table-header-bg: #44475a // Dark steely blue for table headers
$table-border-color: #6272a4 // Soft blue-gray for table borders

// Inverse Link Colors
$inverse-link-color: #44475a // Darker gray for inverse links
$inverse-link-hover-color: #f8f8f2 // Off-white for inverse link hover

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

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

// Code Block Colors
$code-bg-color: #1e1f29 // Very dark blue for code background
$code-font-color: #f8f8f2 // Off-white for code text
$code-keyword-color: #ff79c6 // Vibrant pink for keywords
$code-string-color: #50fa7b // Neon green for strings
$code-variable-color: #8be9fd // Light cyan for variables
$code-border-radius: 4px