diff --git a/css/base.css b/css/base.css
index 0647d5d..c3e9c63 100644
--- a/css/base.css
+++ b/css/base.css
@@ -234,11 +234,6 @@
     height: 0.5em;
     background: var(--color-light-link);
     border-radius: 50%;
-    transition: transform var(--duration-fast) var(--ease-bounce);
-  }
-
-  ul li:hover::before {
-    transform: scale(1.3);
   }
 
   ul ol,
@@ -295,7 +290,7 @@
   blockquote::before {
     content: '"';
     position: absolute;
-    left: var(--space-md);
+    left: 1.7rem;
     top: 50%;
     transform: translateY(-50%);
     font-size: 2.5em;
diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index 983fb1f..f26f825 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -33,10 +33,10 @@
 
 /* Modern Dark Header with glassmorphism */
 .dark .site-header {
-  background: #0a0a0a;
+  background: var(--color-dark-header-bg);
   backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%);
   -webkit-backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%);
-  border-bottom-color: rgba(51, 65, 85, 0.3);
+  border-bottom-color: var(--color-dark-header-footer-border);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
               0 2px 4px -1px rgba(0, 0, 0, 0.2);
 }
@@ -62,16 +62,16 @@
 }
 
 .dark .site-header__navigation a::after {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
 }
 
 .dark .site-header__navigation a:hover {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .site-header__navigation a[aria-current='page'],
 .dark .site-header__navigation a.active {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 /* Mobile hamburger icon dark mode */
@@ -80,13 +80,13 @@
 }
 
 .dark .site-header__mobile-menu .hamburger-icon:hover {
-  background: rgba(99, 102, 241, 0.15);
+  background: rgba(191, 164, 255, 0.15);
 }
 
 /* Mobile navigation overlay dark */
 @media (max-width: 1039px) {
   .dark .mobile-menu-overlay {
-    background: #0a0a0a;
+    background: var(--color-dark-header-bg);
     backdrop-filter: blur(var(--backdrop-blur-lg));
     -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
   }
@@ -99,8 +99,8 @@
 
   .dark .mobile-menu-nav a:hover,
   .dark .mobile-menu-nav a:active {
-    background: var(--color-light-text-accent);
-    border-color: var(--color-light-text-accent);
+    background: var(--color-dark-text-accent);
+    border-color: var(--color-dark-text-accent);
     color: var(--color-dark-bg);
   }
 
@@ -112,8 +112,8 @@
 
   .dark .mobile-menu-link:hover,
   .dark .mobile-menu-link:active {
-    background: var(--color-light-text-accent);
-    border-color: var(--color-light-text-accent);
+    background: var(--color-dark-text-accent);
+    border-color: var(--color-dark-text-accent);
     color: var(--color-dark-bg);
   }
 
@@ -128,8 +128,8 @@
   }
 
   .dark .mobile-dark-mode-toggle:hover {
-    background: rgba(56, 189, 248, 0.15);
-    border-color: var(--color-light-text-accent);
+    background: rgba(191, 164, 255, 0.15);
+    border-color: var(--color-dark-text-accent);
   }
 
   .dark .mobile-menu-toggle span {
@@ -137,7 +137,7 @@
   }
 
   .dark .mobile-menu-toggle:hover {
-    background: rgba(56, 189, 248, 0.15);
+    background: rgba(191, 164, 255, 0.15);
   }
 }
 
@@ -199,8 +199,8 @@
 
 .dark .site-header__link:hover,
 .dark .dark-mode-toggle:hover {
-  color: var(--color-light-text-accent);
-  background: rgba(56, 189, 248, 0.15);
+  color: var(--color-dark-text-accent);
+  background: rgba(191, 164, 255, 0.15);
 }
 
 /* Dark typography */
@@ -218,24 +218,24 @@
 }
 
 .dark a {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark a:hover {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark a:not([class])::after {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
 }
 
 /* Dark lists */
 .dark ul li::before {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
 }
 
 .dark ol li:before {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 /* Dark images - no animations */
@@ -279,7 +279,7 @@
 .dark p code,
 .dark li code {
   background-color: var(--color-dark-code-inline-bg);
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
   border-color: var(--color-dark-border);
 }
 
@@ -291,7 +291,7 @@
 .dark th {
   background: var(--color-dark-bg-secondary);
   color: var(--color-dark-text-primary);
-  border-bottom-color: var(--color-light-text-accent);
+  border-bottom-color: var(--color-dark-text-accent);
 }
 
 .dark td {
@@ -348,7 +348,7 @@
 
 .dark .sidebar-toggle:hover {
   background: var(--color-dark-surface-hover);
-  border-color: var(--color-light-link);
+  border-color: var(--color-dark-text-accent);
 }
 
 /* Dark mode for sidebar accordion open state */
@@ -382,22 +382,27 @@
 
 /* Dark mode solution toggle */
 .dark .solution label {
-  background: var(--color-light-text-accent);
-  color: var(--color-dark-bg);
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
 }
 
 .dark .solution label:hover {
-  background: var(--color-light-link);
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .solution input[type="checkbox"]:checked ~ label {
-  background: var(--color-light-link);
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
 }
 
 /* Dark mode navigation */
 .dark .site-navigation__entry a:hover {
   background: var(--color-dark-surface-hover);
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .site-navigation__entry.active a {
@@ -415,7 +420,7 @@
 }
 
 .dark .post-list li a:hover h2 {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .post-list li a .meta {
@@ -435,14 +440,14 @@
 
 .dark .pagination a:hover {
   background: var(--color-dark-surface-hover);
-  border-color: var(--color-light-text-accent);
-  color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .pagination a.active {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
-  border-color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
 }
 
 /* Dark mode blog tags */
@@ -454,8 +459,8 @@
 
 .dark .blog-tag:hover {
   background: var(--color-dark-surface-hover);
-  border-color: var(--color-light-text-accent);
-  color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 /* Dark API Index Pills */
@@ -464,40 +469,40 @@
 }
 
 .dark .api-namespace-title {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .api-namespace-toggle-text {
-  color: #0ea5e9;
+  color: #bfa4ff;
   opacity: 0.8;
 }
 
 .dark .api-namespace-toggle:hover .api-namespace-toggle-text {
   opacity: 1;
-  color: #3ca5e9;
+  color: #c2acf5;
 }
 
 /* When hovering over collapsed area in dark mode */
 .dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
 .dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
   opacity: 1;
-  color: #3ca5e9;
+  color: #c2acf5;
 }
 
 .dark .api-namespace-icon {
-  color: #0ea5e9;
+  color: #bfa4ff;
   opacity: 0.8;
 }
 
 .dark .api-namespace-toggle:hover .api-namespace-icon {
   opacity: 1;
-  color: #3ca5e9;
+  color: #c2acf5;
 }
 
 /* When hovering over collapsed area in dark mode */
 .dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
   opacity: 1;
-  color: #3ca5e9;
+  color: #c2acf5;
 }
 
 .dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
@@ -506,17 +511,11 @@
     var(--color-dark-bg) 100%);
 }
 
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
-  background: linear-gradient(to bottom,
-    rgba(255, 255, 255, 0.02) 0%,
-    rgba(255, 255, 255, 0.04) 50%,
-    rgba(255, 255, 255, 0.05) 100%);
-}
-
 .dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
-  box-shadow: var(--shadow-dark-lg);
+  border: 1px solid var(--color-dark-text-accent);
+  box-shadow: none;
 }
 
 .dark .api-index__entry > ul a {
@@ -527,9 +526,9 @@
 }
 
 .dark .api-index__entry > ul a:hover {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
-  border-color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
   box-shadow: var(--shadow-dark-md);
 }
 
@@ -538,12 +537,12 @@
 }
 
 .dark .page-toc a:hover {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
   background: var(--color-dark-surface-hover);
 }
 
 .dark .page-toc a.active {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
   background: var(--color-dark-surface-hover);
 }
 
@@ -557,20 +556,20 @@
 .dark .related-container .link {
   background: var(--color-dark-surface);
   border-color: var(--color-dark-border);
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .related-container .link:hover {
-  border-color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
   background: var(--color-dark-surface-hover);
 }
 
 .dark .related-container .link .link-title {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .related-container .link > span:not(.link-title) {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 /* Dark card */
@@ -582,13 +581,13 @@
 
 .dark .card:hover {
   box-shadow: var(--shadow-dark-lg);
-  border-color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
 }
 
 /* Dark badges */
 .dark .badge-primary {
-  background: rgba(56, 189, 248, 0.2);
-  color: var(--color-light-text-accent);
+  background: rgba(191, 164, 255, 0.2);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .badge-success {
@@ -608,24 +607,24 @@
 
 /* Dark buttons */
 .dark .btn-primary {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
   box-shadow: var(--shadow-dark-sm);
 }
 
 .dark .btn-primary:hover {
-  background: var(--color-light-text-accent);
+  background: #c2acf5;
   box-shadow: var(--shadow-dark-md);
 }
 
 .dark .btn-secondary {
   background: var(--color-dark-surface);
-  color: var(--color-light-text-accent);
-  border-color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
+  border-color: var(--color-dark-text-accent);
 }
 
 .dark .btn-secondary:hover {
-  background: rgba(56, 189, 248, 0.15);
+  background: rgba(191, 164, 255, 0.15);
 }
 
 /* Dark back to top button */
@@ -634,15 +633,13 @@
   background: var(--color-dark-surface);
   color: var(--color-dark-text-primary);
   border: 1px solid var(--color-dark-border);
-  box-shadow: var(--shadow-dark-lg);
 }
 
 .dark .back-to-top-button:hover,
 .dark #back-to-top-button:hover {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
-  box-shadow: var(--shadow-dark-xl);
-  border-color: var(--color-light-text-accent);
+  border-color: var(--color-dark-text-accent);
 }
 
 /* Dark search results */
@@ -666,27 +663,27 @@
 }
 
 .dark .result-type-badge--api {
-  background: rgba(99, 102, 241, 0.3);
-  color: #b0b3ff;
-  border: 1px solid rgba(99, 102, 241, 0.5);
+  background: rgba(191, 164, 255, 0.3);
+  color: #bfa4ff;
+  border: 1px solid rgba(191, 164, 255, 0.5);
 }
 
 .dark .result-type-badge--docs {
-  background: rgba(14, 165, 233, 0.3);
-  color: #7dd3fc;
-  border: 1px solid rgba(14, 165, 233, 0.5);
+  background: rgba(191, 164, 255, 0.3);
+  color: #bfa4ff;
+  border: 1px solid rgba(191, 164, 255, 0.5);
 }
 
 .dark .search-results__item .fn-name {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .search-results__item .fn-signature {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .search-results__item strong {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .search-results__item .title {
@@ -698,14 +695,14 @@
 }
 
 .dark .search-results__item mark {
-  background: rgba(56, 189, 248, 0.3);
-  color: var(--color-light-text-accent);
+  background: rgba(191, 164, 255, 0.3);
+  color: var(--color-dark-text-accent);
 }
 
 /* Dark footer */
 .dark .site-footer {
-  background: var(--color-dark-bg-secondary);
-  border-top-color: var(--color-dark-border);
+  background: var(--color-dark-header-bg);
+  border-top-color: var(--color-dark-header-footer-border);
 }
 
 .dark .footer-logo .phel-logo {
@@ -727,8 +724,8 @@
 }
 
 .dark .footer-social a:hover {
-  background: var(--color-light-text-accent);
-  border-color: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
+  border-color: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
 }
 
@@ -741,7 +738,7 @@
 }
 
 .dark .footer-column ul li a:hover {
-  color: var(--color-light-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 .dark .footer-bottom {
@@ -761,21 +758,21 @@
 }
 
 .dark .footer-badge-version {
-  background: var(--color-light-text-accent);
+  background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
 }
 
 /* Dark focus states */
 .dark a:focus-visible,
 .dark button:focus-visible {
-  outline-color: var(--color-light-text-accent);
+  outline-color: var(--color-dark-text-accent);
 }
 
 /* Dark selection */
 .dark ::selection {
-  background: rgba(56, 189, 248, 0.3);
+  background: rgba(191, 164, 255, 0.3);
 }
 
 .dark ::-moz-selection {
-  background: rgba(56, 189, 248, 0.3);
+  background: rgba(191, 164, 255, 0.3);
 }
diff --git a/css/components/documentation.css b/css/components/documentation.css
index 8a708ce..47a404d 100644
--- a/css/components/documentation.css
+++ b/css/components/documentation.css
@@ -126,8 +126,6 @@
   text-decoration: none;
   border-radius: var(--radius-sm);
   transition: all var(--duration-fast) var(--ease-out);
-  border-left: 2px solid transparent;
-  padding-left: var(--space-md);
 }
 
 .page-toc a::after {
@@ -143,7 +141,6 @@
   color: var(--color-light-link);
   font-weight: 600;
   background: var(--color-light-surface-hover);
-  border-left-color: var(--color-light-link);
 }
 
 .page-toc ul ul {
@@ -335,10 +332,6 @@
 /* Make entire collapsed area clickable */
 .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
   cursor: pointer;
-  background: linear-gradient(to bottom,
-    rgba(0, 0, 0, 0.01) 0%,
-    rgba(0, 0, 0, 0.03) 50%,
-    rgba(0, 0, 0, 0.04) 100%);
   border-radius: var(--radius-lg);
   width: calc(100% + var(--space-md) * 2);
 }
@@ -355,7 +348,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 60px;
+  height: 120px;
   background: linear-gradient(to bottom, 
     transparent 0%, 
     var(--color-light-bg) 100%);
@@ -373,26 +366,23 @@
 .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
   content: 'Expand';
   position: absolute;
-  top: 75%;
+  top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #0982b8;
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--color-light-link);
   color: white;
-  padding: var(--space-xs) var(--space-xl);
-  border-radius: var(--radius-full);
+  border: 1px solid var(--color-light-link);
+  border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   font-weight: 600;
-  box-shadow: var(--shadow-lg);
-  opacity: 0;
+  box-shadow: none;
+  opacity: 0.8;
   pointer-events: none;
   transition: opacity var(--duration-normal) var(--ease-in);
   z-index: 10;
 }
 
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover::before {
-  opacity: 1;
-}
-
 /* Expanded state - show all */
 .api-namespace-toggle[aria-expanded="true"] + .api-namespace-content {
   max-height: 5000px;
@@ -419,7 +409,7 @@
   font-size: var(--text-sm);
   font-weight: 500;
   border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-lg);
   text-decoration: none;
   transition: all var(--duration-fast) var(--ease-out);
   box-shadow: var(--shadow-xs);
@@ -467,10 +457,13 @@
 }
 
 .solution label {
-  display: inline-block;
-  padding: var(--space-xs) var(--space-lg);
-  background: var(--color-light-link);
-  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-light-surface);
+  color: var(--color-light-link);
+  border: 1px solid var(--color-light-border);
   border-radius: var(--radius-md);
   cursor: pointer;
   font-size: var(--text-sm);
@@ -480,7 +473,8 @@
 }
 
 .solution label:hover {
-  background: var(--color-light-text-accent);
+  border-color: var(--color-light-link);
+  background: var(--color-light-surface-hover);
 }
 
 /* Hide solution content by default */
@@ -498,12 +492,14 @@
 }
 
 .solution input[type="checkbox"]:checked ~ label {
-  display: inline-block;
-  background: var(--color-light-text-accent);
+  display: inline-flex;
+  background: var(--color-light-link);
+  color: white;
+  border-color: var(--color-light-link);
 }
 
 .solution input[type="checkbox"]:checked ~ label::before {
-  content: '↓ Hide solution';
+  content: '← Hide solution';
 }
 
 .solution input[type="checkbox"]:not(:checked) ~ label::before {
@@ -708,7 +704,7 @@ h6:hover .zola-anchor {
 }
 
 .breadcrumbs span:not(:last-child)::after {
-  content: '›';
+  content: '→';
   margin-left: var(--space-sm);
   color: var(--color-gray-light);
 }
diff --git a/css/components/footer.css b/css/components/footer.css
index 6927124..c4a9ccf 100644
--- a/css/components/footer.css
+++ b/css/components/footer.css
@@ -76,9 +76,14 @@
   background: var(--color-light-surface);
   border: 1px solid var(--color-light-border);
   color: var(--color-light-text-primary);
+  text-decoration: none;
   transition: all var(--duration-fast) var(--ease-out);
 }
 
+.footer-social a::after {
+  display: none;
+}
+
 .footer-social a:hover {
   background: var(--color-light-link);
   border-color: var(--color-light-link);
diff --git a/css/components/layout.css b/css/components/layout.css
index 182fafb..8ca6aa7 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -202,17 +202,20 @@
 }
 
 .related-container .link {
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--space-sm);
+  min-width: 40px;
+  height: 40px;
   padding: var(--space-sm) var(--space-md);
   background: var(--color-light-surface);
+  color: var(--color-light-link);
   border: 1px solid var(--color-light-border);
   border-radius: var(--radius-md);
-  transition: all var(--duration-fast) var(--ease-out);
-  text-decoration: none;
-  color: var(--color-light-link);
   font-weight: 600;
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out);
 }
 
 .related-container .link:hover {
@@ -226,25 +229,23 @@
 
 .related-container .link .link-title {
   flex: 1;
-  color: var(--color-light-link);
 }
 
 .related-container .link > span:not(.link-title) {
-  color: var(--color-light-link);
   flex-shrink: 0;
 }
 
-/* Back to Top Button - Modern floating action */
+/* Back to Top Button */
 @utility back-to-top-button {
   position: fixed;
   bottom: var(--space-2xl);
   right: var(--space-xl);
-  width: 56px;
+  padding: 0 var(--space-md);
   height: 48px;
   background: var(--color-light-link);
   color: white;
   border: none;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-lg);
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
diff --git a/css/components/navigation.css b/css/components/navigation.css
index a574d49..b9a8602 100644
--- a/css/components/navigation.css
+++ b/css/components/navigation.css
@@ -29,6 +29,7 @@
   font-size: var(--text-sm);
   font-weight: 700;
   color: var(--color-light-text-primary);
+  margin: 0 0 var(--space-md) 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -77,13 +78,11 @@
 .site-navigation__entry a:hover {
   color: var(--color-light-link);
   background: var(--color-light-surface-hover);
-  transform: translateX(4px);
 }
 
 .site-navigation__entry.active a {
   color: var(--color-light-link);
   background: var(--color-light-surface-hover);
   font-weight: 600;
-  padding-left: calc(var(--space-md) - 3px);
 }
 
diff --git a/css/theme.css b/css/theme.css
index 0168bc5..e45d430 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -17,29 +17,29 @@
   --color-light-border-subtle: #f1f5f9;
   
   /* Modern Color Palette - Dark Mode */
-  --color-dark-bg: #1e1e1e;
+  --color-dark-bg: #212830;
   --color-dark-bg-secondary: #252525;
   --color-dark-text-primary: #f1f5f9;
   --color-dark-text-secondary: #cbd5e1;
   --color-dark-text-muted: #94a3b8;
-  --color-dark-text-accent: #38bdf8;
-  --color-dark-link: #818cf8;
+  --color-dark-text-accent: #bfa4ff;
+  --color-dark-link: #bfa4ff;
   --color-dark-border: #3a3a3a;
   --color-dark-border-subtle: #2a2a2a;
-  --color-dark-header-footer-border: #2a2a2a;
-  --color-dark-header-bg: #161616;
+  --color-dark-header-footer-border: #151a24;
+  --color-dark-header-bg: #151a24;
   
   /* Card & Surface Colors */
   --color-light-surface: #ffffff;
   --color-light-surface-hover: #f8fafc;
-  --color-dark-surface: #252525;
-  --color-dark-surface-hover: #2f2f2f;
+  --color-dark-surface: #2a313c;
+  --color-dark-surface-hover: #262c36;
   
   /* Code & Catalogue */
   --color-light-code-bg: #f1f5f9;
   --color-light-code-inline-bg: #e2e8f0;
-  --color-dark-code-bg: #252525;
-  --color-dark-code-inline-bg: #2f2f2f;
+  --color-dark-code-bg: #262c36;
+  --color-dark-code-inline-bg: #2f3741;
   
   /* Anchor Links */
   --color-light-anchor: #bbb;
@@ -48,7 +48,7 @@
   /* Blockquote */
   --color-light-blockquote-bg: #eff6ff;
   --color-light-blockquote-border: #afc4e7;
-  --color-dark-blockquote-bg: rgba(255, 255, 255, 0.05);
+  --color-dark-blockquote-bg: #2a313c;
   --color-dark-blockquote-border: #466173;
   
 
diff --git a/templates/blog-entry.html b/templates/blog-entry.html
index bf6f4bd..00e3eb5 100644
--- a/templates/blog-entry.html
+++ b/templates/blog-entry.html
@@ -15,7 +15,7 @@ <h1>{{page.title}}</h1>
     <div class="related-container">
       {% if page.lower %}
       <a href="{{ page.lower.permalink }}" class="link link-previous">
-        <span>&larr;</span>
+        <span>←</span>
         <span class="link-title">{{ page.lower.title }}</span>
       </a>
       {% endif %}
@@ -23,7 +23,7 @@ <h1>{{page.title}}</h1>
       {% if page.higher %}
       <a href="{{ page.higher.permalink }}" class="link link-next">
         <span class="link-title">{{ page.higher.title }}</span>
-        <span>&rarr;</span>
+        <span>→</span>
       </a>
       {% endif %}
     </div>
diff --git a/templates/blog.html b/templates/blog.html
index 35b8866..1fc7261 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -16,11 +16,11 @@ <h1>Blog</h1>
     {% endfor %}
 </ul>
 <div class="pagination">
-    {% if paginator.previous %}
-        <a class="previous" href="{{ paginator.previous }}">‹ Newer posts</a>
-    {% endif %}
-    {% if paginator.next %}
-        <a class="next" href="{{ paginator.next }}">Older posts ›</a>
-    {% endif %}
+      {% if paginator.previous %}
+        <a class="previous" href="{{ paginator.previous }}">← Newer posts</a>
+      {% endif %}
+      {% if paginator.next %}
+        <a class="next" href="{{ paginator.next }}">Older posts →</a>
+      {% endif %}
 </div>
 {% endblock content %}
diff --git a/templates/shortcodes/solution.html b/templates/shortcodes/solution.html
index f333cd0..943e0b1 100644
--- a/templates/shortcodes/solution.html
+++ b/templates/shortcodes/solution.html
@@ -1,5 +1,5 @@
 <div class="solution">
     <input type="checkbox" style="display: none" id="cb{{ nth }}">
-    <label for="cb{{ nth }}">&rarr; Show solution</label>
+    <label for="cb{{ nth }}">→ Show solution</label>
     {{ body | markdown | safe }}
 </div>