From 8ad503f96df8df6d8496499e18adb6c7c9f2b672 Mon Sep 17 00:00:00 2001
From: JesusValera <jesus1902@outlook.com>
Date: Sat, 4 Oct 2025 21:11:25 +0200
Subject: [PATCH 1/4] Simplify dark-mode.css file

---
 css/components/blog.css          |  69 +++
 css/components/code-block.css    |  26 ++
 css/components/dark-mode.css     | 725 +------------------------------
 css/components/documentation.css |  93 ++++
 css/components/features.css      |  81 ++++
 css/components/footer.css        |  66 +++
 css/components/header.css        | 123 ++++++
 css/components/layout.css        |  96 ++++
 css/components/navigation.css    |  44 ++
 css/components/search.css        | 105 +++++
 templates/blog.html              |   2 +-
 11 files changed, 709 insertions(+), 721 deletions(-)

diff --git a/css/components/blog.css b/css/components/blog.css
index 21f0fa8..da8f367 100644
--- a/css/components/blog.css
+++ b/css/components/blog.css
@@ -1,3 +1,10 @@
+/* Blog intro text */
+.blog-intro {
+  font-size: var(--text-lg);
+  color: var(--color-light-text-secondary);
+  margin-bottom: var(--space-2xl);
+}
+
 /* Blog post list */
 @utility post-list {
   list-style: none;
@@ -95,3 +102,65 @@
 /*.post-list li.featured a::before {*/
 /*  transform: scaleY(1);*/
 /*}*/
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .blog-intro {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .post-list li a {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .post-list li a::after {
+  background: var(--color-dark-text-accent);
+}
+
+.dark .post-list li a h2 {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .post-list li a:hover h2 {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .post-list li a .meta {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .post-list li a .excerpt {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .pagination a {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .pagination a:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .pagination a.active {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+}
+
+.dark .blog-tag {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .blog-tag:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
+}
diff --git a/css/components/code-block.css b/css/components/code-block.css
index 9d5008f..4926b6b 100644
--- a/css/components/code-block.css
+++ b/css/components/code-block.css
@@ -59,3 +59,29 @@
   stroke: white;
 }
 
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .copy-code-button {
+  background-color: rgba(42, 49, 60, 0.95);
+  border-color: #475569;
+}
+
+.dark .copy-code-button svg {
+  stroke: #cbd5e1;
+}
+
+.dark .copy-code-button:hover {
+  background-color: #2f3741;
+}
+
+.dark .copy-code-button.copied {
+  background-color: var(--color-dark-text-accent);
+  border-color: var(--color-dark-text-accent);
+}
+
+.dark .copy-code-button.copied svg {
+  stroke: white;
+}
+
diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index e25fc41..995913c 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -1,3 +1,7 @@
+/* ============================================
+   DARK MODE - Global Styles
+   ============================================ */
+
 @media (prefers-color-scheme: dark) {
   :root {
     --color-bg: var(--color-dark-bg);
@@ -31,177 +35,6 @@
   background-color: var(--color-dark-bg);
 }
 
-/* Modern Dark Header with glassmorphism */
-.dark .site-header {
-  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: 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);
-}
-
-.dark .site-header.scrolled {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-/* Dark logo styling */
-.dark .site-header__logo .phel-logo {
-  stroke: var(--color-dark-text-primary);
-  filter: drop-shadow(0 2px 4px rgba(241, 245, 249, 0.1));
-}
-
-.dark .site-header__logo .logo-text {
-  color: var(--color-dark-text-primary);
-}
-
-
-/* Dark navigation */
-.dark .site-header__navigation a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .site-header__navigation a::after {
-  background: var(--color-dark-text-accent);
-}
-
-.dark .site-header__navigation a:hover {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .site-header__navigation li.active a {
-  color: var(--color-dark-text-accent);
-}
-
-/* Mobile hamburger icon dark mode */
-.dark .site-header__mobile-menu .hamburger-icon span {
-  background: var(--color-dark-text-primary);
-}
-
-.dark .site-header__mobile-menu .hamburger-icon:hover {
-  background: rgba(191, 164, 255, 0.15);
-}
-
-/* Mobile navigation overlay dark */
-@media (max-width: 1039px) {
-  .dark .mobile-menu-overlay {
-    background: var(--color-dark-header-bg);
-    backdrop-filter: blur(var(--backdrop-blur-lg));
-    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
-  }
-
-  .dark .mobile-menu-nav a {
-    background: var(--color-dark-surface);
-    border-color: var(--color-dark-border);
-    color: var(--color-dark-text-primary);
-  }
-
-  .dark .mobile-menu-nav a:hover,
-  .dark .mobile-menu-nav a:active {
-    background: var(--color-dark-text-accent);
-    border-color: var(--color-dark-text-accent);
-    color: var(--color-dark-bg);
-  }
-
-  .dark .mobile-menu-link {
-    background: var(--color-dark-surface);
-    border-color: var(--color-dark-border);
-    color: var(--color-dark-text-primary);
-  }
-
-  .dark .mobile-menu-link:hover,
-  .dark .mobile-menu-link:active {
-    background: var(--color-dark-text-accent);
-    border-color: var(--color-dark-text-accent);
-    color: var(--color-dark-bg);
-  }
-
-  .dark .mobile-menu-actions {
-    border-top-color: var(--color-dark-border);
-  }
-
-  .dark .mobile-dark-mode-toggle {
-    background: var(--color-dark-surface);
-    border-color: var(--color-dark-border);
-    color: var(--color-dark-text-primary);
-  }
-
-  .dark .mobile-dark-mode-toggle:hover {
-    background: rgba(191, 164, 255, 0.15);
-    border-color: var(--color-dark-text-accent);
-  }
-
-  .dark .mobile-menu-toggle span {
-    background: var(--color-dark-text-primary);
-  }
-
-  .dark .mobile-menu-toggle:hover {
-    background: rgba(191, 164, 255, 0.15);
-  }
-}
-
-/* Dark search input with modern styling */
-.dark #search {
-  background-color: var(--color-dark-bg-secondary);
-  color: var(--color-dark-text-primary);
-  border-color: #3a3a3a;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
-}
-
-.dark #search:hover {
-  border-color: #4a4a4a;
-  box-shadow: var(--shadow-dark-sm);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
-}
-
-.dark #search:focus {
-  border-color: #5a5a5a;
-  background-color: var(--color-dark-surface);
-  box-shadow: 0 0 0 3px rgba(90, 90, 90, 0.3),
-              var(--shadow-dark-sm);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
-}
-
-.dark #search::placeholder {
-  color: var(--color-dark-text-muted);
-}
-
-/* Dark mode clear button */
-.dark #search::-webkit-search-cancel-button {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
-  opacity: 0.8;
-}
-
-.dark #search::-webkit-search-cancel-button:hover {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
-  opacity: 1;
-}
-
-/* Dark search results scrollbar */
-.dark .search-results::-webkit-scrollbar-thumb {
-  background: var(--color-dark-border);
-}
-
-.dark .search-results::-webkit-scrollbar-thumb:hover {
-  background: var(--color-dark-border-subtle);
-}
-
-/* Dark action buttons */
-.dark .site-header__actions {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .site-header__link,
-.dark .dark-mode-toggle {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .site-header__link:hover,
-.dark .dark-mode-toggle:hover {
-  color: var(--color-dark-text-accent);
-  background: rgba(191, 164, 255, 0.15);
-}
-
 /* Dark typography */
 .dark h1,
 .dark h2,
@@ -237,7 +70,7 @@
   color: var(--color-dark-text-accent);
 }
 
-/* Dark images - no animations */
+/* Dark images */
 .dark img {
   opacity: 1;
 }
@@ -323,450 +156,6 @@
   background: transparent;
 }
 
-@media (min-width: 1040px) {
-  .dark .two-column-layout__sidebar {
-    background: var(--color-dark-surface);
-    border-color: var(--color-dark-border);
-    box-shadow: var(--shadow-dark-sm);
-  }
-}
-
-@media (max-width: 1039px) {
-  .dark .two-column-layout__sidebar {
-    background: transparent;
-    border-bottom-color: var(--color-dark-border);
-  }
-}
-
-/* Dark mode for sidebar toggle */
-.dark .sidebar-toggle {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-text-secondary);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .sidebar-toggle:hover {
-  background: var(--color-dark-surface-hover);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-text-accent);
-}
-
-/* Dark mode for sidebar accordion open state */
-.dark .two-column-layout__sidebar:has(.sidebar-content.active) {
-  border-bottom-color: var(--color-dark-border);
-}
-
-.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb {
-  background: var(--color-dark-border);
-  background-clip: padding-box;
-}
-
-.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-base);
-  background-clip: padding-box;
-}
-
-/* Dark TOC */
-.dark .page-toc {
-  border-bottom-color: var(--color-dark-border);
-}
-
-.dark .page-toc h2 {
-  color: var(--color-dark-text-primary);
-}
-
-/* Dark site navigation title */
-.dark .site-navigation-title {
-  color: var(--color-dark-text-primary);
-}
-
-/* Dark mode anchor links */
-.dark .zola-anchor,
-.dark .zola-anchor:hover {
-  color: var(--color-dark-anchor);
-}
-
-/* Dark mode solution toggle */
-.dark .solution label {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .solution label:hover {
-  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-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-}
-
-/* Dark mode navigation */
-.dark .site-navigation__entry a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .site-navigation__entry a:hover {
-  background: var(--color-dark-surface-hover);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .site-navigation__entry.active a {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-/* Dark mode blog styling */
-.dark .post-list li a {
-  border-bottom-color: var(--color-dark-border);
-}
-
-.dark .post-list li a::after {
-  background: var(--color-dark-text-accent);
-}
-
-.dark .post-list li a h2 {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .post-list li a:hover h2 {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .post-list li a .meta {
-  color: var(--color-dark-text-muted);
-}
-
-.dark .post-list li a .excerpt {
-  color: var(--color-dark-text-secondary);
-}
-
-/* Dark mode blog pagination */
-.dark .pagination a {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .pagination a:hover {
-  background: var(--color-dark-surface-hover);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .pagination a.active {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-}
-
-/* Dark mode blog tags */
-.dark .blog-tag {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .blog-tag:hover {
-  background: var(--color-dark-surface-hover);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-text-accent);
-}
-
-/* Dark API Index Pills */
-.dark .api-namespace-toggle {
-  border-bottom-color: var(--color-dark-border);
-}
-
-.dark .api-namespace-title {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .api-namespace-toggle-text {
-  color: #bfa4ff;
-  opacity: 0.8;
-}
-
-.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
-  opacity: 1;
-  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: #c2acf5;
-}
-
-.dark .api-namespace-icon {
-  color: #bfa4ff;
-  opacity: 0.8;
-}
-
-.dark .api-namespace-toggle:hover .api-namespace-icon {
-  opacity: 1;
-  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: #c2acf5;
-}
-
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
-  background: linear-gradient(to bottom, 
-    transparent 0%, 
-    var(--color-dark-bg) 100%);
-}
-
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border: 1px solid var(--color-dark-text-accent);
-  box-shadow: none;
-}
-
-.dark .api-index__entry > ul a {
-  background: var(--color-dark-surface);
-  color: var(--color-dark-text-secondary);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .api-index__entry > ul a:hover {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-  box-shadow: var(--shadow-dark-md);
-}
-
-.dark .page-toc a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .page-toc a:hover {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-.dark .page-toc a.active {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-/* Dark cards and navigation */
-.dark .related-container {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-}
-
-.dark .related-container .link {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .related-container .link:hover {
-  border-color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-.dark .related-container .link .link-title {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .related-container .link > span:not(.link-title) {
-  color: var(--color-dark-text-accent);
-}
-
-/* Dark card */
-.dark .card {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .card:hover {
-  box-shadow: var(--shadow-dark-lg);
-  border-color: var(--color-dark-text-accent);
-}
-
-/* Dark badges */
-.dark .badge-primary {
-  background: rgba(191, 164, 255, 0.2);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .badge-warning {
-  background: rgba(245, 158, 11, 0.2);
-  color: #fbbf24;
-}
-
-.dark .badge-error {
-  background: rgba(239, 68, 68, 0.2);
-  color: #f87171;
-}
-
-/* Dark buttons */
-.dark .btn-primary {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .btn-primary:hover {
-  background: #c2acf5;
-  box-shadow: var(--shadow-dark-md);
-}
-
-.dark .btn-secondary {
-  background: var(--color-dark-surface);
-  color: var(--color-dark-text-accent);
-  border-color: var(--color-dark-text-accent);
-}
-
-.dark .btn-secondary:hover {
-  background: rgba(191, 164, 255, 0.15);
-}
-
-/* Dark back to top button */
-.dark .back-to-top-button,
-.dark #back-to-top-button {
-  background: var(--color-dark-surface);
-  color: var(--color-dark-text-primary);
-  border: 1px solid var(--color-dark-border);
-}
-
-.dark .back-to-top-button:hover,
-.dark #back-to-top-button:hover {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-}
-
-/* Dark search results */
-.dark .search-results {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-lg);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .search-results__item {
-  border-bottom-color: var(--color-dark-border);
-  opacity: 0.7;
-}
-
-.dark .search-result-link {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .search-results__item:hover {
-  background: var(--color-dark-surface-hover);
-  opacity: 0.8;
-}
-
-.dark .result-type-badge--api {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border: 1px solid var(--color-dark-text-accent);
-}
-
-.dark .search-results__item .fn-name {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .search-results__item .fn-signature {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .search-results__item strong {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .search-results__item .title {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .search-results__item .desc {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .search-results__item mark {
-  background: rgba(191, 164, 255, 0.3);
-  color: var(--color-dark-text-accent);
-}
-
-/* Dark footer */
-.dark .site-footer {
-  background: var(--color-dark-header-bg);
-  border-top-color: var(--color-dark-header-footer-border);
-}
-
-.dark .footer-logo .phel-logo {
-  stroke: white;
-}
-
-.dark .footer-logo .logo-text {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .footer-description {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .footer-social a {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .footer-social a:hover {
-  background: var(--color-dark-text-accent);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-}
-
-.dark .footer-column h3 {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .footer-column ul li a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .footer-column ul li a:hover {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .footer-bottom {
-  border-top-color: var(--color-dark-border);
-}
-
-.dark .footer-copyright {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .footer-badge {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .footer-badge-separator {
-  color: var(--color-dark-text-muted);
-}
-
-.dark .footer-badge-version {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-}
-
 /* Dark focus states */
 .dark a:focus-visible,
 .dark button:focus-visible {
@@ -781,107 +170,3 @@
 .dark ::-moz-selection {
   background: rgba(191, 164, 255, 0.3);
 }
-
-/* Dark mode code block copy button */
-.dark .copy-code-button {
-  background-color: rgba(42, 49, 60, 0.95);
-  border-color: #475569;
-}
-
-.dark .copy-code-button svg {
-  stroke: #cbd5e1;
-}
-
-.dark .copy-code-button:hover {
-  background-color: #2f3741;
-}
-
-.dark .copy-code-button.copied {
-  background-color: var(--color-dark-text-accent);
-  border-color: var(--color-dark-text-accent);
-}
-
-.dark .copy-code-button.copied svg {
-  stroke: white;
-}
-
-/* Homepage Title Accent - Dark Mode */
-.dark .homepage-title-accent {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .homepage-content > p:first-of-type {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .why-card {
-  background: var(--color-dark-bg);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .why-card:hover {
-  border-color: var(--color-dark-text-accent);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-}
-
-.dark .why-card-icon {
-  color: var(--color-dark-text-accent);
-}
-
-/* Homepage Code Section - Dark Mode */
-.dark .homepage-code-section {
-  background: rgba(191, 164, 255, 0.05);
-}
-
-/* Homepage CTA Buttons - Dark Mode */
-.dark .homepage-cta-primary {
-  background: var(--color-dark-text-accent);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-}
-
-.dark .homepage-cta-primary:hover {
-  background: #c2acf5;
-  border-color: #c2acf5;
-  color: var(--color-dark-bg);;
-}
-
-.dark .homepage-cta-secondary {
-  background: transparent;
-  color: var(--color-dark-text-primary);
-  border-color: var(--color-dark-border);
-}
-
-.dark .homepage-cta-secondary:hover {
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-text-accent);
-}
-
-/* Features Grid - Dark Mode */
-.dark .feature-card {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-}
-
-.dark .feature-card:hover {
-  border-color: var(--color-dark-text-accent);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .feature-icon {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .feature-title {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .feature-description {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .feature-items p,
-.dark .feature-items li {
-  color: var(--color-dark-text-secondary);
-}
diff --git a/css/components/documentation.css b/css/components/documentation.css
index 9189ce0..8166dab 100644
--- a/css/components/documentation.css
+++ b/css/components/documentation.css
@@ -630,3 +630,96 @@ h6:hover .zola-anchor {
   margin-left: var(--space-sm);
   color: var(--color-gray-light);
 }
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .api-namespace-toggle {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .api-namespace-title {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .api-namespace-toggle-text {
+  color: #bfa4ff;
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.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: #c2acf5;
+}
+
+.dark .api-namespace-icon {
+  color: #bfa4ff;
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-icon {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
+  background: linear-gradient(to bottom, 
+    transparent 0%, 
+    var(--color-dark-bg) 100%);
+}
+
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border: 1px solid var(--color-dark-text-accent);
+  box-shadow: none;
+}
+
+.dark .api-index__entry > ul a {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-secondary);
+  border-color: var(--color-dark-border);
+  box-shadow: var(--shadow-dark-sm);
+}
+
+.dark .api-index__entry > ul a:hover {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+  box-shadow: var(--shadow-dark-md);
+}
+
+.dark .solution label {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .solution label:hover {
+  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-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+}
+
+.dark .zola-anchor,
+.dark .zola-anchor:hover {
+  color: var(--color-dark-anchor);
+}
diff --git a/css/components/features.css b/css/components/features.css
index ab8b157..f83a5dc 100644
--- a/css/components/features.css
+++ b/css/components/features.css
@@ -342,3 +342,84 @@
   display: none;
 }
 
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .homepage-title-accent {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .homepage-content > p:first-of-type {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .homepage-code-section {
+  background: rgba(191, 164, 255, 0.05);
+}
+
+.dark .why-card {
+  background: var(--color-dark-bg);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .why-card:hover {
+  border-color: var(--color-dark-text-accent);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.dark .why-card-icon {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .homepage-cta-primary {
+  background: var(--color-dark-text-accent);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+}
+
+.dark .homepage-cta-primary:hover {
+  background: #c2acf5;
+  border-color: #c2acf5;
+  color: white;
+}
+
+.dark .homepage-cta-secondary {
+  background: transparent;
+  color: var(--color-dark-text-primary);
+  border-color: var(--color-dark-border);
+}
+
+.dark .homepage-cta-secondary:hover {
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .feature-card {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+}
+
+.dark .feature-card:hover {
+  border-color: var(--color-dark-text-accent);
+  box-shadow: var(--shadow-dark-sm);
+}
+
+.dark .feature-icon {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .feature-title {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .feature-description {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .feature-items p,
+.dark .feature-items li {
+  color: var(--color-dark-text-secondary);
+}
+
diff --git a/css/components/footer.css b/css/components/footer.css
index 00f831c..3bf02e5 100644
--- a/css/components/footer.css
+++ b/css/components/footer.css
@@ -302,3 +302,69 @@
     margin-top: var(--space-3xl);
   }
 }
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .site-footer {
+  background: var(--color-dark-header-bg);
+  border-top-color: var(--color-dark-header-footer-border);
+}
+
+.dark .footer-logo .phel-logo {
+  stroke: white;
+}
+
+.dark .footer-logo .logo-text {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .footer-description {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .footer-social a {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .footer-social a:hover {
+  background: var(--color-dark-text-accent);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+}
+
+.dark .footer-column h3 {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .footer-column ul li a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .footer-column ul li a:hover {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .footer-bottom {
+  border-top-color: var(--color-dark-border);
+}
+
+.dark .footer-copyright {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .footer-badge {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .footer-badge-separator {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .footer-badge-version {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+}
diff --git a/css/components/header.css b/css/components/header.css
index fa9847b..b850536 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -586,3 +586,126 @@ body.menu-open {
     opacity: 1;
   }
 }
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .site-header {
+  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: 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);
+}
+
+.dark .site-header.scrolled {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.dark .site-header__logo .phel-logo {
+  stroke: var(--color-dark-text-primary);
+  filter: drop-shadow(0 2px 4px rgba(241, 245, 249, 0.1));
+}
+
+.dark .site-header__logo .logo-text {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .site-header__navigation a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .site-header__navigation a::after {
+  background: var(--color-dark-text-accent);
+}
+
+.dark .site-header__navigation a:hover {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .site-header__navigation li.active a {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .site-header__mobile-menu .hamburger-icon span {
+  background: var(--color-dark-text-primary);
+}
+
+.dark .site-header__mobile-menu .hamburger-icon:hover {
+  background: rgba(191, 164, 255, 0.15);
+}
+
+.dark .site-header__actions {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .site-header__link,
+.dark .dark-mode-toggle {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .site-header__link:hover,
+.dark .dark-mode-toggle:hover {
+  color: var(--color-dark-text-accent);
+  background: rgba(191, 164, 255, 0.15);
+}
+
+/* Mobile menu dark mode */
+@media (max-width: 1039px) {
+  .dark .mobile-menu-overlay {
+    background: var(--color-dark-header-bg);
+    backdrop-filter: blur(var(--backdrop-blur-lg));
+    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
+  }
+
+  .dark .mobile-menu-nav a {
+    background: var(--color-dark-surface);
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text-primary);
+  }
+
+  .dark .mobile-menu-nav a:hover,
+  .dark .mobile-menu-nav a:active {
+    background: var(--color-dark-text-accent);
+    border-color: var(--color-dark-text-accent);
+    color: var(--color-dark-bg);
+  }
+
+  .dark .mobile-menu-link {
+    background: var(--color-dark-surface);
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text-primary);
+  }
+
+  .dark .mobile-menu-link:hover,
+  .dark .mobile-menu-link:active {
+    background: var(--color-dark-text-accent);
+    border-color: var(--color-dark-text-accent);
+    color: var(--color-dark-bg);
+  }
+
+  .dark .mobile-menu-actions {
+    border-top-color: var(--color-dark-border);
+  }
+
+  .dark .mobile-dark-mode-toggle {
+    background: var(--color-dark-surface);
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text-primary);
+  }
+
+  .dark .mobile-dark-mode-toggle:hover {
+    background: rgba(191, 164, 255, 0.15);
+    border-color: var(--color-dark-text-accent);
+  }
+
+  .dark .mobile-menu-toggle span {
+    background: var(--color-dark-text-primary);
+  }
+
+  .dark .mobile-menu-toggle:hover {
+    background: rgba(191, 164, 255, 0.15);
+  }
+}
diff --git a/css/components/layout.css b/css/components/layout.css
index 06fb7f7..81e6a37 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -311,3 +311,99 @@
     opacity: 0.8;
   }
 }
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+@media (min-width: 1040px) {
+  .dark .two-column-layout__sidebar {
+    background: var(--color-dark-surface);
+    border-color: var(--color-dark-border);
+    box-shadow: var(--shadow-dark-sm);
+  }
+}
+
+@media (max-width: 1039px) {
+  .dark .two-column-layout__sidebar {
+    background: transparent;
+    border-bottom-color: var(--color-dark-border);
+  }
+}
+
+.dark .sidebar-toggle {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-text-secondary);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .sidebar-toggle:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .two-column-layout__sidebar:has(.sidebar-content.active) {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb {
+  background: var(--color-dark-border);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-base);
+  background-clip: padding-box;
+}
+
+.dark .related-container {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.dark .related-container .link {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .related-container .link:hover {
+  border-color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .related-container .link .link-title {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .related-container .link > span:not(.link-title) {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .back-to-top-button,
+.dark #back-to-top-button {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-primary);
+  border: 1px solid var(--color-dark-border);
+}
+
+.dark .back-to-top-button:hover,
+.dark #back-to-top-button:hover {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+}
+
+.dark .card {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  box-shadow: var(--shadow-dark-sm);
+}
+
+.dark .card:hover {
+  box-shadow: var(--shadow-dark-lg);
+  border-color: var(--color-dark-text-accent);
+}
diff --git a/css/components/navigation.css b/css/components/navigation.css
index b9a8602..e4ceb53 100644
--- a/css/components/navigation.css
+++ b/css/components/navigation.css
@@ -86,3 +86,47 @@
   font-weight: 600;
 }
 
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .site-navigation-title {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .site-navigation__entry a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .site-navigation__entry a:hover {
+  background: var(--color-dark-surface-hover);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .site-navigation__entry.active a {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .page-toc h2 {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .page-toc a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .page-toc a:hover {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc a.active {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
diff --git a/css/components/search.css b/css/components/search.css
index 6d9a25e..9f46d7d 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -252,3 +252,108 @@
     padding: var(--space-md);
   }
 }
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark #search {
+  background-color: var(--color-dark-bg-secondary);
+  color: var(--color-dark-text-primary);
+  border-color: #3a3a3a;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.dark #search:hover {
+  border-color: #4a4a4a;
+  box-shadow: var(--shadow-dark-sm);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.dark #search:focus {
+  border-color: #5a5a5a;
+  background-color: var(--color-dark-surface);
+  box-shadow: 0 0 0 3px rgba(90, 90, 90, 0.3),
+              var(--shadow-dark-sm);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.dark #search::placeholder {
+  color: var(--color-dark-text-muted);
+}
+
+.dark #search::-webkit-search-cancel-button {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+  opacity: 0.8;
+}
+
+.dark #search::-webkit-search-cancel-button:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+  opacity: 1;
+}
+
+.dark .search-results {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  box-shadow: var(--shadow-dark-lg);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .search-results__item {
+  border-bottom-color: var(--color-dark-border);
+  opacity: 0.7;
+}
+
+.dark .search-result-link {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .search-results__item:hover {
+  background: var(--color-dark-surface-hover);
+  opacity: 0.8;
+}
+
+.dark .result-type-badge--api {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border: 1px solid var(--color-dark-text-accent);
+}
+
+.dark .result-type-badge--docs {
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.dark .search-results__item .fn-name {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .search-results__item .fn-signature {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .search-results__item strong {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .search-results__item .title {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .search-results__item .desc {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .search-results__item mark {
+  background: rgba(191, 164, 255, 0.3);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .search-results::-webkit-scrollbar-thumb {
+  background: var(--color-dark-border);
+}
+
+.dark .search-results::-webkit-scrollbar-thumb:hover {
+  background: var(--color-dark-border-subtle);
+}
diff --git a/templates/blog.html b/templates/blog.html
index e0640ee..01b83b0 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -6,7 +6,7 @@
 {% endblock meta_content %}
 {% block content %}
 <h1>Blog</h1>
-<p>Find the newest information about Phel in our Blog.</p>
+<p class="blog-intro">Find the newest information about Phel in our Blog.</p>
 <ul class="post-list">
     {% for page in paginator.pages %}
     <li>

From 6bcf1d69d80a3a245720fb02cbbfcbc9deb33928 Mon Sep 17 00:00:00 2001
From: JesusValera <jesus1902@outlook.com>
Date: Sat, 4 Oct 2025 21:28:30 +0200
Subject: [PATCH 2/4] Remove orphan CSS classes

---
 content/documentation/getting-started.md |   2 +-
 css/base.css                             | 849 +++++++++++------------
 css/components/blog.css                  |  30 +-
 css/components/dark-mode.css             |   5 -
 css/components/documentation.css         |  61 +-
 css/components/features.css              |   3 +-
 css/components/header.css                |  14 +-
 css/components/layout.css                |  25 +-
 css/components/search.css                |  18 +-
 9 files changed, 447 insertions(+), 560 deletions(-)

diff --git a/content/documentation/getting-started.md b/content/documentation/getting-started.md
index ab26f44..4f3717f 100644
--- a/content/documentation/getting-started.md
+++ b/content/documentation/getting-started.md
@@ -110,7 +110,7 @@ vendor/bin/phel test --filter foo
 
 ## Editor Support
 
-- [VSCode](https://github.com/phel-lang/phel-vs-code-extension)
 - [PhpStorm](https://github.com/phel-lang/phel-intellij-plugin)
+- [VSCode](https://github.com/phel-lang/phel-vs-code-extension)
 - [Emacs](https://codeberg.org/mmontone/interactive-lang-tools)
 - [Vim](https://github.com/danirod/phel.vim)
diff --git a/css/base.css b/css/base.css
index c3e9c63..981f38a 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,428 +1,423 @@
-@layer base {
-  /* Root & HTML Setup */
-  :root {
-    box-sizing: border-box;
-    font-family: var(--font-primary);
-    line-height: var(--leading-relaxed);
-    background-color: var(--color-light-bg);
-    color: var(--color-light-text-primary);
-    font-size: var(--font-size);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  html {
-    @apply scroll-smooth bg-white;
-    -webkit-text-size-adjust: 100%;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    scroll-behavior: smooth;
-  }
-
-  *,
-  ::after,
-  ::before {
-    @apply box-border border-0 border-solid;
-    border-color: var(--color-light-border);
-  }
-
-  body {
-    @apply m-0 min-h-screen antialiased;
-    font-family: var(--font-primary);
-    background-color: var(--color-light-bg);
-    color: var(--color-light-text-primary);
-    font-size: var(--font-size);
-    line-height: var(--leading-relaxed);
-    padding-top: var(--header-height);
-    overflow-x: hidden;
-    transition: background-color var(--duration-normal) var(--ease-out),
-                color var(--duration-normal) var(--ease-out);
-  }
-
-  /* Reset spacing */
-  * + * {
-    margin-top: 1.5em;
-  }
-
-  li,
-  kbd,
-  div,
-  input,
-  option,
-  select,
-  a,
-  textarea,
-  body,
-  span,
-  dd,
-  code,
-  label,
-  [column] {
-    margin: 0;
-  }
-
-  /* Modern Link Styling */
-  a {
-    color: var(--color-light-link);
-    text-decoration: none;
-    transition: all var(--duration-fast) var(--ease-out);
-    border-radius: var(--radius-sm);
-    position: relative;
-  }
-
-  a:hover {
-    color: var(--color-light-link);
-    text-decoration: none;
-  }
-
-  a:focus-visible {
-    outline: 2px solid var(--color-light-link);
-    outline-offset: 3px;
-  }
-
-  /* Modern link underline effect */
-  a:not([class])::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background: var(--color-light-link);
-    transition: width var(--duration-normal) var(--ease-out);
-  }
-
-  a:not([class]):hover::after {
-    width: 100%;
-  }
-
-  /* Touch-friendly tap targets */
-  a,
-  area,
-  button,
-  input,
-  label,
-  select,
-  textarea,
-  [tabindex] {
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-  }
-
-  /* Modern Heading Typography */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: var(--color-light-text-primary);
-    font-family: var(--font-secondary);
-    font-weight: 700;
-    line-height: 1.2;
-    letter-spacing: -0.02em;
-    transition: color var(--duration-normal) var(--ease-out);
-  }
-
-  h1 {
-    font-size: clamp(2rem, 5vw, 2.5rem);
-    margin: 1em 0 0.5em;
-  }
-
-  h2 {
-    font-size: clamp(1.75rem, 4vw, 2rem);
-    margin: 1em 0 0.5em;
-  }
-
-  h3 {
-    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
-    margin: 1em 0 0.5em;
-  }
-
-  h4 {
-    font-size: clamp(1.25rem, 3vw, 1.5rem);
-    margin: 1em 0 0.5em;
-  }
-
-  h5 {
-    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
-    margin: 1em 0 0.5em;
-  }
-
-  h6 {
-    font-size: clamp(1rem, 2vw, 1.125rem);
-    margin: 1em 0 0.5em;
-  }
-
-  /* Heading links */
-  h1 a,
-  h2 a,
-  h3 a {
-    color: inherit;
-  }
-
-  h1 a::after,
-  h2 a::after,
-  h3 a::after {
-    display: none;
-  }
-
-  h1 a:hover,
-  h1 a:focus,
-  h2 a:hover,
-  h2 a:focus,
-  h3 a:hover,
-  h3 a:focus {
-    color: var(--color-light-link);
-    text-decoration: none;
-  }
-
-  /* Modern HR with gradient */
-  hr {
-    background: linear-gradient(
-      90deg,
-      transparent,
-      var(--color-light-border) 20%,
-      var(--color-light-border) 80%,
-      transparent
-    );
-    height: 1px;
-    border: 0;
-    margin: 2.5em 0;
-  }
-
-  /* Navigation */
-  nav ol,
-  nav ul {
-    padding-left: 0;
-  }
-
-  nav li {
-    list-style: none;
-  }
-
-  /* Paragraph styling */
-  p {
-    @apply mb-4;
-    line-height: var(--leading-relaxed);
-    color: var(--color-light-text-secondary);
-  }
-
-  /* Modern List Styling */
-  ul,
-  ol {
-    padding-left: 1.5em;
-    line-height: var(--leading-relaxed);
-  }
-
-  ul {
-    list-style-type: none;
-  }
-
-  ul li {
-    position: relative;
-    padding-left: 1.5em;
-  }
-
-  ul li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0.65em;
-    width: 0.5em;
-    height: 0.5em;
-    background: var(--color-light-link);
-    border-radius: 50%;
-  }
-
-  ul ol,
-  ul ul,
-  ol ol,
-  ol ul {
-    padding-left: 1.5em;
-    margin-top: 0.5em;
-  }
-
-  /* Modern numbered lists */
-  ol {
-    counter-reset: item;
-  }
-
-  ol li {
-    list-style: none;
-    position: relative;
-  }
-
-  ol li:before {
-    content: counter(item) '.';
-    counter-increment: item;
-    position: absolute;
-    left: -1.5em;
-    font-weight: 700;
-    color: var(--color-light-link);
-  }
-
-  /* Images with modern styling */
-  img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius-lg);
-  }
-
-  /* Modern Blockquote */
-  blockquote {
-    position: relative;
-    background: var(--color-light-blockquote-bg);
-    margin: 2em 0;
-    padding: var(--space-md) var(--space-lg);
-    padding-left: calc(var(--space-lg) + 2em);
-    border-left: 3px solid var(--color-light-blockquote-border);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-sm);
-    font-style: italic;
-    color: var(--color-light-text-secondary);
-    display: flex;
-    align-items: center;
-    min-height: 3em;
-  }
-
-  blockquote::before {
-    content: '"';
-    position: absolute;
-    left: 1.7rem;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 2.5em;
-    color: var(--color-light-blockquote-border);
-    opacity: 0.3;
-    font-family: Georgia, serif;
-    line-height: 1;
-  }
-
-  blockquote p {
-    margin-bottom: 0;
-  }
-
-  /* Separator */
-  .separator {
-    @apply mx-auto my-12 border-t-8 border-dotted;
-    width: 20%;
-    border-color: var(--color-light-border);
-    opacity: 0.5;
-  }
-
-  /* Modern Code Blocks */
-  pre {
-    padding: 1.5em;
-    font-size: var(--font-size-code);
-    font-family: var(--font-mono);
-    background: var(--color-light-code-bg);
-    border: 1px solid var(--color-light-border);
-    border-radius: var(--radius-lg);
-    overflow-x: auto;
-    max-width: 100%;
-    box-shadow: var(--shadow-sm);
-    line-height: 1.6;
-    position: relative;
-  }
-
-  pre::-webkit-scrollbar {
-    height: 8px;
-  }
-
-  pre::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  pre::-webkit-scrollbar-thumb {
-    background: var(--color-light-border);
-    border-radius: var(--radius-full);
-  }
-
-  pre::-webkit-scrollbar-thumb:hover {
-    background: var(--color-gray-base);
-  }
-
-  /* Inline code with modern badge style */
-  p code,
-  li code {
-    padding: 0.2em 0.5em;
-    margin: 0;
-    font-size: 0.9em;
-    font-family: var(--font-mono);
-    background-color: var(--color-light-code-inline-bg);
-    color: var(--color-light-link);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-light-border);
-    font-weight: 500;
-  }
-
-  /* Modern Selection */
-  ::selection {
-    background: rgba(99, 102, 241, 0.2);
-    color: inherit;
-  }
-
-  ::-moz-selection {
-    background: rgba(99, 102, 241, 0.2);
-    color: inherit;
-  }
-
-  /* Focus visible states */
-  :root {
-    --border: var(--color-light-border);
-  }
-
-  .dark {
-    --border: var(--color-dark-border);
-  }
-
-  button:focus-visible {
-    outline: 2px solid var(--color-light-link);
-    outline-offset: 3px;
-    border-radius: var(--radius-md);
-  }
-
-  /* Tables with modern styling */
-  table {
-    width: 100%;
-    max-width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin: 2em 0;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: var(--shadow-sm);
-    display: block;
-    overflow-x: auto;
-  }
-
-  th {
-    background: var(--color-light-bg-secondary);
-    padding: 0.75em 1em;
-    text-align: left;
-    font-weight: 600;
-    color: var(--color-light-text-primary);
-    border-bottom: 2px solid var(--color-light-link);
-  }
-
-  td {
-    padding: 0.75em 1em;
-    border-bottom: 1px solid var(--color-light-border);
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-
-  tr:hover {
-    background: var(--color-light-surface-hover);
-    transition: background var(--duration-fast) var(--ease-out);
-  }
-
-  /* Smooth scrolling with offset for fixed header */
-  [id] {
-    scroll-margin-top: calc(var(--header-height) + 2rem);
-  }
+/* Root & HTML Setup */
+:root {
+  box-sizing: border-box;
+  font-family: var(--font-primary);
+  line-height: var(--leading-relaxed);
+  background-color: var(--color-light-bg);
+  color: var(--color-light-text-primary);
+  font-size: var(--font-size);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  scroll-behavior: smooth;
+  background-color: white;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+  border: 0;
+  border-style: solid;
+  border-color: var(--color-light-border);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-primary);
+  background-color: var(--color-light-bg);
+  color: var(--color-light-text-primary);
+  font-size: var(--font-size);
+  line-height: var(--leading-relaxed);
+  padding-top: var(--header-height);
+  overflow-x: hidden;
+  transition: background-color var(--duration-normal) var(--ease-out),
+              color var(--duration-normal) var(--ease-out);
+}
+
+/* Reset spacing */
+* + * {
+  margin-top: 1.5em;
+}
+
+li,
+kbd,
+div,
+input,
+option,
+select,
+a,
+textarea,
+body,
+span,
+dd,
+code,
+label,
+[column] {
+  margin: 0;
+}
+
+/* Modern Link Styling */
+a {
+  color: var(--color-light-link);
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out);
+  border-radius: var(--radius-sm);
+  position: relative;
+}
+
+a:hover {
+  color: var(--color-light-link);
+  text-decoration: none;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--color-light-link);
+  outline-offset: 3px;
+}
+
+/* Modern link underline effect */
+a:not([class])::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--color-light-link);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+a:not([class]):hover::after {
+  width: 100%;
+}
+
+/* Touch-friendly tap targets */
+a,
+area,
+button,
+input,
+label,
+select,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+/* Modern Heading Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--color-light-text-primary);
+  font-family: var(--font-secondary);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  transition: color var(--duration-normal) var(--ease-out);
+}
+
+h1 {
+  font-size: clamp(2rem, 5vw, 2.5rem);
+  margin: 1em 0 0.5em;
+}
+
+h2 {
+  font-size: clamp(1.75rem, 4vw, 2rem);
+  margin: 1em 0 0.5em;
+}
+
+h3 {
+  font-size: clamp(1.5rem, 3.5vw, 1.75rem);
+  margin: 1em 0 0.5em;
+}
+
+h4 {
+  font-size: clamp(1.25rem, 3vw, 1.5rem);
+  margin: 1em 0 0.5em;
+}
+
+h5 {
+  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
+  margin: 1em 0 0.5em;
+}
+
+h6 {
+  font-size: clamp(1rem, 2vw, 1.125rem);
+  margin: 1em 0 0.5em;
+}
+
+/* Heading links */
+h1 a,
+h2 a,
+h3 a {
+  color: inherit;
+}
+
+h1 a::after,
+h2 a::after,
+h3 a::after {
+  display: none;
+}
+
+h1 a:hover,
+h1 a:focus,
+h2 a:hover,
+h2 a:focus,
+h3 a:hover,
+h3 a:focus {
+  color: var(--color-light-link);
+  text-decoration: none;
+}
+
+/* Modern HR with gradient */
+hr {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--color-light-border) 20%,
+    var(--color-light-border) 80%,
+    transparent
+  );
+  height: 1px;
+  border: 0;
+  margin: 2.5em 0;
+}
+
+/* Navigation */
+nav ol,
+nav ul {
+  padding-left: 0;
+}
+
+nav li {
+  list-style: none;
+}
+
+/* Paragraph styling */
+p {
+  margin-bottom: 1rem;
+  line-height: var(--leading-relaxed);
+  color: var(--color-light-text-secondary);
+}
+
+/* Modern List Styling */
+ul,
+ol {
+  padding-left: 1.5em;
+  line-height: var(--leading-relaxed);
+}
+
+ul {
+  list-style-type: none;
+}
+
+ul li {
+  position: relative;
+  padding-left: 1.5em;
+}
+
+ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.65em;
+  width: 0.5em;
+  height: 0.5em;
+  background: var(--color-light-link);
+  border-radius: 50%;
+}
+
+ul ol,
+ul ul,
+ol ol,
+ol ul {
+  padding-left: 1.5em;
+  margin-top: 0.5em;
+}
+
+/* Modern numbered lists */
+ol {
+  counter-reset: item;
+}
+
+ol li {
+  list-style: none;
+  position: relative;
+}
+
+ol li:before {
+  content: counter(item) '.';
+  counter-increment: item;
+  position: absolute;
+  left: -1.5em;
+  font-weight: 700;
+  color: var(--color-light-link);
+}
+
+/* Images with modern styling */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-lg);
+}
+
+/* Modern Blockquote */
+blockquote {
+  position: relative;
+  background: var(--color-light-blockquote-bg);
+  margin: 2em 0;
+  padding: var(--space-md) var(--space-lg);
+  padding-left: calc(var(--space-lg) + 2em);
+  border-left: 3px solid var(--color-light-blockquote-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  font-style: italic;
+  color: var(--color-light-text-secondary);
+  display: flex;
+  align-items: center;
+  min-height: 3em;
+}
+
+blockquote::before {
+  content: '"';
+  position: absolute;
+  left: 1.7rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 2.5em;
+  color: var(--color-light-blockquote-border);
+  opacity: 0.3;
+  font-family: Georgia, serif;
+  line-height: 1;
+}
+
+blockquote p {
+  margin-bottom: 0;
+}
+
+/* Modern Code Blocks */
+pre {
+  padding: 1.5em;
+  font-size: var(--font-size-code);
+  font-family: var(--font-mono);
+  background: var(--color-light-code-bg);
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  max-width: 100%;
+  box-shadow: var(--shadow-sm);
+  line-height: 1.6;
+  position: relative;
+}
+
+pre::-webkit-scrollbar {
+  height: 8px;
+}
+
+pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: var(--color-light-border);
+  border-radius: var(--radius-full);
+}
+
+pre::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-base);
+}
+
+/* Inline code with modern badge style */
+p code,
+li code {
+  padding: 0.2em 0.5em;
+  margin: 0;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+  background-color: var(--color-light-code-inline-bg);
+  color: var(--color-light-link);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-light-border);
+  font-weight: 500;
+}
+
+/* Modern Selection */
+::selection {
+  background: rgba(99, 102, 241, 0.2);
+  color: inherit;
+}
+
+::-moz-selection {
+  background: rgba(99, 102, 241, 0.2);
+  color: inherit;
+}
+
+/* Focus visible states */
+:root {
+  --border: var(--color-light-border);
+}
+
+.dark {
+  --border: var(--color-dark-border);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--color-light-link);
+  outline-offset: 3px;
+  border-radius: var(--radius-md);
+}
+
+/* Tables with modern styling */
+table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 2em 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  display: block;
+  overflow-x: auto;
+}
+
+th {
+  background: var(--color-light-bg-secondary);
+  padding: 0.75em 1em;
+  text-align: left;
+  font-weight: 600;
+  color: var(--color-light-text-primary);
+  border-bottom: 2px solid var(--color-light-link);
+}
+
+td {
+  padding: 0.75em 1em;
+  border-bottom: 1px solid var(--color-light-border);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tr:hover {
+  background: var(--color-light-surface-hover);
+  transition: background var(--duration-fast) var(--ease-out);
+}
+
+/* Smooth scrolling with offset for fixed header */
+[id] {
+scroll-margin-top: calc(var(--header-height) + 2rem);
 }
diff --git a/css/components/blog.css b/css/components/blog.css
index da8f367..b7531d9 100644
--- a/css/components/blog.css
+++ b/css/components/blog.css
@@ -6,7 +6,7 @@
 }
 
 /* Blog post list */
-@utility post-list {
+.post-list {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -42,7 +42,7 @@
 }
 
 /* Pagination */
-@utility pagination {
+.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -89,20 +89,6 @@
   margin-left: var(--space-xs);
 }
 
-/* Featured post highlight */
-/*.post-list li.featured a {*/
-/*  border: 2px solid var(--color-light-link);*/
-/*  background: linear-gradient(*/
-/*    135deg,*/
-/*    rgba(99, 102, 241, 0.05),*/
-/*    transparent*/
-/*  );*/
-/*}*/
-
-/*.post-list li.featured a::before {*/
-/*  transform: scaleY(1);*/
-/*}*/
-
 /* ========================================
    DARK MODE
    ======================================== */
@@ -152,15 +138,3 @@
   color: var(--color-dark-bg);
   border-color: var(--color-dark-text-accent);
 }
-
-.dark .blog-tag {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .blog-tag:hover {
-  background: var(--color-dark-surface-hover);
-  border-color: var(--color-dark-text-accent);
-  color: var(--color-dark-text-accent);
-}
diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index 995913c..74bd2b1 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -145,11 +145,6 @@
   );
 }
 
-/* Dark separator */
-.dark .separator {
-  border-color: var(--color-dark-border);
-}
-
 /* Dark layout components */
 .dark .one-column-layout,
 .dark .two-column-layout {
diff --git a/css/components/documentation.css b/css/components/documentation.css
index 8166dab..422e75f 100644
--- a/css/components/documentation.css
+++ b/css/components/documentation.css
@@ -1,5 +1,5 @@
 /* Documentation navigation in sidebar */
-@utility docs-nav {
+.docs-nav {
   padding: 0;
   margin: 0;
 }
@@ -80,7 +80,7 @@
 }
 
 /* Table of contents */
-@utility page-toc {
+.page-toc {
   display: none;
   margin-bottom: var(--space-2xl);
   padding-bottom: var(--space-xl);
@@ -167,7 +167,7 @@
 }
 
 /* API Index - Pill Style */
-@utility api-index {
+.api-index {
   list-style: none;
   padding: 0;
   margin: var(--space-2xl) 0;
@@ -576,61 +576,6 @@ h6:hover .zola-anchor {
   line-height: var(--leading-relaxed);
 }
 
-/* Code examples with header */
-.code-block-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-sm) var(--space-lg);
-  background: var(--color-light-bg-secondary);
-  border: 1px solid var(--color-light-border);
-  border-bottom: none;
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-light-text-secondary);
-}
-
-.code-block-header + pre {
-  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-}
-
-.copy-code-button:active {
-  transform: translateY(0);
-}
-
-/* Breadcrumbs */
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-xl);
-  padding: var(--space-md);
-  background: var(--color-light-bg-secondary);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-}
-
-.breadcrumbs a {
-  color: var(--color-light-link);
-  text-decoration: none;
-  transition: color var(--duration-fast) var(--ease-out);
-}
-
-.breadcrumbs a::after {
-  display: none;
-}
-
-.breadcrumbs a:hover {
-  color: var(--color-light-link);
-}
-
-.breadcrumbs span:not(:last-child)::after {
-  content: '→';
-  margin-left: var(--space-sm);
-  color: var(--color-gray-light);
-}
-
 /* ========================================
    DARK MODE
    ======================================== */
diff --git a/css/components/features.css b/css/components/features.css
index f83a5dc..2f18de8 100644
--- a/css/components/features.css
+++ b/css/components/features.css
@@ -220,6 +220,7 @@
 .homepage-cta-primary:hover {
   background: #6d3fc2;
   border-color: #6d3fc2;
+  color: white;
 }
 
 .homepage-cta-secondary {
@@ -382,7 +383,7 @@
 .dark .homepage-cta-primary:hover {
   background: #c2acf5;
   border-color: #c2acf5;
-  color: white;
+  color: var(--color-dark-bg);
 }
 
 .dark .homepage-cta-secondary {
diff --git a/css/components/header.css b/css/components/header.css
index b850536..f6ab0c1 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -1,5 +1,5 @@
 /* Header Container */
-@utility site-header {
+.site-header {
   position: fixed;
   top: 0;
   left: 0;
@@ -94,7 +94,7 @@
    LOGO
    ======================================== */
 
-@utility site-header__logo {
+.site-header__logo {
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -130,7 +130,7 @@
    DESKTOP NAVIGATION
    ======================================== */
 
-@utility site-header__navigation {
+.site-header__navigation {
   display: none;
   flex: 0 1 auto;
   align-items: center;
@@ -207,7 +207,7 @@
    SEARCH
    ======================================== */
 
-@utility site-header__search {
+.site-header__search {
   position: relative;
   margin-left: auto;
   flex: 1;
@@ -354,7 +354,7 @@
    DESKTOP ACTIONS (Dark Mode, Social)
    ======================================== */
 
-@utility site-header__actions {
+.site-header__actions {
   display: none;
 }
 
@@ -367,7 +367,7 @@
   }
 }
 
-@utility site-header__link {
+.site-header__link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -389,7 +389,7 @@
   height: 20px;
 }
 
-@utility dark-mode-toggle {
+.dark-mode-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/css/components/layout.css b/css/components/layout.css
index 81e6a37..776f97d 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -1,5 +1,5 @@
 /* Layout Container with smooth transitions */
-@utility layout-container {
+.layout-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@
 }
 
 /* One Column Layout - Modern Content */
-@utility one-column-layout {
+.one-column-layout {
   margin: 0 auto;
   width: 100%;
   max-width: var(--container-content);
@@ -23,7 +23,7 @@
 }
 
 /* Two Column Layout - Modern Documentation */
-@utility two-column-layout {
+.two-column-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-md);
@@ -52,7 +52,7 @@
 }
 
 /* Sidebar with modern sticky behavior */
-@utility two-column-layout__sidebar {
+.two-column-layout__sidebar {
   order: -1;
 }
 
@@ -175,7 +175,7 @@
 }
 
 /* Main content area */
-@utility two-column-layout__main {
+.two-column-layout__main {
   order: 1;
   min-width: 0;
   width: 100%;
@@ -192,7 +192,7 @@
 }
 
 /* Modern Page Navigation (Previous/Next) */
-@utility related-container {
+.related-container {
   display: flex;
   justify-content: space-between;
   gap: var(--space-lg);
@@ -241,7 +241,7 @@
 }
 
 /* Back to Top Button */
-@utility back-to-top-button {
+.back-to-top-button {
   position: fixed;
   bottom: var(--space-2xl);
   right: var(--space-xl);
@@ -396,14 +396,3 @@
   color: var(--color-dark-bg);
   border-color: var(--color-dark-text-accent);
 }
-
-.dark .card {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .card:hover {
-  box-shadow: var(--shadow-dark-lg);
-  border-color: var(--color-dark-text-accent);
-}
diff --git a/css/components/search.css b/css/components/search.css
index 9f46d7d..c36a9e2 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -1,5 +1,5 @@
 /* Search results dropdown with glassmorphism */
-@utility search-results {
+.search-results {
   position: absolute;
   top: calc(100% + var(--space-sm));
   left: 0;
@@ -57,7 +57,7 @@
 }
 
 /* Search results list */
-@utility search-results__items {
+.search-results__items {
   list-style: none;
   padding: var(--space-sm);
   margin: 0;
@@ -73,7 +73,7 @@
 }
 
 /* Individual search result item */
-@utility search-results__item {
+.search-results__item {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
@@ -217,18 +217,6 @@
   border-left: 3px solid var(--color-light-link);
 }
 
-/* Category badges in search results */
-.search-results__item .category {
-  display: inline-block;
-  padding: var(--space-xs) var(--space-sm);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  border-radius: var(--radius-full);
-  background: var(--color-light-surface-hover);
-  color: var(--color-light-link);
-  margin-top: var(--space-sm);
-}
-
 /* Animation keyframes */
 @keyframes slideInDown {
   from {

From 604a00197156b9966a116f9015a2b78a1ff75529 Mon Sep 17 00:00:00 2001
From: JesusValera <jesus1902@outlook.com>
Date: Sun, 5 Oct 2025 15:28:17 +0200
Subject: [PATCH 3/4] Refactor CSS

---
 css/base.css                                  |   1 -
 css/components/api.css                        | 435 ++++++++++++
 css/components/blog.css                       |   2 -
 css/components/dark-mode.css                  |   4 -
 css/components/documentation.css              | 634 +-----------------
 css/components/exercises.css                  |  76 +++
 css/components/footer.css                     |   1 -
 css/components/header.css                     | 147 ----
 css/components/{features.css => homepage.css} |   2 +-
 css/components/navigation.css                 | 107 ---
 css/components/search.css                     | 145 +++-
 css/components/sidebar.css                    | 180 +++++
 css/theme.css                                 |   1 -
 scripts/concat-tailwind.js                    |  22 +-
 static/api-accordion.js                       |  29 +-
 templates/shortcodes/solution.html            |   8 +-
 16 files changed, 904 insertions(+), 890 deletions(-)
 create mode 100644 css/components/api.css
 create mode 100644 css/components/exercises.css
 rename css/components/{features.css => homepage.css} (99%)
 create mode 100644 css/components/sidebar.css

diff --git a/css/base.css b/css/base.css
index 981f38a..9645ca2 100644
--- a/css/base.css
+++ b/css/base.css
@@ -122,7 +122,6 @@ h4,
 h5,
 h6 {
   color: var(--color-light-text-primary);
-  font-family: var(--font-secondary);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.02em;
diff --git a/css/components/api.css b/css/components/api.css
new file mode 100644
index 0000000..fd54b3a
--- /dev/null
+++ b/css/components/api.css
@@ -0,0 +1,435 @@
+.api-index {
+  list-style: none;
+  padding: 0;
+  margin: var(--space-2xl) 0;
+}
+
+.api-index li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.api-index li::before {
+  display: none;
+}
+
+.api-index__entry {
+  margin: var(--space-3xl) 0;
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* API Namespace Toggle */
+.api-namespace-toggle {
+  align-items: flex-end;
+  background: 0 0;
+  border: none;
+  border-bottom: 2px solid var(--color-light-border);
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--space-lg);
+  padding: 0 0 var(--space-sm);
+  text-align: left;
+  transition: all var(--duration-fast) var(--ease-out);
+  width: 100%;
+}
+
+.api-namespace-title {
+  color: var(--color-light-link);
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  letter-spacing: -.02em;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+}
+
+.api-namespace-toggle-indicator {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  gap: var(--space-sm);
+}
+
+/* Hide indicator for namespaces without overflow */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content:not(.has-overflow) ~ * .api-namespace-toggle-indicator,
+.api-index__entry:has(.api-namespace-content:not(.has-overflow)) .api-namespace-toggle-indicator {
+  display: none;
+}
+
+.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle {
+  cursor: pointer;
+}
+
+.api-namespace-toggle-text {
+  color: var(--color-phel-primary);
+  opacity: 0.8;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.api-namespace-icon {
+  color: var(--color-phel-primary);
+  flex-shrink: 0;
+  height: 24px;
+  opacity: .8;
+  transition: transform var(--duration-normal) var(--ease-out);
+  width: 24px;
+}
+
+.api-namespace-toggle:hover .api-namespace-toggle-text {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+.api-namespace-toggle:hover .api-namespace-icon {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+
+.api-namespace-toggle[aria-expanded="true"] .api-namespace-icon {
+  transform: rotate(180deg);
+}
+
+/* API Namespace Content */
+.api-namespace-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  list-style: none;
+  margin: 0;
+  max-height: 5000px;
+  max-width: 100%;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s ease-out;
+  width: 100%;
+  opacity: 1;
+}
+
+/* Only collapse if has overflow */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content {
+  margin-bottom: var(--space-lg);
+  max-height: 160px;
+  overflow: hidden;
+}
+
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  width: calc(100% + var(--space-md) * 2);
+}
+
+/* Pills Container */
+.api-index__entry > ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  list-style: none;
+  padding: var(--space-lg) 0;
+  margin: 0;
+}
+
+.api-index__entry > ul li {
+  flex-shrink: 0;
+}
+
+.api-index__entry > ul a {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-light-bg-secondary);
+  color: var(--color-light-text-secondary);
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: all var(--duration-fast) var(--ease-out);
+  box-shadow: var(--shadow-sm);
+}
+
+.api-index__entry > ul a::after {
+  display: none;
+}
+
+.api-index__entry > ul a:hover {
+  background: var(--color-light-link);
+  color: white;
+  border-color: var(--color-light-link);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+/* Collapsed State with Fade - ONLY for items with overflow */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  background: linear-gradient(to bottom, transparent 0%, var(--color-light-bg) 100%);
+  pointer-events: none;
+  opacity: 0;
+  animation: fadeInGradient 0.3s ease-out 0.1s forwards;
+}
+
+@keyframes fadeInGradient {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Hide fade when expanded */
+.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content.has-overflow::after {
+  opacity: 0;
+  animation: none;
+}
+
+/* Expand Button */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
+  content: 'Expand';
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--color-light-link);
+  color: #fff;
+  border: 1px solid var(--color-light-link);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  z-index: 10;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+  animation: fadeInButton 0.3s ease-out 0.2s forwards;
+}
+
+@keyframes fadeInButton {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -40%);
+  }
+  to {
+    opacity: 0.8;
+    transform: translate(-50%, -50%);
+  }
+}
+
+/* Hide button when expanded */
+.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content.has-overflow::before {
+  opacity: 0;
+  animation: none;
+}
+
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover::before {
+  opacity: 1;
+}
+
+/* Namespaces without overflow should not have pointer cursor on toggle */
+.api-index__entry:has(.api-namespace-content:not(.has-overflow)) .api-namespace-toggle {
+  cursor: default;
+}
+
+/* Disable all interaction with pills when collapsed */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a {
+  pointer-events: none;
+  cursor: default;
+}
+
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a:hover {
+  background: var(--color-light-bg-secondary) !important;
+  color: var(--color-light-text-secondary) !important;
+  border-color: var(--color-light-border) !important;
+  box-shadow: var(--shadow-sm) !important;
+  transform: none !important;
+}
+
+/* Enable interaction when expanded */
+.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content a {
+  pointer-events: auto;
+}
+
+/* When hovering over collapsed area */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
+.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+
+.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 767px) {
+  .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+    width: 100%;
+  }
+}
+
+/* API Documentation Page */
+.api-doc {
+  margin: var(--space-2xl) 0;
+}
+
+.api-doc-header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.api-doc-name {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-light-text-primary);
+}
+
+.api-doc-type {
+  font-size: var(--text-sm);
+  color: var(--color-light-text-secondary);
+  background: var(--color-light-surface);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-light-border);
+}
+
+.api-doc-description {
+  padding: 0 var(--space-lg);
+  color: var(--color-light-text-secondary);
+  line-height: var(--leading-relaxed);
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .site-navigation-title {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .site-navigation__entry a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .site-navigation__entry a:hover {
+  background: var(--color-dark-surface-hover);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .site-navigation__entry.active a {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .page-toc h2 {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .page-toc a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .page-toc a:hover {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc a.active {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .api-namespace-toggle {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .api-namespace-title {
+  color: var(--color-dark-text-accent);
+}
+
+.dark .api-namespace-toggle-text {
+  color: #bfa4ff;
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.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: #c2acf5;
+}
+
+.dark .api-namespace-icon {
+  color: #bfa4ff;
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-icon {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+  opacity: 1;
+  color: #c2acf5;
+}
+
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
+  background: linear-gradient(to bottom, 
+    transparent 0%, 
+    var(--color-dark-bg) 100%);
+}
+
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border: 1px solid var(--color-dark-text-accent);
+  box-shadow: none;
+}
+
+.dark .api-index__entry > ul a {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-secondary);
+  border-color: var(--color-dark-border);
+  box-shadow: var(--shadow-dark-sm);
+}
+
+.dark .api-index__entry > ul a:hover {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+  box-shadow: var(--shadow-dark-md);
+}
+
+/* Disable hover effects on pills when collapsed - Dark Mode */
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a:hover {
+  background: var(--color-dark-surface) !important;
+  color: var(--color-dark-text-secondary) !important;
+  border-color: var(--color-dark-border) !important;
+  box-shadow: var(--shadow-dark-sm) !important;
+  transform: none !important;
+}
+
diff --git a/css/components/blog.css b/css/components/blog.css
index b7531d9..b1420ab 100644
--- a/css/components/blog.css
+++ b/css/components/blog.css
@@ -1,11 +1,9 @@
-/* Blog intro text */
 .blog-intro {
   font-size: var(--text-lg);
   color: var(--color-light-text-secondary);
   margin-bottom: var(--space-2xl);
 }
 
-/* Blog post list */
 .post-list {
   list-style: none;
   padding: 0;
diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index 74bd2b1..8e433ce 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -1,7 +1,3 @@
-/* ============================================
-   DARK MODE - Global Styles
-   ============================================ */
-
 @media (prefers-color-scheme: dark) {
   :root {
     --color-bg: var(--color-dark-bg);
diff --git a/css/components/documentation.css b/css/components/documentation.css
index 422e75f..f837df9 100644
--- a/css/components/documentation.css
+++ b/css/components/documentation.css
@@ -1,529 +1,51 @@
-/* Documentation navigation in sidebar */
+/* Documentation Navigation */
 .docs-nav {
   padding: 0;
   margin: 0;
-}
-
-.docs-nav ul {
   list-style: none;
-  padding: 0;
-  margin: 0;
 }
 
 .docs-nav li {
-  margin: 0;
-  padding: 0;
-}
-
-.docs-nav li::before {
-  display: none;
-}
-
-.docs-nav > ul > li {
-  margin-bottom: var(--space-md);
-}
-
-.docs-nav a {
-  display: block;
-  padding: var(--space-sm) var(--space-md);
-  color: var(--color-light-text-secondary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-  position: relative;
-}
-
-.docs-nav a::after {
-  display: none;
-}
-
-.docs-nav a:hover {
-  color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-  transform: translateX(4px);
-}
-
-.docs-nav a.active,
-.docs-nav a[aria-current='page'] {
-  color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-  font-weight: 600;
-  border-left: 3px solid var(--color-light-link);
-  padding-left: calc(var(--space-md) - 3px);
-}
-
-/* Nested navigation */
-.docs-nav ul ul {
-  margin-top: var(--space-sm);
-  margin-left: var(--space-md);
-  padding-left: var(--space-md);
-  border-left: 1px solid var(--color-light-border);
-}
-
-.docs-nav ul ul a {
-  font-size: var(--text-xs);
-  padding: var(--space-xs) var(--space-sm);
-}
-
-/* Documentation section headers */
-.docs-nav > ul > li > span {
-  display: block;
-  padding: var(--space-sm) var(--space-md);
-  color: var(--color-gray-base);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  margin-bottom: var(--space-xs);
-}
-
-/* Table of contents */
-.page-toc {
-  display: none;
-  margin-bottom: var(--space-2xl);
-  padding-bottom: var(--space-xl);
-  border-bottom: 2px solid var(--color-light-border);
-}
-
-@media (min-width: 1040px) {
-  .page-toc {
-    display: block;
-  }
-}
-
-.page-toc h2 {
-  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;
-}
-
-.page-toc ul {
   list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.page-toc li {
   margin: 0;
   padding: 0;
 }
 
-.page-toc li::before {
-  display: none;
-}
-
-.page-toc a {
-  display: block;
-  padding: var(--space-xs) var(--space-sm);
-  color: var(--color-light-text-secondary);
-  font-size: var(--text-sm);
-  line-height: 1.6;
-  text-decoration: none;
-  border-radius: var(--radius-sm);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.page-toc a::after {
+.docs-nav li::before {
   display: none;
 }
 
-.page-toc a:hover {
-  color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-}
-
-.page-toc a.active {
-  color: var(--color-light-link);
-  font-weight: 600;
-  background: var(--color-light-surface-hover);
-}
-
-.page-toc ul ul {
-  margin-left: var(--space-md);
-  margin-top: var(--space-xs);
-}
-
-.page-toc ul ul a {
-  font-size: var(--text-xs);
-}
-
-/* Custom scrollbar for TOC */
-.page-toc::-webkit-scrollbar {
-  width: 4px;
-}
-
-.page-toc::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.page-toc::-webkit-scrollbar-thumb {
-  background: var(--color-light-border);
-  border-radius: var(--radius-full);
-}
-
-/* API Index - Pill Style */
-.api-index {
-  list-style: none;
-  padding: 0;
-  margin: var(--space-2xl) 0;
-  width: 100%;
-  max-width: 100%;
-}
-
-@media (max-width: 767px) {
-  .api-index {
-    padding: 0;
-    margin: var(--space-xl) 0;
-    max-width: 100%;
-  }
-}
-
-.api-index__entry {
-  margin: var(--space-3xl) 0;
-  padding: 0;
-  width: 100%;
+/* Documentation Content */
+.documentation-content {
   max-width: 100%;
 }
 
-@media (max-width: 767px) {
-  .api-index__entry {
-    margin: var(--space-xl) 0;
-    max-width: 100%;
-  }
-}
-
-.api-index__entry::before {
-  display: none;
+.documentation-content h1 {
+  font-size: var(--text-3xl);
+  margin-bottom: var(--space-xl);
 }
 
-.api-namespace-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: default;
-  text-align: left;
-  transition: all var(--duration-fast) var(--ease-out);
-  border-bottom: 2px solid var(--color-light-border);
-  padding-bottom: var(--space-sm);
-  margin-bottom: var(--space-lg);
-}
-
-/* Only make it interactive when there's overflow */
-.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle {
-  cursor: pointer;
-}
-
-.api-namespace-title {
+.documentation-content h2 {
   font-size: var(--text-2xl);
-  font-weight: 600;
-  color: var(--color-light-link);
-  margin: 0;
-  padding: 0;
-  letter-spacing: -0.02em;
-  line-height: 1;
-}
-
-.api-namespace-toggle-indicator {
-  display: none;
-  align-items: flex-end;
-  gap: var(--space-sm);
-  flex-shrink: 0;
-}
-
-/* Only show indicator when there's overflow */
-.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle-indicator {
-  display: flex;
-}
-
-.api-namespace-toggle-text {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-phel-primary);
-  opacity: 0.8;
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-.api-namespace-toggle:hover .api-namespace-toggle-text {
-  opacity: 1;
-  color: var(--color-phel-primary);
-}
-
-/* When hovering over collapsed area, highlight the toggle text */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
-.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
-  opacity: 1;
-  color: var(--color-phel-primary);
-}
-
-/* Update text content based on state */
-.api-namespace-toggle[aria-expanded="true"] .api-namespace-toggle-text::before {
-  content: "Show less";
-}
-
-.api-namespace-toggle[aria-expanded="false"] .api-namespace-toggle-text::before {
-  content: "Show all";
-}
-
-.api-namespace-icon {
-  flex-shrink: 0;
-  color: var(--color-phel-primary);
-  transition: transform var(--duration-normal) var(--ease-out);
-  opacity: 0.8;
-  width: 24px;
-  height: 24px;
-}
-
-.api-namespace-toggle:hover .api-namespace-icon {
-  opacity: 1;
-  color: var(--color-phel-primary);
-}
-
-/* When hovering over collapsed area, highlight the icon */
-.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
-  opacity: 1;
-  color: var(--color-phel-primary);
-}
-
-/* Collapsed (closed) = chevron down (V), Expanded (open) = chevron up (^) */
-.api-namespace-toggle[aria-expanded="true"] .api-namespace-icon {
-  transform: rotate(180deg);
-}
-
-.api-namespace-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  max-height: 5000px;
-  overflow: visible;
-  transition: max-height var(--duration-normal) var(--ease-out);
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-@media (max-width: 767px) {
-  .api-namespace-content {
-    gap: var(--space-xs);
-    max-width: 100%;
-    padding: 0;
-  }
-  
-  .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
-    width: 100%;
-  }
-}
-
-/* Collapsed state - show preview with fade */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content {
-  max-height: 160px;
-  overflow: hidden;
+  margin-top: var(--space-2xl);
   margin-bottom: var(--space-lg);
+  padding-bottom: var(--space-sm);
+  border-bottom: 2px solid var(--color-light-border);
 }
 
-/* Make entire collapsed area clickable */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
-  cursor: pointer;
-  border-radius: var(--radius-lg);
-  width: calc(100% + var(--space-md) * 2);
-}
-
-/* Disable pill interactions when collapsed and has overflow */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a {
-  pointer-events: none;
-  cursor: pointer;
-}
-
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 120px;
-  background: linear-gradient(to bottom, 
-    transparent 0%, 
-    var(--color-light-bg) 100%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-/* Only show fade when content is taller than max-height */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::after {
-  opacity: 1;
-}
-
-/* Expand overlay for collapsed sections with overflow */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
-  content: 'Expand';
-  position: absolute;
-  top: 65%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: var(--space-sm) var(--space-lg);
-  background: var(--color-light-link);
-  color: white;
-  border: 1px solid var(--color-light-link);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  box-shadow: none;
-  opacity: 0.8;
-  pointer-events: none;
-  transition: opacity var(--duration-normal) var(--ease-in);
-  z-index: 10;
-}
-
-/* Expanded state - show all */
-.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content {
-  max-height: 5000px;
-}
-
-.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content::after {
-  display: none;
-}
-
-.api-index__entry > ul li {
-  margin: 0;
-  padding: 0;
-}
-
-.api-index__entry > ul li::before {
-  display: none;
-}
-
-.api-index__entry > ul a {
-  display: inline-block;
-  padding: var(--space-xs) var(--space-md);
-  background: var(--color-light-bg-secondary);
-  color: var(--color-light-text-secondary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-lg);
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-  box-shadow: var(--shadow-xs);
-  max-width: 100%;
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
-.api-index__entry > ul a::after {
-  display: none;
-}
-
-.api-index__entry > ul a:hover {
-  background: var(--color-light-link);
-  color: white;
-  border-color: var(--color-light-link);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-/* Mobile-specific pill constraints */
-@media (max-width: 767px) {
-  .api-index__entry > ul a {
-    padding: var(--space-xs) var(--space-sm);
-    font-size: 0.75rem;
-    max-width: 100%;
-    flex-shrink: 1;
-    min-width: 0;
-  }
-}
-
-/* Documentation content enhancements */
-.documentation-content {
-  font-size: var(--text-body);
-  line-height: var(--leading-relaxed);
-}
-
-/* Exercise Solution Toggle */
-.solution {
-  margin: var(--space-xl) 0;
-}
-
-.solution input[type="checkbox"] {
-  display: none;
-}
-
-.solution label {
-  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);
-  font-weight: 600;
-  transition: all var(--duration-fast) var(--ease-out);
+.documentation-content h3 {
+  font-size: var(--text-xl);
+  margin-top: var(--space-xl);
   margin-bottom: var(--space-md);
 }
 
-.solution label:hover {
-  border-color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-}
-
-/* Hide solution content by default */
-.solution input[type="checkbox"] ~ * {
-  display: none;
-}
-
-.solution input[type="checkbox"] ~ label {
-  display: inline-block;
-}
-
-/* Show solution when checkbox is checked */
-.solution input[type="checkbox"]:checked ~ * {
-  display: block;
-}
-
-.solution input[type="checkbox"]:checked ~ label {
-  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';
-}
-
-.solution input[type="checkbox"]:not(:checked) ~ label::before {
-  content: '→ Show solution';
-}
-
-/* Remove default label text */
-.solution label {
-  font-size: 0;
-}
-
-.solution label::before {
-  font-size: var(--text-sm);
-}
-
-/* Add space between heading text and anchor link */
+/* Anchor Links */
 .zola-anchor {
   margin-left: var(--space-sm);
-  color: var(--color-light-anchor);
   opacity: 0;
+  color: var(--color-light-anchor);
+  text-decoration: none;
+  font-weight: 400;
   transition: opacity var(--duration-fast) var(--ease-out);
 }
 
@@ -536,134 +58,18 @@ h6:hover .zola-anchor {
   opacity: 1;
 }
 
-/* API documentation specific */
-.api-doc {
-  margin: var(--space-2xl) 0;
-}
-
-.api-doc-header {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  background: var(--color-light-bg-secondary);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--space-md);
-}
-
-.api-doc-name {
-  font-family: var(--font-mono);
-  font-size: var(--text-lg);
-  font-weight: 700;
+.zola-anchor:hover {
   color: var(--color-light-link);
 }
 
-.api-doc-type {
-  padding: var(--space-xs) var(--space-sm);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  background: var(--color-light-surface-hover);
-  color: var(--color-light-link);
-  border-radius: var(--radius-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.api-doc-description {
-  padding: 0 var(--space-lg);
-  color: var(--color-light-text-secondary);
-  line-height: var(--leading-relaxed);
-}
-
 /* ========================================
    DARK MODE
    ======================================== */
 
-.dark .api-namespace-toggle {
+.dark .documentation-content h2 {
   border-bottom-color: var(--color-dark-border);
 }
 
-.dark .api-namespace-title {
-  color: var(--color-dark-text-accent);
-}
-
-.dark .api-namespace-toggle-text {
-  color: #bfa4ff;
-  opacity: 0.8;
-}
-
-.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
-  opacity: 1;
-  color: #c2acf5;
-}
-
-.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: #c2acf5;
-}
-
-.dark .api-namespace-icon {
-  color: #bfa4ff;
-  opacity: 0.8;
-}
-
-.dark .api-namespace-toggle:hover .api-namespace-icon {
-  opacity: 1;
-  color: #c2acf5;
-}
-
-.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
-  opacity: 1;
-  color: #c2acf5;
-}
-
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
-  background: linear-gradient(to bottom, 
-    transparent 0%, 
-    var(--color-dark-bg) 100%);
-}
-
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border: 1px solid var(--color-dark-text-accent);
-  box-shadow: none;
-}
-
-.dark .api-index__entry > ul a {
-  background: var(--color-dark-surface);
-  color: var(--color-dark-text-secondary);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .api-index__entry > ul a:hover {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-  box-shadow: var(--shadow-dark-md);
-}
-
-.dark .solution label {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .solution label:hover {
-  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-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-}
-
 .dark .zola-anchor,
 .dark .zola-anchor:hover {
   color: var(--color-dark-anchor);
diff --git a/css/components/exercises.css b/css/components/exercises.css
new file mode 100644
index 0000000..78f1c99
--- /dev/null
+++ b/css/components/exercises.css
@@ -0,0 +1,76 @@
+.solution {
+  margin: var(--space-xl) 0;
+}
+
+.solution input[type="checkbox"] {
+  display: none;
+}
+
+.solution label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-light-surface);
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-light-text-primary);
+  transition: all var(--duration-fast) var(--ease-out);
+  user-select: none;
+}
+
+.solution label::before {
+  content: '→ Show solution';
+}
+
+.solution label:hover {
+  background: var(--color-light-surface-hover);
+  border-color: var(--color-light-link);
+  color: var(--color-light-link);
+}
+
+.solution input[type="checkbox"]:checked ~ label {
+  background: var(--color-light-link);
+  color: white;
+  border-color: var(--color-light-link);
+}
+
+.solution input[type="checkbox"]:checked ~ label::before {
+  content: '← Hide solution';
+}
+
+.solution .solution-content {
+  display: none;
+}
+
+.solution input[type="checkbox"]:checked ~ .solution-content {
+  display: block;
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .solution label {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .solution label:hover {
+  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-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+}
+
diff --git a/css/components/footer.css b/css/components/footer.css
index 3bf02e5..c806a17 100644
--- a/css/components/footer.css
+++ b/css/components/footer.css
@@ -1,4 +1,3 @@
-/* Footer Styles */
 .site-footer {
   background: var(--color-light-bg-secondary);
   border-top: 1px solid var(--color-light-border);
diff --git a/css/components/header.css b/css/components/header.css
index f6ab0c1..0e89c6c 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -203,153 +203,6 @@
   }
 }
 
-/* ========================================
-   SEARCH
-   ======================================== */
-
-.site-header__search {
-  position: relative;
-  margin-left: auto;
-  flex: 1;
-  max-width: 370px;
-  transition: max-width var(--duration-normal) var(--ease-out);
-}
-
-@media (min-width: 1040px) {
-  .site-header__search:focus-within {
-    max-width: 600px;
-  }
-}
-
-#search {
-  width: 100%;
-  padding: var(--space-sm) var(--space-md);
-  padding-left: 36px;
-  font-size: var(--text-sm);
-  font-family: var(--font-primary);
-  color: var(--color-light-text-primary);
-  background-color: var(--color-light-bg-secondary);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-full);
-  outline: none;
-  transition: all var(--duration-normal) var(--ease-out);
-  box-shadow: var(--shadow-xs);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: 10px center;
-  background-size: 16px;
-}
-
-#search:hover {
-  border-color: var(--color-light-link);
-  box-shadow: var(--shadow-sm);
-}
-
-#search:focus {
-  border-color: var(--color-light-link);
-  background-color: var(--color-light-surface);
-  box-shadow: 0 0 0 3px var(--color-light-surface-hover),
-              var(--shadow-md);
-}
-
-#search::placeholder {
-  color: var(--color-gray-light);
-}
-
-/* Custom clear button for search input */
-#search::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 18px;
-  width: 18px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
-  background-size: 18px 18px;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-#search::-webkit-search-cancel-button:hover {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
-  opacity: 1;
-}
-
-/* Mobile search adjustments */
-@media (max-width: 1039px) {
-  .site-header__search {
-    flex: 0 0 auto;
-    width: 50%;
-    min-width: 180px;
-    max-width: 360px;
-    transition: all var(--duration-normal) var(--ease-out);
-  }
-
-  #search {
-    font-size: max(var(--text-sm), 16px);
-    padding: var(--space-sm) var(--space-md);
-    padding-left: 36px;
-    background-size: 16px;
-    background-position: 10px center;
-    width: 100%;
-    border: 1px solid var(--color-light-border);
-    transition: all var(--duration-normal) var(--ease-out);
-  }
-
-  #search::placeholder {
-    opacity: 1;
-    transition: opacity var(--duration-fast) var(--ease-out);
-  }
-
-  /* When search is expanded on mobile, hide other elements */
-  .site-header__container.search-expanded {
-    gap: 0;
-    padding-left: var(--space-md);
-    padding-right: var(--space-md);
-  }
-
-  .site-header__container.search-expanded .mobile-menu-toggle,
-  .site-header__container.search-expanded .site-header__logo {
-    opacity: 0;
-    pointer-events: none;
-    width: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    transition: all var(--duration-normal) var(--ease-out);
-  }
-
-  .site-header__container.search-expanded .site-header__search {
-    flex: 1 1 100%;
-    width: 100%;
-    max-width: none;
-    margin: 0;
-  }
-
-  .site-header__container.search-expanded #search {
-    width: 100%;
-    border-color: var(--color-light-link);
-    animation: expandSearch var(--duration-normal) var(--ease-out);
-  }
-
-  .site-header__container.search-expanded #search::placeholder {
-    opacity: 1;
-  }
-}
-
-@keyframes expandSearch {
-  from {
-    transform: scale(0.95);
-    opacity: 0.8;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 /* ========================================
    DESKTOP ACTIONS (Dark Mode, Social)
    ======================================== */
diff --git a/css/components/features.css b/css/components/homepage.css
similarity index 99%
rename from css/components/features.css
rename to css/components/homepage.css
index 2f18de8..237511f 100644
--- a/css/components/features.css
+++ b/css/components/homepage.css
@@ -1,4 +1,4 @@
-/* Homepage Content */
+/* Homepage Content Container */
 .homepage-content h1 {
   font-size: 2.5rem;
   font-weight: 800;
diff --git a/css/components/navigation.css b/css/components/navigation.css
index e4ceb53..17e9f17 100644
--- a/css/components/navigation.css
+++ b/css/components/navigation.css
@@ -23,110 +23,3 @@
     display: none;
   }
 }
-
-/* Site Navigation (sidebar) */
-.site-navigation-title {
-  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;
-}
-
-@media (min-width: 1040px) {
-  .site-navigation-title {
-    margin-top: 0;
-  }
-}
-
-.site-navigation {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.site-navigation li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.site-navigation li::before {
-  display: none;
-}
-
-.site-navigation__entry {
-  margin: var(--space-xs) 0;
-}
-
-.site-navigation__entry a {
-  display: block;
-  padding: var(--space-sm) var(--space-md);
-  color: var(--color-light-text-secondary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.site-navigation__entry a::after {
-  display: none;
-}
-
-.site-navigation__entry a:hover {
-  color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-}
-
-.site-navigation__entry.active a {
-  color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-  font-weight: 600;
-}
-
-/* ========================================
-   DARK MODE
-   ======================================== */
-
-.dark .site-navigation-title {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .site-navigation__entry a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .site-navigation__entry a:hover {
-  background: var(--color-dark-surface-hover);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .site-navigation__entry.active a {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-.dark .page-toc {
-  border-bottom-color: var(--color-dark-border);
-}
-
-.dark .page-toc h2 {
-  color: var(--color-dark-text-primary);
-}
-
-.dark .page-toc a {
-  color: var(--color-dark-text-secondary);
-}
-
-.dark .page-toc a:hover {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-.dark .page-toc a.active {
-  color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
diff --git a/css/components/search.css b/css/components/search.css
index c36a9e2..4e87045 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -1,3 +1,146 @@
+.site-header__search {
+  position: relative;
+  margin-left: auto;
+  flex: 1;
+  max-width: 370px;
+  transition: max-width var(--duration-normal) var(--ease-out);
+}
+
+@media (min-width: 1040px) {
+  .site-header__search:focus-within {
+    max-width: 600px;
+  }
+}
+
+#search {
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  padding-left: 36px;
+  font-size: var(--text-sm);
+  font-family: var(--font-primary);
+  color: var(--color-light-text-primary);
+  background-color: var(--color-light-bg-secondary);
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--radius-full);
+  outline: none;
+  transition: all var(--duration-normal) var(--ease-out);
+  box-shadow: var(--shadow-xs);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  background-size: 16px;
+}
+
+#search:hover {
+  border-color: var(--color-light-link);
+  box-shadow: var(--shadow-sm);
+}
+
+#search:focus {
+  border-color: var(--color-light-link);
+  background-color: var(--color-light-surface);
+  box-shadow: 0 0 0 3px var(--color-light-surface-hover),
+              var(--shadow-md);
+}
+
+#search::placeholder {
+  color: var(--color-gray-light);
+}
+
+/* Custom clear button for search input */
+#search::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 18px;
+  width: 18px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+#search::-webkit-search-cancel-button:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+  opacity: 1;
+}
+
+/* Mobile search adjustments */
+@media (max-width: 1039px) {
+  .site-header__search {
+    flex: 0 0 auto;
+    width: 50%;
+    min-width: 180px;
+    max-width: 360px;
+    transition: all var(--duration-normal) var(--ease-out);
+  }
+
+  #search {
+    font-size: max(var(--text-sm), 16px);
+    padding: var(--space-sm) var(--space-md);
+    padding-left: 36px;
+    background-size: 16px;
+    background-position: 10px center;
+    width: 100%;
+    border: 1px solid var(--color-light-border);
+    transition: all var(--duration-normal) var(--ease-out);
+  }
+
+  #search::placeholder {
+    opacity: 1;
+    transition: opacity var(--duration-fast) var(--ease-out);
+  }
+
+  /* When search is expanded on mobile, hide other elements */
+  .site-header__container.search-expanded {
+    gap: 0;
+    padding-left: var(--space-md);
+    padding-right: var(--space-md);
+  }
+
+  .site-header__container.search-expanded .mobile-menu-toggle,
+  .site-header__container.search-expanded .site-header__logo {
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    transition: all var(--duration-normal) var(--ease-out);
+  }
+
+  .site-header__container.search-expanded .site-header__search {
+    flex: 1 1 100%;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .site-header__container.search-expanded #search {
+    width: 100%;
+    border-color: var(--color-light-link);
+    animation: expandSearch var(--duration-normal) var(--ease-out);
+  }
+
+  .site-header__container.search-expanded #search::placeholder {
+    opacity: 1;
+  }
+}
+
+@keyframes expandSearch {
+  from {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 /* Search results dropdown with glassmorphism */
 .search-results {
   position: absolute;
@@ -246,7 +389,7 @@
    ======================================== */
 
 .dark #search {
-  background-color: var(--color-dark-bg-secondary);
+  background-color: #1d232f;
   color: var(--color-dark-text-primary);
   border-color: #3a3a3a;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
diff --git a/css/components/sidebar.css b/css/components/sidebar.css
new file mode 100644
index 0000000..af0d6ce
--- /dev/null
+++ b/css/components/sidebar.css
@@ -0,0 +1,180 @@
+/* Sidebar Title */
+.site-navigation-title {
+  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;
+}
+
+@media (min-width: 1040px) {
+  .site-navigation-title {
+    margin-top: 0;
+  }
+}
+
+/* Site Navigation */
+.site-navigation {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.site-navigation li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.site-navigation li::before {
+  display: none;
+}
+
+.site-navigation__entry {
+  margin: var(--space-xs) 0;
+}
+
+.site-navigation__entry a {
+  display: block;
+  padding: var(--space-sm) var(--space-md);
+  color: var(--color-light-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.site-navigation__entry a::after {
+  display: none;
+}
+
+.site-navigation__entry a:hover {
+  color: var(--color-light-link);
+  background: var(--color-light-surface-hover);
+}
+
+.site-navigation__entry.active a {
+  color: var(--color-light-link);
+  background: var(--color-light-surface-hover);
+  font-weight: 600;
+}
+
+/* Page TOC */
+.page-toc {
+  display: none;
+  margin-bottom: var(--space-2xl);
+  padding-bottom: var(--space-lg);
+  border-bottom: 2px solid var(--color-light-border);
+}
+
+@media (min-width: 1040px) {
+  .page-toc {
+    display: block;
+  }
+}
+
+.page-toc h2 {
+  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;
+}
+
+.page-toc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.page-toc li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.page-toc li::before {
+  display: none;
+}
+
+.page-toc a {
+  display: block;
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--text-sm);
+  color: var(--color-light-text-secondary);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.page-toc a::after {
+  display: none;
+}
+
+.page-toc a:hover {
+  color: var(--color-light-link);
+  background: var(--color-light-surface-hover);
+}
+
+.page-toc a.active {
+  color: var(--color-light-link);
+  background: var(--color-light-surface-hover);
+  font-weight: 600;
+}
+
+.page-toc ul ul {
+  margin-left: var(--space-md);
+}
+
+.page-toc ul ul a {
+  font-size: var(--text-xs);
+  padding-left: var(--space-sm);
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .site-navigation-title {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .site-navigation__entry a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .site-navigation__entry a:hover {
+  background: var(--color-dark-surface-hover);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .site-navigation__entry.active a {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .page-toc h2 {
+  color: var(--color-dark-text-primary);
+}
+
+.dark .page-toc a {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .page-toc a:hover {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
+.dark .page-toc a.active {
+  color: var(--color-dark-text-accent);
+  background: var(--color-dark-surface-hover);
+}
+
diff --git a/css/theme.css b/css/theme.css
index 452f0d5..e8d5260 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -80,7 +80,6 @@
 
   /* Modern Typography */
   --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
   --font-inter: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
 
diff --git a/scripts/concat-tailwind.js b/scripts/concat-tailwind.js
index 19209de..8205038 100644
--- a/scripts/concat-tailwind.js
+++ b/scripts/concat-tailwind.js
@@ -6,17 +6,29 @@ const outFile = path.join(projectRoot, 'css', 'tailwind.entry.css');
 
 // Define concatenation order (top → bottom)
 const parts = [
+  // 1. Foundation
   'css/theme.css',
   'css/base.css',
-  'css/components/footer.css',
+  
+  // 2. Layout & Structure
+  'css/components/layout.css',
   'css/components/header.css',
+  'css/components/footer.css',
   'css/components/navigation.css',
-  'css/components/layout.css',
-  'css/components/search.css',
-  'css/components/documentation.css',
+  'css/components/sidebar.css',
+  
+  // 3. Pages
+  'css/components/homepage.css',
   'css/components/blog.css',
-  'css/components/features.css',
+  'css/components/documentation.css',
+  'css/components/api.css',
+  'css/components/exercises.css',
+  
+  // 4. Features
+  'css/components/search.css',
   'css/components/code-block.css',
+  
+  // 5. Dark Mode (last to override)
   'css/components/dark-mode.css',
 ];
 
diff --git a/static/api-accordion.js b/static/api-accordion.js
index 2e3705d..d054d3c 100644
--- a/static/api-accordion.js
+++ b/static/api-accordion.js
@@ -5,10 +5,20 @@ document.addEventListener('DOMContentLoaded', function() {
   toggleButtons.forEach(function(button) {
     // Check if content has overflow
     const content = button.nextElementSibling;
+    const toggleText = button.querySelector('.api-namespace-toggle-text');
+    
     if (content && content.classList.contains('api-namespace-content')) {
       // Check if content height exceeds the collapsed max-height (160px)
       if (content.scrollHeight > 160) {
         content.classList.add('has-overflow');
+        
+        // Set initial text based on aria-expanded state
+        updateToggleText(button, toggleText);
+      } else {
+        // Hide toggle text if no overflow
+        if (toggleText) {
+          toggleText.style.display = 'none';
+        }
       }
       
       // Click on content area when collapsed expands it
@@ -17,15 +27,28 @@ document.addEventListener('DOMContentLoaded', function() {
         if (isCollapsed && content.classList.contains('has-overflow')) {
           e.preventDefault();
           button.setAttribute('aria-expanded', 'true');
+          updateToggleText(button, toggleText);
         }
       });
     }
     
-    // Toggle functionality on button click
+    // Toggle functionality on button click - ONLY for items with overflow
     button.addEventListener('click', function() {
-      const isExpanded = this.getAttribute('aria-expanded') === 'true';
-      this.setAttribute('aria-expanded', !isExpanded);
+      const content = this.nextElementSibling;
+      if (content && content.classList.contains('has-overflow')) {
+        const isExpanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', !isExpanded);
+        updateToggleText(this, toggleText);
+      }
     });
   });
+  
+  // Helper function to update toggle text
+  function updateToggleText(button, toggleText) {
+    if (!toggleText) return;
+    
+    const isExpanded = button.getAttribute('aria-expanded') === 'true';
+    toggleText.textContent = isExpanded ? 'Show less' : 'Show all';
+  }
 });
 
diff --git a/templates/shortcodes/solution.html b/templates/shortcodes/solution.html
index 943e0b1..848c937 100644
--- a/templates/shortcodes/solution.html
+++ b/templates/shortcodes/solution.html
@@ -1,5 +1,7 @@
 <div class="solution">
-    <input type="checkbox" style="display: none" id="cb{{ nth }}">
-    <label for="cb{{ nth }}">→ Show solution</label>
-    {{ body | markdown | safe }}
+    <input type="checkbox" id="cb{{ nth }}">
+    <label for="cb{{ nth }}"></label>
+    <div class="solution-content">
+        {{ body | markdown | safe }}
+    </div>
 </div>

From e7594af01631bcd5943fc86cdcc64b376726587b Mon Sep 17 00:00:00 2001
From: JesusValera <jesus1902@outlook.com>
Date: Sun, 5 Oct 2025 18:14:01 +0200
Subject: [PATCH 4/4] Use BEM for CSS

---
 content/_index.md                         |   8 +-
 css/base.css                              |   1 -
 css/components/animations.css             |  49 ++++
 css/components/api.css                    | 106 ++++---
 css/components/blog.css                   |  54 +---
 css/components/code-block.css             |   4 +-
 css/components/exercises.css              |  56 +---
 css/components/header.css                 |  81 +++---
 css/components/homepage.css               |  50 +---
 css/components/layout.css                 |  89 +-----
 css/components/navigation.css             |   7 -
 css/components/search.css                 |  44 +--
 css/components/sidebar.css                |   8 +-
 css/components/utilities.css              | 319 ++++++++++++++++++++++
 css/theme.css                             |  27 +-
 scripts/concat-tailwind.js                |   6 +-
 static/api-accordion.js                   |   6 +-
 static/mobile-menu.js                     |   2 +-
 static/search.js                          |   8 +-
 templates/blog-entry.html                 |   8 +-
 templates/blog.html                       |   4 +-
 templates/header.html                     |  22 +-
 templates/index.html                      |   1 -
 templates/navigation/site-navigation.html |   2 +-
 templates/navigation/top-navigation.html  |   6 -
 templates/page-api.html                   |  12 +-
 templates/shortcodes/solution.html        |   2 +-
 27 files changed, 564 insertions(+), 418 deletions(-)
 create mode 100644 css/components/animations.css
 create mode 100644 css/components/utilities.css

diff --git a/content/_index.md b/content/_index.md
index 6a33080..8e7cd7f 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,16 +2,16 @@
 title = "Phel: A Functional Lisp Dialect for PHP Developers"
 +++
 
-**Phel** is a functional programming language that compiles down to PHP. It's a modern Lisp dialect inspired by [Clojure](https://clojure.org/) and [Janet](https://janet-lang.org/), tailored to bring functional elegance and expressive code to the world of PHP development.
+<img src="/images/logo_phel.svg" width="380" alt="Phel language logo"/>
 
-<img src="/images/logo_phel.svg" width="450" alt="Phel language logo"/>
+**Phel** is a functional programming language that compiles to PHP — a modern Lisp dialect inspired by [Clojure](https://clojure.org/) and [Janet](https://janet-lang.org/), bringing functional elegance and expressive code to PHP development.
 
 <div class="homepage-cta">
-  <a href="#try-phel-instantly-with-docker" class="homepage-cta-button homepage-cta-primary">
+  <a href="#try-phel-instantly-with-docker" class="btn btn-primary homepage-cta-button homepage-cta-primary">
     <svg class="homepage-cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     Try Phel with Docker
   </a>
-  <a href="/documentation/getting-started" class="homepage-cta-button homepage-cta-secondary">
+  <a href="/documentation/getting-started" class="btn btn-secondary homepage-cta-button homepage-cta-secondary">
     <svg class="homepage-cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
     Read Documentation
   </a>
diff --git a/css/base.css b/css/base.css
index 9645ca2..bfcc8f3 100644
--- a/css/base.css
+++ b/css/base.css
@@ -33,7 +33,6 @@ body {
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: var(--font-primary);
   background-color: var(--color-light-bg);
   color: var(--color-light-text-primary);
   font-size: var(--font-size);
diff --git a/css/components/animations.css b/css/components/animations.css
new file mode 100644
index 0000000..35afac7
--- /dev/null
+++ b/css/components/animations.css
@@ -0,0 +1,49 @@
+/* ========================================
+   ANIMATIONS
+   Global keyframe animations
+   ======================================== */
+
+/* Fade animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Slide animations */
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scale animations */
+@keyframes expandSearch {
+  from {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/css/components/api.css b/css/components/api.css
index fd54b3a..663ba41 100644
--- a/css/components/api.css
+++ b/css/components/api.css
@@ -22,7 +22,7 @@
 }
 
 /* API Namespace Toggle */
-.api-namespace-toggle {
+.api-namespace__toggle {
   align-items: flex-end;
   background: 0 0;
   border: none;
@@ -30,14 +30,13 @@
   cursor: default;
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--space-lg);
   padding: 0 0 var(--space-sm);
   text-align: left;
   transition: all var(--duration-fast) var(--ease-out);
   width: 100%;
 }
 
-.api-namespace-title {
+.api-namespace__title {
   color: var(--color-light-link);
   font-size: var(--text-2xl);
   font-weight: 600;
@@ -47,7 +46,7 @@
   padding: 0;
 }
 
-.api-namespace-toggle-indicator {
+.api-namespace__toggle-indicator {
   align-items: flex-end;
   display: flex;
   flex-direction: row;
@@ -56,47 +55,44 @@
 }
 
 /* Hide indicator for namespaces without overflow */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content:not(.has-overflow) ~ * .api-namespace-toggle-indicator,
-.api-index__entry:has(.api-namespace-content:not(.has-overflow)) .api-namespace-toggle-indicator {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content:not(.has-overflow) ~ * .api-namespace__toggle-indicator,
+.api-index__entry:has(.api-namespace__content:not(.has-overflow)) .api-namespace__toggle-indicator {
   display: none;
 }
 
-.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle {
+.api-index__entry:has(.api-namespace__content.has-overflow) .api-namespace__toggle {
   cursor: pointer;
 }
 
-.api-namespace-toggle-text {
-  color: var(--color-phel-primary);
+.api-namespace__toggle-text {
+  color: var(--color-light-link);
   opacity: 0.8;
   font-size: var(--text-sm);
   font-weight: 600;
   transition: opacity var(--duration-fast) var(--ease-out);
 }
 
-.api-namespace-icon {
-  color: var(--color-phel-primary);
+.api-namespace__icon {
+  color: var(--color-light-link);
   flex-shrink: 0;
-  height: 24px;
+  height: 18px;
   opacity: .8;
   transition: transform var(--duration-normal) var(--ease-out);
-  width: 24px;
+  width: 18px;
 }
 
-.api-namespace-toggle:hover .api-namespace-toggle-text {
-  opacity: 1;
-  color: var(--color-phel-primary);
-}
-.api-namespace-toggle:hover .api-namespace-icon {
+.api-namespace__toggle:hover .api-namespace__toggle-text,
+.api-namespace__toggle:hover .api-namespace__icon {
   opacity: 1;
-  color: var(--color-phel-primary);
+  color: var(--color-light-link);
 }
 
-.api-namespace-toggle[aria-expanded="true"] .api-namespace-icon {
+.api-namespace__toggle[aria-expanded="true"] .api-namespace__icon {
   transform: rotate(180deg);
 }
 
 /* API Namespace Content */
-.api-namespace-content {
+.api-namespace__content {
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -115,13 +111,13 @@
 }
 
 /* Only collapse if has overflow */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content {
   margin-bottom: var(--space-lg);
   max-height: 160px;
   overflow: hidden;
 }
 
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow {
   border-radius: var(--radius-lg);
   cursor: pointer;
   width: calc(100% + var(--space-md) * 2);
@@ -129,12 +125,12 @@
 
 /* Pills Container */
 .api-index__entry > ul {
+  margin-bottom: var(--space-lg);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
   list-style: none;
   padding: var(--space-lg) 0;
-  margin: 0;
 }
 
 .api-index__entry > ul li {
@@ -168,7 +164,7 @@
 }
 
 /* Collapsed State with Fade - ONLY for items with overflow */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::after {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -191,13 +187,13 @@
 }
 
 /* Hide fade when expanded */
-.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content.has-overflow::after {
+.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content.has-overflow::after {
   opacity: 0;
   animation: none;
 }
 
 /* Expand Button */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::before {
   content: 'Expand';
   position: absolute;
   top: 65%;
@@ -229,27 +225,27 @@
 }
 
 /* Hide button when expanded */
-.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content.has-overflow::before {
+.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content.has-overflow::before {
   opacity: 0;
   animation: none;
 }
 
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover::before {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow:hover::before {
   opacity: 1;
 }
 
 /* Namespaces without overflow should not have pointer cursor on toggle */
-.api-index__entry:has(.api-namespace-content:not(.has-overflow)) .api-namespace-toggle {
+.api-index__entry:has(.api-namespace__content:not(.has-overflow)) .api-namespace__toggle {
   cursor: default;
 }
 
 /* Disable all interaction with pills when collapsed */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a {
   pointer-events: none;
   cursor: default;
 }
 
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a:hover {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a:hover {
   background: var(--color-light-bg-secondary) !important;
   color: var(--color-light-text-secondary) !important;
   border-color: var(--color-light-border) !important;
@@ -258,25 +254,25 @@
 }
 
 /* Enable interaction when expanded */
-.api-namespace-toggle[aria-expanded="true"] + .api-namespace-content a {
+.api-namespace__toggle[aria-expanded="true"] + .api-namespace__content a {
   pointer-events: auto;
 }
 
 /* When hovering over collapsed area */
-.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
-.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
+.api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow:hover ~ .api-namespace__toggle .api-namespace__toggle-text,
+.api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__toggle-text {
   opacity: 1;
-  color: var(--color-phel-primary);
+  color: var(--color-light-link);
 }
 
-.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+.api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__icon {
   opacity: 1;
-  color: var(--color-phel-primary);
+  color: var(--color-light-link);
 }
 
 /* Mobile responsiveness */
 @media (max-width: 767px) {
-  .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+  .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow {
     width: 100%;
   }
 }
@@ -286,20 +282,20 @@
   margin: var(--space-2xl) 0;
 }
 
-.api-doc-header {
+.api-doc__header {
   display: flex;
   align-items: baseline;
   gap: var(--space-md);
   margin-bottom: var(--space-lg);
 }
 
-.api-doc-name {
+.api-doc__name {
   font-size: var(--text-2xl);
   font-weight: 700;
   color: var(--color-light-text-primary);
 }
 
-.api-doc-type {
+.api-doc__type {
   font-size: var(--text-sm);
   color: var(--color-light-text-secondary);
   background: var(--color-light-surface);
@@ -308,7 +304,7 @@
   border: 1px solid var(--color-light-border);
 }
 
-.api-doc-description {
+.api-doc__description {
   padding: 0 var(--space-lg);
   color: var(--color-light-text-secondary);
   line-height: var(--leading-relaxed);
@@ -358,52 +354,52 @@
   background: var(--color-dark-surface-hover);
 }
 
-.dark .api-namespace-toggle {
+.dark .api-namespace__toggle {
   border-bottom-color: var(--color-dark-border);
 }
 
-.dark .api-namespace-title {
+.dark .api-namespace__title {
   color: var(--color-dark-text-accent);
 }
 
-.dark .api-namespace-toggle-text {
+.dark .api-namespace__toggle-text {
   color: #bfa4ff;
   opacity: 0.8;
 }
 
-.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
+.dark .api-namespace__toggle:hover .api-namespace__toggle-text {
   opacity: 1;
   color: #c2acf5;
 }
 
-.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 {
+.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: #c2acf5;
 }
 
-.dark .api-namespace-icon {
+.dark .api-namespace__icon {
   color: #bfa4ff;
   opacity: 0.8;
 }
 
-.dark .api-namespace-toggle:hover .api-namespace-icon {
+.dark .api-namespace__toggle:hover .api-namespace__icon {
   opacity: 1;
   color: #c2acf5;
 }
 
-.dark .api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+.dark .api-index__entry:has(.api-namespace__content.has-overflow:hover) .api-namespace__icon {
   opacity: 1;
   color: #c2acf5;
 }
 
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
+.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content::after {
   background: linear-gradient(to bottom, 
     transparent 0%, 
     var(--color-dark-bg) 100%);
 }
 
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
+.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow::before {
   background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
   border: 1px solid var(--color-dark-text-accent);
@@ -425,7 +421,7 @@
 }
 
 /* Disable hover effects on pills when collapsed - Dark Mode */
-.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow a:hover {
+.dark .api-namespace__toggle[aria-expanded="false"] + .api-namespace__content.has-overflow a:hover {
   background: var(--color-dark-surface) !important;
   color: var(--color-dark-text-secondary) !important;
   border-color: var(--color-dark-border) !important;
diff --git a/css/components/blog.css b/css/components/blog.css
index b1420ab..a6cfd8b 100644
--- a/css/components/blog.css
+++ b/css/components/blog.css
@@ -27,10 +27,10 @@
 .post-list li a::after {
   content: '';
   position: absolute;
-  bottom: 0;
+  bottom: -2px;
   left: 0;
   width: 0;
-  height: 1px;
+  height: 2px;
   background: var(--color-light-link);
   transition: width var(--duration-normal) var(--ease-out);
 }
@@ -48,45 +48,18 @@
   margin: var(--space-3xl) 0;
 }
 
-.pagination a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  height: 40px;
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-light-surface);
+.pagination .btn {
   color: var(--color-light-link);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-md);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.pagination a::after {
-  display: none;
-}
-
-.pagination a.active {
-  background: var(--color-light-link);
-  color: white;
-  border-color: var(--color-light-link);
 }
 
-.pagination a.previous {
+.pagination__btn--previous {
   margin-right: auto;
 }
 
-.pagination a.next {
+.pagination__btn--next {
   margin-left: auto;
 }
 
-.pagination a.next::after {
-  content: ' →';
-  margin-left: var(--space-xs);
-}
-
 /* ========================================
    DARK MODE
    ======================================== */
@@ -119,20 +92,7 @@
   color: var(--color-dark-text-secondary);
 }
 
-.dark .pagination a {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .pagination a:hover {
-  background: var(--color-dark-surface-hover);
-  border-color: var(--color-dark-text-accent);
+/* Pagination dark mode - inherit from .btn-secondary, add link color */
+.dark .pagination .btn {
   color: var(--color-dark-text-accent);
 }
-
-.dark .pagination a.active {
-  background: var(--color-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
-}
diff --git a/css/components/code-block.css b/css/components/code-block.css
index 4926b6b..ad6a635 100644
--- a/css/components/code-block.css
+++ b/css/components/code-block.css
@@ -51,8 +51,8 @@
 }
 
 .copy-code-button.copied {
-  background-color: var(--color-phel-primary);
-  border-color: var(--color-phel-primary);
+  background-color: var(--color-light-link);
+  border-color: var(--color-light-link);
 }
 
 .copy-code-button.copied svg {
diff --git a/css/components/exercises.css b/css/components/exercises.css
index 78f1c99..51d1f41 100644
--- a/css/components/exercises.css
+++ b/css/components/exercises.css
@@ -6,41 +6,17 @@
   display: none;
 }
 
-.solution label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  height: 40px;
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-light-surface);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-light-text-primary);
-  transition: all var(--duration-fast) var(--ease-out);
-  user-select: none;
-}
-
-.solution label::before {
+.solution .btn::before {
   content: '→ Show solution';
 }
 
-.solution label:hover {
-  background: var(--color-light-surface-hover);
-  border-color: var(--color-light-link);
-  color: var(--color-light-link);
-}
-
-.solution input[type="checkbox"]:checked ~ label {
-  background: var(--color-light-link);
-  color: white;
-  border-color: var(--color-light-link);
+.solution input[type="checkbox"]:checked ~ .btn.btn-secondary {
+  background: var(--color-light-link) !important;
+  color: white !important;
+  border-color: var(--color-light-link) !important;
 }
 
-.solution input[type="checkbox"]:checked ~ label::before {
+.solution input[type="checkbox"]:checked ~ .btn::before {
   content: '← Hide solution';
 }
 
@@ -56,21 +32,9 @@
    DARK MODE
    ======================================== */
 
-.dark .solution label {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-primary);
-}
-
-.dark .solution label:hover {
-  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-dark-text-accent);
-  color: var(--color-dark-bg);
-  border-color: var(--color-dark-text-accent);
+.dark .solution input[type="checkbox"]:checked ~ .btn.btn-secondary {
+  background: var(--color-dark-text-accent) !important;
+  color: var(--color-dark-bg) !important;
+  border-color: var(--color-dark-text-accent) !important;
 }
 
diff --git a/css/components/header.css b/css/components/header.css
index 0e89c6c..4b1bbca 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -293,11 +293,11 @@
   opacity: 1 !important;
 }
 
-.mobile-menu-nav {
+.mobile-menu__nav {
   padding: var(--space-xl) var(--space-lg);
 }
 
-.mobile-menu-nav ul {
+.mobile-menu__nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -306,19 +306,19 @@
   gap: var(--space-md);
 }
 
-.mobile-menu-nav li {
+.mobile-menu__nav li {
   margin: 0;
   width: 100%;
 }
 
-.mobile-menu-nav li::before {
+.mobile-menu__nav li::before {
   display: none;
 }
 
-.mobile-menu-nav a {
+.mobile-menu__nav a {
   display: block;
   width: 100%;
-  padding: var(--space-sm) var(--space-md);
+  padding: 0.4rem var(--space-md);
   font-size: var(--text-xl);
   font-weight: 600;
   color: var(--color-light-text-primary);
@@ -331,12 +331,12 @@
   box-sizing: border-box;
 }
 
-.mobile-menu-nav a::after {
+.mobile-menu__nav a::after {
   display: none;
 }
 
-.mobile-menu-nav a:hover,
-.mobile-menu-nav a:active {
+.mobile-menu__nav a:hover,
+.mobile-menu__nav a:active {
   background: var(--color-light-link);
   color: white;
   border-color: var(--color-light-link);
@@ -344,7 +344,7 @@
 }
 
 /* Mobile menu social links */
-.mobile-menu-link {
+.mobile-menu__link {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -364,30 +364,37 @@
   margin-top: var(--space-md);
 }
 
-.mobile-menu-link::after {
+.mobile-menu__link::after {
   display: none;
 }
 
-.mobile-menu-link:hover,
-.mobile-menu-link:active {
+.mobile-menu__link:hover,
+.mobile-menu__link:active {
   background: var(--color-light-link);
   color: white;
   border-color: var(--color-light-link);
   transform: scale(1.02);
 }
 
-.mobile-menu-link svg {
+.mobile-menu__link svg {
   flex-shrink: 0;
 }
 
-/* Mobile menu actions (Dark mode toggle) */
-.mobile-menu-actions {
-  margin-top: var(--space-2xl);
-  padding-top: var(--space-xl);
+/* Mobile menu actions (Social links + Dark mode toggle) */
+.mobile-menu__actions {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-sm);
   border-top: 2px solid var(--color-light-border);
 }
 
-.mobile-dark-mode-toggle {
+.mobile-menu__social-links {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.mobile-menu__dark-mode-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -402,15 +409,14 @@
   border-radius: var(--radius-xl);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-out);
-  font-family: var(--font-primary);
 }
 
-.mobile-dark-mode-toggle:hover {
+.mobile-menu__dark-mode-toggle:hover {
   background: var(--color-light-surface-hover);
   border-color: var(--color-light-link);
 }
 
-.mobile-dark-mode-toggle svg {
+.mobile-menu__dark-mode-toggle svg {
   width: 24px;
   height: 24px;
 }
@@ -427,19 +433,6 @@ body.menu-open {
   }
 }
 
-/* ========================================
-   ANIMATIONS
-   ======================================== */
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 /* ========================================
    DARK MODE
    ======================================== */
@@ -513,43 +506,43 @@ body.menu-open {
     -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
   }
 
-  .dark .mobile-menu-nav a {
+  .dark .mobile-menu__nav a {
     background: var(--color-dark-surface);
     border-color: var(--color-dark-border);
     color: var(--color-dark-text-primary);
   }
 
-  .dark .mobile-menu-nav a:hover,
-  .dark .mobile-menu-nav a:active {
+  .dark .mobile-menu__nav a:hover,
+  .dark .mobile-menu__nav a:active {
     background: var(--color-dark-text-accent);
     border-color: var(--color-dark-text-accent);
     color: var(--color-dark-bg);
   }
 
-  .dark .mobile-menu-link {
+  .dark .mobile-menu__link {
     background: var(--color-dark-surface);
     border-color: var(--color-dark-border);
     color: var(--color-dark-text-primary);
   }
 
-  .dark .mobile-menu-link:hover,
-  .dark .mobile-menu-link:active {
+  .dark .mobile-menu__link:hover,
+  .dark .mobile-menu__link:active {
     background: var(--color-dark-text-accent);
     border-color: var(--color-dark-text-accent);
     color: var(--color-dark-bg);
   }
 
-  .dark .mobile-menu-actions {
+  .dark .mobile-menu__actions {
     border-top-color: var(--color-dark-border);
   }
 
-  .dark .mobile-dark-mode-toggle {
+  .dark .mobile-menu__dark-mode-toggle {
     background: var(--color-dark-surface);
     border-color: var(--color-dark-border);
     color: var(--color-dark-text-primary);
   }
 
-  .dark .mobile-dark-mode-toggle:hover {
+  .dark .mobile-menu__dark-mode-toggle:hover {
     background: rgba(191, 164, 255, 0.15);
     border-color: var(--color-dark-text-accent);
   }
diff --git a/css/components/homepage.css b/css/components/homepage.css
index 237511f..a6cb83c 100644
--- a/css/components/homepage.css
+++ b/css/components/homepage.css
@@ -1,28 +1,4 @@
 /* Homepage Content Container */
-.homepage-content h1 {
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1.1;
-  margin: var(--space-3xl) 0 var(--space-lg);
-  text-align: center;
-}
-
-.homepage-title-accent {
-  color: var(--color-phel-primary);
-}
-
-@media (min-width: 640px) {
-  .homepage-content h1 {
-    font-size: 3rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .homepage-content h1 {
-    font-size: 3.5rem;
-  }
-}
-
 .homepage-content h2 {
   text-align: center;
   font-size: var(--text-3xl);
@@ -42,7 +18,7 @@
 .homepage-content > p:first-of-type {
   font-size: var(--text-lg);
   color: var(--color-light-text-secondary);
-  margin-bottom: var(--space-2xl);
+  margin-bottom: var(--space-xl);
   max-width: 50rem;
   margin-left: auto;
   margin-right: auto;
@@ -50,9 +26,7 @@
 
 .homepage-content img {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: var(--space-3xl);
+  margin: var(--space-2xl) auto;
   user-select: none;
   -webkit-user-drag: none;
   pointer-events: none;
@@ -131,12 +105,12 @@
 }
 
 .why-card:hover {
-  border-color: var(--color-phel-primary);
+  border-color: var(--color-light-link);
   box-shadow: var(--shadow-sm);
 }
 
 .why-card-icon {
-  color: var(--color-phel-primary);
+  color: var(--color-light-link);
 }
 
 .why-card-icon svg {
@@ -212,9 +186,9 @@
 }
 
 .homepage-cta-primary {
-  background: var(--color-phel-primary);
+  background: var(--color-light-link);
   color: white;
-  border: 2px solid var(--color-phel-primary);
+  border: 2px solid var(--color-light-link);
 }
 
 .homepage-cta-primary:hover {
@@ -230,8 +204,8 @@
 }
 
 .homepage-cta-secondary:hover {
-  border-color: var(--color-phel-primary);
-  color: var(--color-phel-primary);
+  border-color: var(--color-light-link);
+  color: var(--color-light-link);
 }
 
 .homepage-cta-icon {
@@ -278,12 +252,12 @@
 }
 
 .feature-card:hover {
-  border-color: var(--color-phel-primary);
+  border-color: var(--color-light-link);
   box-shadow: var(--shadow-sm);
 }
 
 .feature-icon {
-  color: var(--color-phel-primary);
+  color: var(--color-light-link);
   margin-bottom: var(--space-sm);
 }
 
@@ -347,10 +321,6 @@
    DARK MODE
    ======================================== */
 
-.dark .homepage-title-accent {
-  color: var(--color-dark-text-accent);
-}
-
 .dark .homepage-content > p:first-of-type {
   color: var(--color-dark-text-primary);
 }
diff --git a/css/components/layout.css b/css/components/layout.css
index 776f97d..94e3920 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -26,7 +26,6 @@
 .two-column-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: var(--space-md);
   max-width: var(--container-wide);
   width: 100%;
   margin: 0 auto;
@@ -62,13 +61,13 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: var(--space-md);
+  padding: 0.7rem;
   background: var(--color-light-bg-secondary);
   border: 1px solid var(--color-light-border);
   border-radius: var(--radius-lg);
   color: var(--color-light-text-primary);
   cursor: pointer;
-  margin: var(--space-xl) 0;
+  margin: var(--space-xl) 0 var(--space-sm);
   transition: all var(--duration-fast) var(--ease-out);
   position: relative;
   z-index: 10;
@@ -111,7 +110,7 @@
 
 /* Add bottom border to sidebar when accordion is open on mobile */
 .two-column-layout__sidebar:has(.sidebar-content.active) {
-  padding-bottom: var(--space-xl);
+  padding-bottom: var(--space-md);
   border-bottom: 2px solid var(--color-light-border);
 }
 
@@ -127,16 +126,15 @@
   .two-column-layout__sidebar {
     order: -1;
     margin-bottom: 0;
-    padding-bottom: 0;
-    padding: var(--space-xl);
-    border-bottom: none;
+    padding: var(--space-xl) var(--space-xl) 0 var(--space-xl);
+    /*border-bottom: none;*/
+    border: 1px solid var(--color-light-border);
     position: sticky;
     top: calc(var(--header-height) + var(--space-xl));
     align-self: start;
     max-height: calc(100vh - var(--header-height) - var(--space-2xl));
     overflow-y: auto;
     background: var(--color-light-surface);
-    border: 1px solid var(--color-light-border);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-sm);
     transition: all var(--duration-normal) var(--ease-out);
@@ -206,37 +204,16 @@
   }
 }
 
-.related-container .link {
-  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);
+/* Related navigation buttons now use .btn from utilities */
+.related-container .btn {
   color: var(--color-light-link);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-md);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
 }
 
-.related-container .link:hover {
-  border-color: var(--color-light-link);
-  background: var(--color-light-surface-hover);
-}
-
-.related-container .link::after {
-  display: none;
-}
-
-.related-container .link .link-title {
+.related-container .link__title {
   flex: 1;
 }
 
-.related-container .link > span:not(.link-title) {
+.related-container .link > span:not(.link__title) {
   flex-shrink: 0;
 }
 
@@ -280,38 +257,6 @@
   transform: scale(0.95);
 }
 
-/* Animation keyframes */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
 /* ========================================
    DARK MODE
    ======================================== */
@@ -364,18 +309,8 @@
   box-shadow: none;
 }
 
-.dark .related-container .link {
-  background: var(--color-dark-surface);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text-accent);
-}
-
-.dark .related-container .link:hover {
-  border-color: var(--color-dark-text-accent);
-  background: var(--color-dark-surface-hover);
-}
-
-.dark .related-container .link .link-title {
+/* Related container dark mode - btn styles inherited, add link color */
+.dark .related-container .btn {
   color: var(--color-dark-text-accent);
 }
 
diff --git a/css/components/navigation.css b/css/components/navigation.css
index 17e9f17..506bfd6 100644
--- a/css/components/navigation.css
+++ b/css/components/navigation.css
@@ -16,10 +16,3 @@
 .top-navigation li::before {
   display: none;
 }
-
-@media (min-width: 1040px) {
-  .top-navigation__item--github,
-  .top-navigation__item--x {
-    display: none;
-  }
-}
diff --git a/css/components/search.css b/css/components/search.css
index 4e87045..94d2ccc 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -17,7 +17,6 @@
   padding: var(--space-sm) var(--space-md);
   padding-left: 36px;
   font-size: var(--text-sm);
-  font-family: var(--font-primary);
   color: var(--color-light-text-primary);
   background-color: var(--color-light-bg-secondary);
   border: 1px solid var(--color-light-border);
@@ -130,17 +129,6 @@
   }
 }
 
-@keyframes expandSearch {
-  from {
-    transform: scale(0.95);
-    opacity: 0.8;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 /* Search results dropdown with glassmorphism */
 .search-results {
   position: absolute;
@@ -234,7 +222,7 @@
   opacity: 0.9;
 }
 
-.search-result-link {
+.search-results__link {
   display: block;
   text-decoration: none;
   color: var(--color-light-text-primary);
@@ -256,7 +244,7 @@
   min-width: 0;
 }
 
-.result-type-badge {
+.search-results__badge {
   display: inline-flex;
   align-items: center;
   padding: 3px 8px;
@@ -270,12 +258,12 @@
   line-height: 1.2;
 }
 
-.result-type-badge--api {
+.search-results__badge--api {
   background: var(--color-light-link);
   color: white;
 }
 
-.result-type-badge--docs {
+.search-results__badge--docs {
   background: var(--color-light-text-accent);
   color: white;
 }
@@ -360,18 +348,6 @@
   border-left: 3px solid var(--color-light-link);
 }
 
-/* Animation keyframes */
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* Mobile responsive */
 @media (max-width: 1039px) {
   .search-results {
@@ -435,7 +411,7 @@
   opacity: 0.7;
 }
 
-.dark .search-result-link {
+.dark .search-results__link {
   color: var(--color-dark-text-primary);
 }
 
@@ -444,16 +420,16 @@
   opacity: 0.8;
 }
 
-.dark .result-type-badge--api {
+.dark .search-results__badge--api {
   background: var(--color-dark-text-accent);
   color: var(--color-dark-bg);
   border: 1px solid var(--color-dark-text-accent);
 }
 
-.dark .result-type-badge--docs {
-  background: rgba(59, 130, 246, 0.2);
-  color: #60a5fa;
-  border: 1px solid rgba(59, 130, 246, 0.3);
+.dark .search-results__badge--docs {
+  background: var(--color-dark-link);
+  color: var(--color-dark-bg);
+  border: 1px solid var(--color-dark-link);
 }
 
 .dark .search-results__item .fn-name {
diff --git a/css/components/sidebar.css b/css/components/sidebar.css
index af0d6ce..de14170 100644
--- a/css/components/sidebar.css
+++ b/css/components/sidebar.css
@@ -1,15 +1,15 @@
 /* Sidebar Title */
-.site-navigation-title {
+.site-navigation__title {
   font-size: var(--text-sm);
   font-weight: 700;
   color: var(--color-light-text-primary);
-  margin: 0 0 var(--space-md) 0;
+  margin: var(--space-lg) 0 var(--space-md) 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 @media (min-width: 1040px) {
-  .site-navigation-title {
+  .site-navigation__title {
     margin-top: 0;
   }
 }
@@ -138,7 +138,7 @@
    DARK MODE
    ======================================== */
 
-.dark .site-navigation-title {
+.dark .site-navigation__title {
   color: var(--color-dark-text-primary);
 }
 
diff --git a/css/components/utilities.css b/css/components/utilities.css
new file mode 100644
index 0000000..8162b55
--- /dev/null
+++ b/css/components/utilities.css
@@ -0,0 +1,319 @@
+/* ========================================
+   UTILITY CLASSES
+   Base classes for common patterns
+   ======================================== */
+
+/* ========================================
+   BUTTONS
+   ======================================== */
+
+/* Base button styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-out);
+  user-select: none;
+  border: 1px solid transparent;
+}
+
+/* Button variants */
+.btn-primary {
+  background: var(--color-light-link);
+  color: white;
+  border-color: var(--color-light-link);
+}
+
+.btn-primary:hover {
+  background: var(--color-light-link-hover, #5a5fcf);
+  border-color: var(--color-light-link-hover, #5a5fcf);
+}
+
+.btn-secondary {
+  background: var(--color-light-surface);
+  color: var(--color-light-text-primary);
+  border-color: var(--color-light-border);
+}
+
+.btn-secondary:hover {
+  background: var(--color-light-surface-hover);
+  border-color: var(--color-light-link);
+  color: var(--color-light-link);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-gray-dark);
+  border-color: transparent;
+}
+
+.btn-ghost:hover {
+  background: var(--color-light-surface-hover);
+  color: var(--color-light-link);
+}
+
+/* Button sizes */
+.btn-sm {
+  min-width: 40px;
+  height: 40px;
+  padding: var(--space-xs) var(--space-sm);
+  font-size: var(--text-xs);
+}
+
+.btn-md {
+  min-width: 40px;
+  height: 40px;
+  padding: var(--space-sm) var(--space-md);
+}
+
+.btn-lg {
+  padding: var(--space-md) var(--space-lg);
+  font-size: var(--text-base);
+}
+
+/* Button shapes */
+.btn-rounded {
+  border-radius: var(--radius-lg);
+}
+
+.btn-pill {
+  border-radius: var(--radius-full);
+}
+
+.btn-square {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+/* ========================================
+   BADGES
+   ======================================== */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge-primary {
+  background: var(--color-light-link);
+  color: white;
+}
+
+.badge-secondary {
+  background: var(--color-light-surface);
+  color: var(--color-light-text-secondary);
+  border: 1px solid var(--color-light-border);
+}
+
+/* ========================================
+   FLEX UTILITIES
+   ======================================== */
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-sm {
+  gap: var(--space-sm);
+}
+
+.gap-md {
+  gap: var(--space-md);
+}
+
+.gap-lg {
+  gap: var(--space-lg);
+}
+
+/* ========================================
+   SPACING UTILITIES
+   ======================================== */
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-sm {
+  margin-top: var(--space-sm);
+}
+
+.mt-md {
+  margin-top: var(--space-md);
+}
+
+.mt-lg {
+  margin-top: var(--space-lg);
+}
+
+.mb-sm {
+  margin-bottom: var(--space-sm);
+}
+
+.mb-md {
+  margin-bottom: var(--space-md);
+}
+
+.mb-lg {
+  margin-bottom: var(--space-lg);
+}
+
+/* ========================================
+   TEXT UTILITIES
+   ======================================== */
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+/* ========================================
+   DISPLAY UTILITIES
+   ======================================== */
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+/* ========================================
+   SIZE UTILITIES
+   ======================================== */
+
+.w-full {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark .btn-primary {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-dark-text-accent);
+}
+
+.dark .btn-primary:hover {
+  background: #c2acf5;
+  border-color: #c2acf5;
+}
+
+.dark .btn-secondary {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-primary);
+  border-color: var(--color-dark-border);
+}
+
+.dark .btn-secondary:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .btn-ghost {
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .btn-ghost:hover {
+  background: rgba(191, 164, 255, 0.15);
+  color: var(--color-dark-text-accent);
+}
+
+.dark .badge-primary {
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+}
+
+.dark .badge-secondary {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-secondary);
+  border-color: var(--color-dark-border);
+}
+
diff --git a/css/theme.css b/css/theme.css
index e8d5260..a8e2a00 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import 'tailwindcss/theme' layer(theme);
 
 @source '../content/**/*.md';
 
@@ -15,7 +15,6 @@
   --color-light-link: #512da8;
   --color-light-border: #e2e8f0;
   --color-light-border-subtle: #f1f5f9;
-  --color-phel-primary: #512da8;
   
   /* Modern Color Palette - Dark Mode */
   --color-dark-bg: #212830;
@@ -24,7 +23,7 @@
   --color-dark-text-secondary: #cbd5e1;
   --color-dark-text-muted: #94a3b8;
   --color-dark-text-accent: #bfa4ff;
-  --color-dark-link: #bfa4ff;
+  --color-dark-link: #d1c7e5;
   --color-dark-border: #3a3a3a;
   --color-dark-border-subtle: #2a2a2a;
   --color-dark-header-footer-border: #151a24;
@@ -36,7 +35,7 @@
   --color-dark-surface: #2a313c;
   --color-dark-surface-hover: #262c36;
   
-  /* Code & Catalogue */
+  /* Code */
   --color-light-code-bg: #f1f5f9;
   --color-light-code-inline-bg: #e2e8f0;
   --color-dark-code-bg: #262c36;
@@ -54,31 +53,13 @@
   
 
   /* Extended Color Palette */
-  --color-blue-darker: #1e40af;
-  --color-blue-dark: #2563eb;
-  --color-blue-base: #3b82f6;
-  --color-blue-light: #60a5fa;
-  --color-blue-lighter: #93c5fd;
-
-  --color-green-darker: #047857;
-  --color-green-dark: #059669;
-  --color-green-base: #10b981;
-  --color-green-light: #34d399;
-  --color-green-lighter: #6ee7b7;
-
-  --color-red-darker: #b91c1c;
-  --color-red-dark: #dc2626;
-  --color-red-base: #ef4444;
-  --color-red-light: #f87171;
-  --color-red-lighter: #fca5a5;
-
   --color-gray-darker: #252525;
   --color-gray-dark: #475569;
   --color-gray-base: #64748b;
   --color-gray-light: #94a3b8;
   --color-gray-lighter: #cbd5e1;
 
-  /* Modern Typography */
+  /* Typography */
   --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
   --font-inter: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
diff --git a/scripts/concat-tailwind.js b/scripts/concat-tailwind.js
index 8205038..5f89058 100644
--- a/scripts/concat-tailwind.js
+++ b/scripts/concat-tailwind.js
@@ -9,6 +9,7 @@ const parts = [
   // 1. Foundation
   'css/theme.css',
   'css/base.css',
+  'css/components/utilities.css',
   
   // 2. Layout & Structure
   'css/components/layout.css',
@@ -28,7 +29,10 @@ const parts = [
   'css/components/search.css',
   'css/components/code-block.css',
   
-  // 5. Dark Mode (last to override)
+  // 5. Animations
+  'css/components/animations.css',
+  
+  // 6. Dark Mode (last to override)
   'css/components/dark-mode.css',
 ];
 
diff --git a/static/api-accordion.js b/static/api-accordion.js
index d054d3c..6d82a93 100644
--- a/static/api-accordion.js
+++ b/static/api-accordion.js
@@ -1,13 +1,13 @@
 // API Namespace Accordion
 document.addEventListener('DOMContentLoaded', function() {
-  const toggleButtons = document.querySelectorAll('.api-namespace-toggle');
+  const toggleButtons = document.querySelectorAll('.api-namespace__toggle');
   
   toggleButtons.forEach(function(button) {
     // Check if content has overflow
     const content = button.nextElementSibling;
-    const toggleText = button.querySelector('.api-namespace-toggle-text');
+    const toggleText = button.querySelector('.api-namespace__toggle-text');
     
-    if (content && content.classList.contains('api-namespace-content')) {
+    if (content && content.classList.contains('api-namespace__content')) {
       // Check if content height exceeds the collapsed max-height (160px)
       if (content.scrollHeight > 160) {
         content.classList.add('has-overflow');
diff --git a/static/mobile-menu.js b/static/mobile-menu.js
index ac36266..655ba91 100644
--- a/static/mobile-menu.js
+++ b/static/mobile-menu.js
@@ -64,7 +64,7 @@ if (document.readyState !== 'loading') {
 
 // Mobile dark mode toggle (separate initialization)
 document.addEventListener('DOMContentLoaded', function() {
-  const mobileDarkToggle = document.querySelector('.mobile-dark-mode-toggle');
+  const mobileDarkToggle = document.querySelector('.mobile-menu__dark-mode-toggle');
   const mainDarkToggle = document.getElementById('dark-mode-toggle');
   
   if (mobileDarkToggle && mainDarkToggle) {
diff --git a/static/search.js b/static/search.js
index 4878ecd..f9f4ec9 100644
--- a/static/search.js
+++ b/static/search.js
@@ -276,23 +276,23 @@ function createMenuItem(result, index) {
 
 function formatSearchResultItem(item) {
     if (item.type === "documentation") {
-        return `<a class="search-result-link" href="${item.url}">`
+        return `<a class="search-results__link" href="${item.url}">`
             + `<div class="search-results__item">`
             + `<div class="search-results__header">`
             + `<strong class="title">${item.title}</strong>`
-            + `<span class="result-type-badge result-type-badge--docs">Docs</span>`
+            + `<span class="search-results__badge search-results__badge--docs">Docs</span>`
             + `</div>`
             + `<span class="desc">${item.content}</span>`
             + `</div></a>`;
     } else {
-        return `<a class="search-result-link" href="/documentation/api/#${item.anchor}">`
+        return `<a class="search-results__link" href="/documentation/api/#${item.anchor}">`
             + `<div class="search-results__item">`
             + `<div class="search-results__header">`
             + `<div class="fn-info">`
             + `<span class="fn-name">${item.name}</span> `
             + `<small class="fn-signature">${item.signature}</small>`
             + `</div>`
-            + `<span class="result-type-badge result-type-badge--api">API</span>`
+            + `<span class="search-results__badge search-results__badge--api">API</span>`
             + `</div>`
             + `<span class="desc">${item.desc}</span>`
             + `</div></a>`;
diff --git a/templates/blog-entry.html b/templates/blog-entry.html
index 00e3eb5..ae44820 100644
--- a/templates/blog-entry.html
+++ b/templates/blog-entry.html
@@ -14,15 +14,15 @@ <h1>{{page.title}}</h1>
 
     <div class="related-container">
       {% if page.lower %}
-      <a href="{{ page.lower.permalink }}" class="link link-previous">
+      <a href="{{ page.lower.permalink }}" class="btn btn-secondary link link--previous">
         <span>←</span>
-        <span class="link-title">{{ page.lower.title }}</span>
+        <span class="link__title">{{ page.lower.title }}</span>
       </a>
       {% endif %}
 
       {% if page.higher %}
-      <a href="{{ page.higher.permalink }}" class="link link-next">
-        <span class="link-title">{{ page.higher.title }}</span>
+      <a href="{{ page.higher.permalink }}" class="btn btn-secondary link link--next">
+        <span class="link__title">{{ page.higher.title }}</span>
         <span>→</span>
       </a>
       {% endif %}
diff --git a/templates/blog.html b/templates/blog.html
index 01b83b0..2057246 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -17,10 +17,10 @@ <h1>Blog</h1>
 </ul>
 <div class="pagination">
       {% if paginator.previous %}
-        <a class="previous" href="{{ paginator.previous }}">← Newer posts</a>
+        <a class="btn btn-secondary pagination__btn pagination__btn--previous" href="{{ paginator.previous }}">← Newer posts</a>
       {% endif %}
       {% if paginator.next %}
-        <a class="next" href="{{ paginator.next }}">Older posts →</a>
+        <a class="btn btn-secondary pagination__btn pagination__btn--next" href="{{ paginator.next }}">Older posts →</a>
       {% endif %}
 </div>
 {% endblock content %}
diff --git a/templates/header.html b/templates/header.html
index 4e57b41..2ff2930 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -50,12 +50,26 @@
 
     <!-- Mobile Menu Overlay -->
     <div class="mobile-menu-overlay" id="mobile-menu-overlay">
-        <nav class="mobile-menu-nav">
+        <nav class="mobile-menu__nav">
             {% include "navigation/top-navigation.html" %}
             
-            <!-- Dark mode toggle in mobile menu -->
-            <div class="mobile-menu-actions">
-                <button class="mobile-dark-mode-toggle" aria-label="Toggle dark mode">
+            <!-- Social links and dark mode toggle in mobile menu -->
+            <div class="mobile-menu__actions">
+                <div class="mobile-menu__social-links">
+                    <a href="https://github.com/phel-lang/phel-lang" class="mobile-menu__link" target="_blank" rel="noopener noreferrer">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+                        </svg>
+                    </a>
+                    
+                    <a href="https://x.com/phel_lang/" class="mobile-menu__link" target="_blank" rel="noopener noreferrer">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 1200 1227">
+                            <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
+                        </svg>
+                    </a>
+                </div>
+                
+                <button class="mobile-menu__dark-mode-toggle" aria-label="Toggle dark mode">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="5"/>
                         <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
diff --git a/templates/index.html b/templates/index.html
index 5ee29f7..0bac651 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,7 +6,6 @@
 {% endblock meta_content %}
 {% block content %}
     <div class="homepage-content">
-        <h1>The <span class="homepage-title-accent">Phel</span> Language</h1>
         {{ section.content | safe }}
     </div>
 {% endblock content %}
diff --git a/templates/navigation/site-navigation.html b/templates/navigation/site-navigation.html
index f26db42..f86f9c0 100644
--- a/templates/navigation/site-navigation.html
+++ b/templates/navigation/site-navigation.html
@@ -1,6 +1,6 @@
 {% if page.ancestors %}
 <div class="site-navigation-section">
-    <h2 class="site-navigation-title">Contents</h2>
+    <h2 class="site-navigation__title">Contents</h2>
     <ol class="site-navigation">
         {% set doc_section = get_section(path=page.ancestors | reverse | first) %}
         {% for page in doc_section.pages %}
diff --git a/templates/navigation/top-navigation.html b/templates/navigation/top-navigation.html
index 93c1da4..62d2e2f 100644
--- a/templates/navigation/top-navigation.html
+++ b/templates/navigation/top-navigation.html
@@ -11,10 +11,4 @@
     <li class="top-navigation__item {% if current_path and current_path is starting_with('/blog/') %}active{% endif %}">
         <a href="/blog">Blog</a>
     </li>
-    <li class="top-navigation__item top-navigation__item--github">
-        <a href="https://github.com/phel-lang/phel-lang" target="_blank" rel="noopener noreferrer">Github</a>
-    </li>
-    <li class="top-navigation__item top-navigation__item--x">
-        <a href="https://x.com/phel_lang/" target="_blank" rel="noopener noreferrer">𝕏</a>
-    </li>
 </ul>
diff --git a/templates/page-api.html b/templates/page-api.html
index 571d7dc..ff7ceb5 100644
--- a/templates/page-api.html
+++ b/templates/page-api.html
@@ -11,16 +11,16 @@ <h1>{{page.title}}</h1>
     <ul class="api-index">
     {% for namespace in page.toc %}
         <li class="api-index__entry">
-            <button class="api-namespace-toggle" aria-expanded="false">
-                <h2 class="api-namespace-title">{{ namespace.title }}</h2>
-                <div class="api-namespace-toggle-indicator">
-                    <span class="api-namespace-toggle-text"></span>
-                    <svg class="api-namespace-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <button class="api-namespace__toggle" aria-expanded="false">
+                <h2 class="api-namespace__title">{{ namespace.title }}</h2>
+                <div class="api-namespace__toggle-indicator">
+                    <span class="api-namespace__toggle-text"></span>
+                    <svg class="api-namespace__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </div>
             </button>
-            <ul class="api-namespace-content">
+            <ul class="api-namespace__content">
             {% for fn in namespace.children %}
                 <li>
                     <a href="{{ fn.permalink | safe }}">{{ fn.title }}</a>
diff --git a/templates/shortcodes/solution.html b/templates/shortcodes/solution.html
index 848c937..eff31f3 100644
--- a/templates/shortcodes/solution.html
+++ b/templates/shortcodes/solution.html
@@ -1,6 +1,6 @@
 <div class="solution">
     <input type="checkbox" id="cb{{ nth }}">
-    <label for="cb{{ nth }}"></label>
+    <label for="cb{{ nth }}" class="btn btn-secondary"></label>
     <div class="solution-content">
         {{ body | markdown | safe }}
     </div>