// _variables.sass (Enhanced Theme with Primary-Quinary Colors) @use "sass:map" @use "sass:color" @use '../fonts' as fonts $list-padding-left: 1.2em // Color Variables // Colors $primary-color: #1D2526 // Deep navy-gray $secondary-color: #A69F92 // Soft beige-gray $tertiary-color: #734432 // Rich brown $quaternary-color: #BF8069 // Warm peach $quinary-color: #A62E2E // Bold red // Text $text-color: color.adjust($primary-color, $lightness: 50%) // Softer white for text on darker backgrounds $background-color: color.adjust($primary-color, $lightness: -5%) // Slightly darker neutral for overall background $code-text-color: color.adjust($primary-color, $lightness: 70%) // Brightened for readability $code-background-color: $primary-color $code-border-color: color.adjust($primary-color, $lightness: 20%) $note-color: $secondary-color $note-background-color: $primary-color // Subtle contrast for notes $note-border-color: $quinary-color // Matches the bold red accent $blockquote-color: $note-color $blockquote-border-color: $secondary-color // Links, Anchors $anchor-color: color.adjust($tertiary-color, $lightness: 0%) // Slightly brighter brown for links $anchor-hover-color: color.adjust($tertiary-color, $lightness: 20%) // Darkened for hover effect $toc-anchor-color: color.adjust($secondary-color, $lightness: -10%) // Slightly muted peach for TOC links $toc-anchor-hover-color: color.adjust($secondary-color, $lightness: -30%) // Slightly darker peach for hover // Tables $table-color: $text-color $table-header-color: $tertiary-color $table-header-bg: $secondary-color $table-border-color: color.adjust($primary-color, $lightness: 10%) // Darkened navy-gray for borders $default-header-sizes: () $default-header-sizes: map.set($default-header-sizes, h1, 2.5em) $default-header-sizes: map.set($default-header-sizes, h2, 2em) $default-header-sizes: map.set($default-header-sizes, h3, 1.8em) $default-header-sizes: map.set($default-header-sizes, h4, 1.4em) $default-header-sizes: map.set($default-header-sizes, h5, 1.2em) $default-header-sizes: map.set($default-header-sizes, h6, 1.1em) $default-header-colors: () $default-header-colors: map.set($default-header-colors, h1, color.adjust($primary-color, $lightness: 40%)) $default-header-colors: map.set($default-header-colors, h2, $secondary-color) $default-header-colors: map.set($default-header-colors, h3, $tertiary-color) $default-header-colors: map.set($default-header-colors, h4, $quaternary-color) // Initialize empty maps $default-header-margins-sides: () $default-header-margins-vertical: () // Dynamically populate sides map $default-header-margins-sides: map.set($default-header-margins-sides, h1, (left: 0, right: 0)) $default-header-margins-sides: map.set($default-header-margins-sides, h2, (left: 0, right: 0)) $default-header-margins-sides: map.set($default-header-margins-sides, h3, (left: 0, right: 0)) $default-header-margins-sides: map.set($default-header-margins-sides, h4, (left: 0, right: 0)) $default-header-margins-sides: map.set($default-header-margins-sides, h5, (left: 0, right: 0)) $default-header-margins-sides: map.set($default-header-margins-sides, h6, (left: 0, right: 0)) // Dynamically populate vertical map $default-header-margins-vertical: map.set($default-header-margins-vertical, h1, (top: 1em, bottom: 0.5em)) $default-header-margins-vertical: map.set($default-header-margins-vertical, h2, (top: 1em, bottom: 0em)) $default-header-margins-vertical: map.set($default-header-margins-vertical, h3, (top: 0em, bottom: 0.5em)) $default-header-margins-vertical: map.set($default-header-margins-vertical, h4, (top: 0em, bottom: 0.5em)) $default-header-margins-vertical: map.set($default-header-margins-vertical, h5, (top: 1em, bottom: 0.5em)) $default-header-margins-vertical: map.set($default-header-margins-vertical, h6, (top: 1em, bottom: 0.5em)) // Fonts $primary-font: 'Work Sans', sans-serif // Modern sans-serif for secondary content $secondary-font: 'Kanit', sans-serif // Geometric and blocky sans-serif for headers