diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index e8fe3d6c..2cb63383 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -83,7 +83,7 @@ FixIt/
 
    ```scss
    .element {
-     color: var(#{$rootPrefix}global-font-color);
+     color: fi-var(global-font-color);
    }
    ```
 
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index dacbbf25..798ff50f 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -1,11 +1,11 @@
 @import "../../lib/normalize/normalize";
 
 html {
-  font-family: fixit-var(global-font-family);
-  font-weight: fixit-var(global-font-weight);
+  font-family: fi-var(global-font-family);
+  font-weight: fi-var(global-font-weight);
   font-display: swap;
-  font-size: fixit-var(global-font-size);
-  line-height: fixit-var(global-line-height);
+  font-size: fi-var(global-font-size);
+  line-height: fi-var(global-line-height);
   width: 100%;
   scroll-behavior: smooth;
   overflow: auto;
@@ -22,12 +22,12 @@ html {
 }
 
 ::selection {
-  background-color: fixit-var(selection-color);
+  background-color: fi-var(selection-color);
 }
 
 body {
-  background-color: fixit-var(global-background-color);
-  color: fixit-var(global-font-color);
+  background-color: fi-var(global-background-color);
+  color: fi-var(global-font-color);
   @include overflow-wrap(break-word);
 }
 
@@ -85,11 +85,11 @@ details {
 %code {
   padding: 0.2em 0.4em;
   margin: 0;
-  font-size: fixit-var(code-font-size);
-  line-height: fixit-var(code-font-size);
-  font-family: fixit-var(code-font-family);
-  color: fixit-var(code-color);
-  background-color: fixit-var(code-inline-background-color);
+  font-size: fi-var(code-font-size);
+  line-height: fi-var(code-font-size);
+  font-family: fi-var(code-font-family);
+  color: fi-var(code-color);
+  background-color: fi-var(code-inline-background-color);
   text-decoration: inherit;
   @include border-radius;
   @include overflow-wrap(break-word);
diff --git a/assets/css/_core/_common.scss b/assets/css/_core/_common.scss
index 656289c4..0c9c80e9 100644
--- a/assets/css/_core/_common.scss
+++ b/assets/css/_core/_common.scss
@@ -41,7 +41,7 @@
 
 @each $color, $value in $theme-colors {
   .text-#{$color} {
-    color: fixit-var(#{$color}) !important;
+    color: fi-var(#{$color}) !important;
   }
 }
 
diff --git a/assets/css/_core/_function/_rgba.scss b/assets/css/_core/_function/_rgba.scss
index 7b1f93ee..1b212871 100644
--- a/assets/css/_core/_function/_rgba.scss
+++ b/assets/css/_core/_function/_rgba.scss
@@ -1,8 +1,8 @@
 /// Build an rgba-like color from any source color expression.
-/// @param {Color | String} $color - Source color, supports CSS vars such as fixit-var(secondary).
+/// @param {Color | String} $color - Source color, supports CSS vars such as fi-var(secondary).
 /// @param {Number} $alpha [1] - Alpha channel value in range 0..1.
 /// @example
-///   color: fixit-rgba(fixit-var(secondary), 0.2);
-@function fixit-rgba($color, $alpha: 1) {
+///   color: fi-rgba(fi-var(secondary), 0.2);
+@function fi-rgba($color, $alpha: 1) {
   @return unquote("rgb(from #{$color} r g b / #{$alpha})");
 }
diff --git a/assets/css/_core/_function/_var.scss b/assets/css/_core/_function/_var.scss
index 8b4f6b80..96903ea6 100644
--- a/assets/css/_core/_function/_var.scss
+++ b/assets/css/_core/_function/_var.scss
@@ -3,9 +3,9 @@
 /// @param {*} $fallback - Optional fallback value
 /// @return {String} - Complete CSS variable reference
 /// @example
-///   color: fixit-var(global-font-color);
-///   background: fixit-var(custom-bg, #fff);
-@function fixit-var($name, $fallback: null) {
+///   color: fi-var(global-font-color);
+///   background: fi-var(custom-bg, #fff);
+@function fi-var($name, $fallback: null) {
 	@if $fallback {
 		@return var(#{$rootPrefix}#{$name}, #{$fallback});
 	} @else {
diff --git a/assets/css/_core/_layout/_breadcrumb.scss b/assets/css/_core/_layout/_breadcrumb.scss
index f0330a05..243ce4bd 100644
--- a/assets/css/_core/_layout/_breadcrumb.scss
+++ b/assets/css/_core/_layout/_breadcrumb.scss
@@ -1,7 +1,7 @@
 .breadcrumb-container {
   padding-inline: 1rem;
   font-size: 0.75rem;
-  background-color: fixit-var(global-background-color);
+  background-color: fi-var(global-background-color);
   display: flex;
   @include z-index(sticky);
 
@@ -28,7 +28,7 @@
     @include media('sm', 'up') {
       [data-header-desktop='sticky'] &,
       [data-header-desktop='auto'] & {
-        top: fixit-var(header-height);
+        top: fi-var(header-height);
       }
       [data-header-desktop='auto']:has(#header-desktop.header__fadeOutUp) & {
         top: 0px;
@@ -38,7 +38,7 @@
     @include media('xs') {
       [data-header-mobile='sticky'] &,
       [data-header-mobile='auto'] & {
-        top: fixit-var(header-height);
+        top: fi-var(header-height);
       }
       [data-header-mobile='auto']:has(#header-mobile.header__fadeOutUp) & {
         top: 0px;
@@ -56,7 +56,7 @@
     padding: 0.5rem;
     margin: 0 auto;
     list-style: none;
-    box-shadow: inset 0 -1px 0 fixit-var(global-border-color);
+    box-shadow: inset 0 -1px 0 fi-var(global-border-color);
     overflow-x: auto;
     overflow-y: hidden;
     @extend %page-style;
@@ -69,11 +69,11 @@
         content: attr(data-separator);
         display: inline-block;
         padding-inline: 0.5rem;
-        color: fixit-var(global-border-color);
+        color: fi-var(global-border-color);
       }
 
       &.active {
-        color: fixit-var(global-font-secondary-color);
+        color: fi-var(global-font-secondary-color);
       }
     }
   }
diff --git a/assets/css/_core/_layout/_header.scss b/assets/css/_core/_layout/_header.scss
index 0f964f1d..529ececf 100644
--- a/assets/css/_core/_layout/_header.scss
+++ b/assets/css/_core/_layout/_header.scss
@@ -3,7 +3,7 @@ $header-box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.125), rgba(255, 255,
 header {
   width: 100%;
   transition: box-shadow 0.3s ease;
-  background-color: fixit-var(header-background-color);
+  background-color: fi-var(header-background-color);
   @include z-index(fixed);
 
   &:hover {
@@ -19,7 +19,7 @@ header {
       background-color: transparent;
       backdrop-filter: saturate(1.2) blur(10px);
       background-size: 4px 4px;
-      background-image: radial-gradient(transparent 1px, fixit-var(header-background-color) 1px);
+      background-image: radial-gradient(transparent 1px, fi-var(header-background-color) 1px);
     }
   }
 
@@ -67,8 +67,8 @@ header {
 }
 
 .header-title {
-  font-size: fixit-var(header-title-font-size);
-  font-family: fixit-var(header-title-font-family);
+  font-size: fi-var(header-title-font-size);
+  font-family: fi-var(header-title-font-family);
   font-weight: bold;
   margin-inline-end: 0.25rem;
   padding-inline: 0.25rem;
@@ -83,7 +83,7 @@ header {
     height: 1.5em;
     width: auto;
     vertical-align: top;
-    transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%));
+    transform: translateY(calc(#{fi-var(header-height)} / 2 - 50%));
   }
 
   .header-title-text {
@@ -105,7 +105,7 @@ header {
     list-style: none;
     margin: 0.25rem 0.5rem;
     height: 1px;
-    background-color: fixit-var(menu-border-color);
+    background-color: fi-var(menu-border-color);
   }
 
   .menu-item {
@@ -114,7 +114,7 @@ header {
     .dropdown-icon {
       margin-left: 0.25rem;
       font-size: .875em;
-      color: fixit-var(global-font-color);
+      color: fi-var(global-font-color);
 
       &.open::before {
         content: "\f078";
@@ -125,7 +125,7 @@ header {
       >.menu-link,
       >.nested-item>.menu-link {
         font-weight: bold;
-        color: fixit-var(menu-active-color);
+        color: fi-var(menu-active-color);
       }
     }
 
@@ -190,13 +190,13 @@ header {
   .open &,
   &.mobile {
     input {
-      color: fixit-var(global-font-color);
-      background-color: fixit-var(search-background-color);
+      color: fi-var(global-font-color);
+      background-color: fi-var(search-background-color);
       padding: 0 2rem 0 2rem;
     }
 
     .search-button {
-      color: fixit-var(global-font-tertiary-color);
+      color: fi-var(global-font-tertiary-color);
     }
 
     .search-clear:hover {
@@ -237,8 +237,8 @@ header {
   display: block;
   position: sticky;
   top: 0;
-  height: fixit-var(header-height);
-  line-height: fixit-var(header-height);
+  height: fi-var(header-height);
+  line-height: fi-var(header-height);
   box-sizing: border-box;
 
   [data-header-desktop='normal'] & {
@@ -255,10 +255,10 @@ header {
     height: 100%;
 
     &[data-github-corner='left'] {
-      padding-inline-start: fixit-var(header-height);
+      padding-inline-start: fi-var(header-height);
     }
     &[data-github-corner='right'] {
-      padding-inline-end: fixit-var(header-height);
+      padding-inline-end: fi-var(header-height);
     }
 
     .header-title {
@@ -287,7 +287,7 @@ header {
           width: 0;
           margin: 18.5px 0.5rem;
           padding: 0;
-          border-left: 1.5px solid fixit-var(global-border-color);
+          border-left: 1.5px solid fi-var(global-border-color);
         }
       }
 
@@ -296,9 +296,9 @@ header {
         margin: 0;
         padding: 0.25rem 0;
         display: none;
-        top: calc(#{fixit-var(header-height)} - 0.75rem);
-        border: 1px solid fixit-var(menu-border-color);
-        background-color: fixit-var(header-background-color);
+        top: calc(#{fi-var(header-height)} - 0.75rem);
+        border: 1px solid fi-var(menu-border-color);
+        background-color: fi-var(header-background-color);
         max-height: 60vh;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -307,8 +307,8 @@ header {
         box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 
         .menu-item {
-          height: fixit-var(submenu-height);
-          line-height: fixit-var(submenu-height);
+          height: fi-var(submenu-height);
+          line-height: fi-var(submenu-height);
           max-width: 15rem;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -336,8 +336,8 @@ header {
 #header-mobile {
   position: sticky;
   top: 0;
-  min-height: fixit-var(header-height);
-  line-height: fixit-var(header-height);
+  min-height: fi-var(header-height);
+  line-height: fi-var(header-height);
 
   [data-header-mobile='normal'] & {
     position: static;
@@ -366,7 +366,7 @@ header {
 
         span {
           display: block;
-          background-color: fixit-var(global-font-color);
+          background-color: fi-var(global-font-color);
           width: 20px;
           height: 2px;
           transition: all 0.3s ease-in-out;
@@ -394,8 +394,8 @@ header {
     }
 
     .menu {
-      background-color: fixit-var(header-background-color);
-      border-top: 2px solid fixit-var(global-border-color-light);
+      background-color: fi-var(header-background-color);
+      border-top: 2px solid fi-var(global-border-color-light);
       display: none;
       overflow-y: auto;
       overscroll-behavior: contain;
@@ -412,7 +412,7 @@ header {
         line-height: 2.5rem;
         position: sticky;
         top: 0;
-        background-color: fixit-var(header-background-color);
+        background-color: fi-var(header-background-color);
         @include z-index(sticky);
       }
 
@@ -476,7 +476,7 @@ header {
         bottom: 0;
         line-height: 2.5rem;
         padding: 0 1rem;
-        background-color: fixit-var(header-background-color);
+        background-color: fi-var(header-background-color);
 
         .menu-system-item {
           padding-inline: 0.5rem;
@@ -517,7 +517,7 @@ header {
 
   &.open {
     .header-wrapper {
-      margin-top: calc(#{fixit-var(header-height)} * -1);
+      margin-top: calc(#{fi-var(header-height)} * -1);
     }
 
     .menu {
@@ -541,7 +541,7 @@ header {
 
 .search-dropdown {
   position: fixed;
-  top: fixit-var(header-height);
+  top: fi-var(header-height);
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
   @include z-index(fixed);
   box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@@ -562,13 +562,13 @@ header {
 
   .dropdown-menu {
     right: 0 !important;
-    background-color: fixit-var(global-background-color);
+    background-color: fi-var(global-background-color);
 
     .suggestions {
       overflow-y: auto;
       overscroll-behavior: contain;
       // 40px is the height of the search-footer
-      max-height: calc(100dvh - #{fixit-var(header-height)} - 40px);
+      max-height: calc(100dvh - #{fi-var(header-height)} - 40px);
 
       .suggestion {
         padding: 0.75rem 1rem;
@@ -592,7 +592,7 @@ header {
           .suggestion-date {
             font-size: 0.875rem;
             flex-shrink: 0;
-            color: fixit-var(global-font-tertiary-color);
+            color: fi-var(global-font-tertiary-color);
           }
         }
 
@@ -604,17 +604,17 @@ header {
           line-clamp: 2;
           overflow: hidden;
           text-overflow: ellipsis;
-          color: fixit-var(global-font-secondary-color);
+          color: fi-var(global-font-secondary-color);
           @include overflow-wrap(break-word);
         }
 
         em {
           font-style: normal;
-          background-color: fixit-var(selection-color);
+          background-color: fi-var(selection-color);
         }
 
         &.cursor {
-          background-color: fixit-var(code-block-background-color);
+          background-color: fi-var(code-block-background-color);
         }
 
         &:hover {
@@ -636,7 +636,7 @@ header {
       padding: 0.5rem 1rem;
       font-size: 0.875rem;
       text-align: right;
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
       @include link(false, false);
     }
   }
diff --git a/assets/css/_core/_layout/_pagination.scss b/assets/css/_core/_layout/_pagination.scss
index 5b8674f9..f26e7e36 100644
--- a/assets/css/_core/_layout/_pagination.scss
+++ b/assets/css/_core/_layout/_pagination.scss
@@ -10,7 +10,7 @@
 
   a {
     font-size: 0.8rem;
-    color: fixit-var(pagination-link-color);
+    color: fi-var(pagination-link-color);
     letter-spacing: 0.1rem;
     font-weight: 700;
     padding: 5px 5px;
@@ -30,7 +30,7 @@
     }
 
     &:hover a {
-      color: fixit-var(pagination-link-hover-color);
+      color: fi-var(pagination-link-hover-color);
     }
 
     &::before,
@@ -39,7 +39,7 @@
       content: '';
       width: 0;
       height: 3px;
-      background: fixit-var(pagination-link-hover-color);
+      background: fi-var(pagination-link-hover-color);
       bottom: 0px;
       transition: 0.3s;
     }
@@ -61,7 +61,7 @@
 
     &.active {
       a {
-        color: fixit-var(pagination-link-hover-color);
+        color: fi-var(pagination-link-hover-color);
       }
 
       &::before,
diff --git a/assets/css/_core/_mixin/_border-radius.scss b/assets/css/_core/_mixin/_border-radius.scss
index dcc71518..7c7466c5 100644
--- a/assets/css/_core/_mixin/_border-radius.scss
+++ b/assets/css/_core/_mixin/_border-radius.scss
@@ -7,8 +7,8 @@
 ///   @include border-radius(top);
 ///   @include border-radius(top, 10px);
 ///   @include border-radius(10px 20px 10px 20px);
-@mixin border-radius($value: fixit-var(global-border-radius), $radius: null) {
-  $r: if($radius, $radius, fixit-var(global-border-radius));
+@mixin border-radius($value: fi-var(global-border-radius), $radius: null) {
+  $r: if($radius, $radius, fi-var(global-border-radius));
 
   @if $value == full {
     border-radius: calc(infinity * 1px);
diff --git a/assets/css/_core/_mixin/_box-shadow.scss b/assets/css/_core/_mixin/_box-shadow.scss
index e630e647..96eead4e 100644
--- a/assets/css/_core/_mixin/_box-shadow.scss
+++ b/assets/css/_core/_mixin/_box-shadow.scss
@@ -13,7 +13,7 @@
   @if $when == always {
     box-shadow: $shadow;
   } @else if $when == hover {
-    transition: box-shadow 0.3s fixit-var(bezier);
+    transition: box-shadow 0.3s fi-var(bezier);
 
     &:hover {
       box-shadow: $shadow;
diff --git a/assets/css/_core/_mixin/_compatibility.scss b/assets/css/_core/_mixin/_compatibility.scss
index 920723ec..b79caf5d 100644
--- a/assets/css/_core/_mixin/_compatibility.scss
+++ b/assets/css/_core/_mixin/_compatibility.scss
@@ -1,4 +1,4 @@
-@mixin placeholder($color: fixit-var(global-font-tertiary-color)) {
+@mixin placeholder($color: fi-var(global-font-tertiary-color)) {
   input::-webkit-input-placeholder {
     color: $color;
   }
diff --git a/assets/css/_core/_mixin/_link-guard.scss b/assets/css/_core/_mixin/_link-guard.scss
index 1be778cb..1a00356a 100644
--- a/assets/css/_core/_mixin/_link-guard.scss
+++ b/assets/css/_core/_mixin/_link-guard.scss
@@ -2,7 +2,7 @@
 /// Keep this as the single source of truth for both link page card and guard dialog body.
 @mixin link-guard-content {
   padding: 1.5rem;
-  border: 1px solid fixit-var(global-border-color-light);
+  border: 1px solid fi-var(global-border-color-light);
   background: light-dark(#fff, #1d2230);
   box-shadow: 0 1rem 2rem light-dark(rgba(15, 23, 42, 0.18), rgba(0, 0, 0, 0.35));
   @include border-radius(1rem);
@@ -30,8 +30,8 @@
     flex: 1 1 auto;
     min-width: 0;
     background: light-dark(#f8fafc, #171b25);
-    border: 1px solid fixit-var(global-border-color);
-    font-family: fixit-var(code-font-family);
+    border: 1px solid fi-var(global-border-color);
+    font-family: fi-var(code-font-family);
     font-size: 0.875rem;
     line-height: 1rem;
     overflow: hidden;
@@ -49,15 +49,15 @@
     padding: 0.5rem;
     line-height: 1;
     background: light-dark(#f8fafc, #171b25);
-    border: 1px solid fixit-var(global-border-color);
-    color: fixit-var(global-font-secondary-color);
+    border: 1px solid fi-var(global-border-color);
+    color: fi-var(global-font-secondary-color);
     user-select: none;
     @include border-radius;
 
     &[data-copied] .fa-clone {
       --fa: "\f00c";
       font-weight: 900;
-      color: fixit-var(global-link-hover-color);
+      color: fi-var(global-link-hover-color);
     }
   }
 
@@ -71,17 +71,17 @@
   .cancel-btn,
   .confirm-btn {
     padding: 0.5rem 0.875rem;
-    border: 1px solid fixit-var(global-border-color-light);
+    border: 1px solid fi-var(global-border-color-light);
     background: light-dark(#f6f8fa, #2a313c);
-    color: fixit-var(global-font-color);
+    color: fi-var(global-font-color);
     user-select: none;
     @include border-radius;
   }
 
   .confirm-btn {
     color: #fff;
-    background-color: fixit-var(primary);
-    border-color: fixit-var(primary);
+    background-color: fi-var(primary);
+    border-color: fi-var(primary);
   }
 
   @include media('xs') {
diff --git a/assets/css/_core/_mixin/_loading.scss b/assets/css/_core/_mixin/_loading.scss
index 34a7d18a..5e984ccf 100644
--- a/assets/css/_core/_mixin/_loading.scss
+++ b/assets/css/_core/_mixin/_loading.scss
@@ -9,7 +9,7 @@
   backdrop-filter: blur(1rem);
   background-position: center;
   background-repeat: no-repeat;
-  background-image: fixit-var(loading-img);
+  background-image: fi-var(loading-img);
   background-size: 60px;
   @include z-index(loading);
 }
diff --git a/assets/css/_core/_mixin/_scrollbar-width.scss b/assets/css/_core/_mixin/_scrollbar-width.scss
index 8dd309ba..a83ed534 100644
--- a/assets/css/_core/_mixin/_scrollbar-width.scss
+++ b/assets/css/_core/_mixin/_scrollbar-width.scss
@@ -1,5 +1,5 @@
 @mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
-  @include set-fixit-vars((
+  @include set-fi-vars((
     scrollbar-width: $width,
     scrollbar-width-legacy: $widthLegacy,
   ));
diff --git a/assets/css/_core/_mixin/_sticky-top.scss b/assets/css/_core/_mixin/_sticky-top.scss
index 41d928e5..276f279b 100644
--- a/assets/css/_core/_mixin/_sticky-top.scss
+++ b/assets/css/_core/_mixin/_sticky-top.scss
@@ -8,8 +8,8 @@
 /// - Desktop auto hidden: reset to 0 when the auto header has faded out.
 /// - Desktop/mobile sticky: offset by header height plus breadcrumb height.
 @mixin sticky-top-offset($transition: true) {
-  $sticky-top-bar-offset: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)});
-  $base-top-offset: fixit-var(breadcrumb-height, 0px);
+  $sticky-top-bar-offset: calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)});
+  $base-top-offset: fi-var(breadcrumb-height, 0px);
 
   // Base offset reserved for the breadcrumb bar.
   top: $base-top-offset;
diff --git a/assets/css/_core/_mixin/_task-list.scss b/assets/css/_core/_mixin/_task-list.scss
index 075a858f..a6507887 100644
--- a/assets/css/_core/_mixin/_task-list.scss
+++ b/assets/css/_core/_mixin/_task-list.scss
@@ -4,14 +4,14 @@
 /// Set task list icon color and allow custom styles via @content
 /// @param {Color | Null} $color - Icon color (optional)
 /// Usage:
-///   @include task-icon(fixit-var(secondary)) {
+///   @include task-icon(fi-var(secondary)) {
 ///     opacity: 0.8;
 ///   }
 @mixin task-icon($color: null) {
 	> i {
 		// Set icon color (optional)
 		@if $color != null {
-			@include set-fixit-var(task-icon-color, $color);
+			@include set-fi-var(task-icon-color, $color);
 		}
 		@content;
 	}
@@ -20,14 +20,14 @@
 /// Set task list text color and allow custom styles via @content
 /// @param {Color | Null} $color - Text color (optional)
 /// Usage:
-///   @include task-text(fixit-var(secondary)) {
-///     text-decoration: line-through fixit-var(secondary);
+///   @include task-text(fi-var(secondary)) {
+///     text-decoration: line-through fi-var(secondary);
 ///   }
 @mixin task-text($color: null) {
 	> span {
 		// Set text color (optional)
 		@if $color != null {
-			@include set-fixit-var(task-text-color, $color);
+			@include set-fi-var(task-text-color, $color);
 		}
 		@content;
 	}
diff --git a/assets/css/_core/_mixin/_theme-vars.scss b/assets/css/_core/_mixin/_theme-vars.scss
index 8634ad41..ff08b8e8 100644
--- a/assets/css/_core/_mixin/_theme-vars.scss
+++ b/assets/css/_core/_mixin/_theme-vars.scss
@@ -6,19 +6,19 @@
 /// @param {String} $name - CSS variable name (without prefix)
 /// @param {*} $value - Variable value
 /// @example
-///   @include set-fixit-var(custom-color, #ff0000);
-@mixin set-fixit-var($name, $value) {
+///   @include set-fi-var(custom-color, #ff0000);
+@mixin set-fi-var($name, $value) {
   #{$rootPrefix}#{$name}: #{$value};
 }
 
 /// Batch set CSS variables
 /// @param {Map} $vars - Variable map, key is CSS variable name (without prefix), value is variable value
 /// @example
-///   @include set-fixit-vars((
+///   @include set-fi-vars((
 ///     custom-color: #ff0000,
 ///     custom-bg: #00ff00,
 ///   ));
-@mixin set-fixit-vars($vars) {
+@mixin set-fi-vars($vars) {
   @each $name, $value in $vars {
     #{$rootPrefix}#{$name}: #{$value};
   }
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index 0980a5a9..d3f33fad 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -29,7 +29,7 @@
   // ----------------------------------------
   // Theme-Independent Variables
   // ----------------------------------------
-  @include set-fixit-vars((
+  @include set-fi-vars((
     // Global Typography
     global-font-family: $global-font-family,
     global-font-size: $global-font-size,
@@ -67,11 +67,11 @@
     bezier: cubic-bezier(.4, 0, .2, 1),
 
     // Other utilities
-    divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
+    divider-edge-weak: linear-gradient(to right, transparent, fi-var(divider-bg, #d0d0d5), transparent),
   ));
 
   &:has(.breadcrumb-container.sticky) {
-    @include set-fixit-var(breadcrumb-height, 2.5rem);
+    @include set-fi-var(breadcrumb-height, 2.5rem);
   }
 }
 
diff --git a/assets/css/_core/_widgets/_cell-tooltip.scss b/assets/css/_core/_widgets/_cell-tooltip.scss
index 4995bbbf..cafc429b 100644
--- a/assets/css/_core/_widgets/_cell-tooltip.scss
+++ b/assets/css/_core/_widgets/_cell-tooltip.scss
@@ -1,7 +1,7 @@
 body {
   .cell-tooltip {
     --tooltip-bg: light-dark(#ffffff, #3d444d);
-    --tooltip-color: fixit-var(global-font-color);
+    --tooltip-color: fi-var(global-font-color);
     --tooltip-shadow-color: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.18));
   }
 }
diff --git a/assets/css/_core/_widgets/_cookieconsent.scss b/assets/css/_core/_widgets/_cookieconsent.scss
index 6a52024e..6b07c6bb 100644
--- a/assets/css/_core/_widgets/_cookieconsent.scss
+++ b/assets/css/_core/_widgets/_cookieconsent.scss
@@ -1,7 +1,7 @@
 .cc-window.cc-banner {
   .cc-btn {
-    color: fixit-var(global-font-color);
-    background-color: fixit-var(global-background-color);
+    color: fi-var(global-font-color);
+    background-color: fi-var(global-background-color);
 
     &:hover,
     &:focus {
diff --git a/assets/css/_core/_widgets/_details.scss b/assets/css/_core/_widgets/_details.scss
index 8a7d8ebb..d0c4b2ec 100644
--- a/assets/css/_core/_widgets/_details.scss
+++ b/assets/css/_core/_widgets/_details.scss
@@ -8,11 +8,11 @@
     }
 
     i.details-icon {
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
       transition: all 0.2s ease;
 
       &:hover {
-        color: fixit-var(global-font-color);
+        color: fi-var(global-font-color);
       }
     }
   }
diff --git a/assets/css/_core/_widgets/_fixed-button.scss b/assets/css/_core/_widgets/_fixed-button.scss
index 5ad51d7c..abcc2c90 100644
--- a/assets/css/_core/_widgets/_fixed-button.scss
+++ b/assets/css/_core/_widgets/_fixed-button.scss
@@ -12,7 +12,7 @@
   font-size: 1rem;
   line-height: 1.5rem;
   padding: 0.5rem 0.625rem;
-  color: fixit-var(global-font-secondary-color);
+  color: fi-var(global-font-secondary-color);
   transition: color 0.4s ease;
   background-color: light-dark(#f1f1f1, #1e1e1f);
   @include border-radius(full);
@@ -21,7 +21,7 @@
   &:active,
   &:focus {
     outline: none;
-    color: fixit-var(global-font-color);
+    color: fi-var(global-font-color);
   }
 
   @include media('print') {
@@ -32,11 +32,11 @@
 .back-to-top {
   overflow: hidden;
   position: relative;
-  @include set-fixit-vars((
+  @include set-fi-vars((
     // Ring stroke width
     b2t-stroke: 0.5rem,
     // Progress color
-    b2t-prog: light-dark(fixit-var(success), fixit-var(global-font-color)),
+    b2t-prog: light-dark(fi-var(success), fi-var(global-font-color)),
     // dasharray = circumference = 2πr
     // dashoffset = circumference * (1 - scrollPercent / 100)
     b2t-dasharray: 314.15
@@ -55,18 +55,18 @@
 
   .bg {
     fill: none;
-    stroke: fixit-var(global-border-color-light);
-    stroke-width: fixit-var(b2t-stroke);
+    stroke: fi-var(global-border-color-light);
+    stroke-width: fi-var(b2t-stroke);
   }
 
   // Progress ring
   .progress {
     fill: none;
-    stroke: fixit-var(b2t-prog);
-    stroke-width: fixit-var(b2t-stroke);
+    stroke: fi-var(b2t-prog);
+    stroke-width: fi-var(b2t-stroke);
     stroke-linecap: round;
-    stroke-dasharray: fixit-var(b2t-dasharray);
-    stroke-dashoffset: calc(#{fixit-var(b2t-dasharray)} * (1 - #{fixit-var(b2t-progress, 0)} / 100));
+    stroke-dasharray: fi-var(b2t-dasharray);
+    stroke-dashoffset: calc(#{fi-var(b2t-dasharray)} * (1 - #{fi-var(b2t-progress, 0)} / 100));
     transition: stroke-dashoffset .1s linear;
   }
 }
diff --git a/assets/css/_core/_widgets/_github-corner.scss b/assets/css/_core/_widgets/_github-corner.scss
index 4be557d5..7f3aebb1 100644
--- a/assets/css/_core/_widgets/_github-corner.scss
+++ b/assets/css/_core/_widgets/_github-corner.scss
@@ -23,11 +23,11 @@
   }
 
   svg {
-    width: fixit-var(header-height);
-    height: fixit-var(header-height);
+    width: fi-var(header-height);
+    height: fi-var(header-height);
     border: 0;
-    color: fixit-var(github-corner-color);
-    fill: fixit-var(github-corner-fill);
+    color: fi-var(github-corner-color);
+    fill: fi-var(github-corner-fill);
   }
 
   &.left {
diff --git a/assets/css/_core/_widgets/_link-guard.scss b/assets/css/_core/_widgets/_link-guard.scss
index bee5e0ad..8a04f579 100644
--- a/assets/css/_core/_widgets/_link-guard.scss
+++ b/assets/css/_core/_widgets/_link-guard.scss
@@ -3,7 +3,7 @@
   max-width: 100%;
   border: none;
   padding: 0;
-  color: fixit-var(global-font-color);
+  color: fi-var(global-font-color);
   background-color: transparent;
   opacity: 0;
   transform: translateY(12px) scale(0.98);
diff --git a/assets/css/_core/_widgets/_noscript-warning.scss b/assets/css/_core/_widgets/_noscript-warning.scss
index b549f908..9dd7087b 100644
--- a/assets/css/_core/_widgets/_noscript-warning.scss
+++ b/assets/css/_core/_widgets/_noscript-warning.scss
@@ -1,5 +1,5 @@
 .noscript-warning {
-  background-color: fixit-var(danger);
+  background-color: fi-var(danger);
   color: white;
   font-size: 1rem;
   font-weight: bold;
diff --git a/assets/css/_core/_widgets/_reading-progress.scss b/assets/css/_core/_widgets/_reading-progress.scss
index fad5e45f..10543b69 100644
--- a/assets/css/_core/_widgets/_reading-progress.scss
+++ b/assets/css/_core/_widgets/_reading-progress.scss
@@ -1,9 +1,9 @@
 .reading-progress-bar {
-  height: fixit-var(progress-h, 2px);
-  width: fixit-var(progress, 0);
+  height: fi-var(progress-h, 2px);
+  width: fi-var(progress, 0);
   background-color: light-dark(
-    fixit-var(bg-progress, fixit-var(success)),
-    fixit-var(bg-progress-dark, fixit-var(global-font-color))
+    fi-var(bg-progress, fi-var(success)),
+    fi-var(bg-progress-dark, fi-var(global-font-color))
   );
   position: fixed;
   @include z-index(fixed);
diff --git a/assets/css/_core/_widgets/_scrollbar.scss b/assets/css/_core/_widgets/_scrollbar.scss
index f2c49fef..4d2bd9f0 100644
--- a/assets/css/_core/_widgets/_scrollbar.scss
+++ b/assets/css/_core/_widgets/_scrollbar.scss
@@ -1,8 +1,8 @@
 /* Modern browsers with `scrollbar-*` support (high priority) */
 @supports (scrollbar-width: auto) {
   * {
-    scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
-    scrollbar-width: fixit-var(scrollbar-width);
+    scrollbar-color: fi-var(scrollbar-thumb-color) fi-var(scrollbar-track-color);
+    scrollbar-width: fi-var(scrollbar-width);
 
     @include media('print') {
       scrollbar-width: none;
@@ -12,8 +12,8 @@
 
 /* Legacy browsers with `::-webkit-scrollbar-*` support */
 ::-webkit-scrollbar {
-  height: fixit-var(scrollbar-width-legacy);
-  width: fixit-var(scrollbar-width-legacy);
+  height: fi-var(scrollbar-width-legacy);
+  width: fi-var(scrollbar-width-legacy);
   overflow: visible;
 
   @include media('print') {
@@ -25,16 +25,16 @@
   width: 0;
 }
 ::-webkit-scrollbar-corner {
-  background-color: fixit-var(scrollbar-track-color);
+  background-color: fi-var(scrollbar-track-color);
 }
 ::-webkit-scrollbar-thumb {
-  background-color: fixit-var(scrollbar-thumb-color);
+  background-color: fi-var(scrollbar-thumb-color);
   &:hover {
-    background-color: fixit-var(scrollbar-thumb-hover-color);
+    background-color: fi-var(scrollbar-thumb-hover-color);
   }
 }
 ::-webkit-scrollbar-track {
-  background-color: fixit-var(scrollbar-track-color);
+  background-color: fi-var(scrollbar-track-color);
 }
 ::-webkit-scrollbar-thumb,
 ::-webkit-scrollbar-track {
diff --git a/assets/css/_core/_widgets/_typeit.scss b/assets/css/_core/_widgets/_typeit.scss
index da287e2b..472a5c95 100644
--- a/assets/css/_core/_widgets/_typeit.scss
+++ b/assets/css/_core/_widgets/_typeit.scss
@@ -2,13 +2,13 @@
   .highlight {
     padding: 0.375rem;
     font-size: 0.875rem;
-    font-family: fixit-var(code-font-family);
+    font-family: fi-var(code-font-family);
     font-weight: bold;
     word-break: break-all;
     white-space: pre-wrap;
   }
 
-  --ti-cursor-color: fixit-var(global-font-color);
-  --ti-cursor-font-family: fixit-var(global-font-family);
+  --ti-cursor-color: fi-var(global-font-color);
+  --ti-cursor-font-family: fi-var(global-font-family);
   --ti-cursor-transform: translateX(0);
 }
diff --git a/assets/css/_page/_archive/_tags.scss b/assets/css/_page/_archive/_tags.scss
index 8402e307..c87ded72 100644
--- a/assets/css/_page/_archive/_tags.scss
+++ b/assets/css/_page/_archive/_tags.scss
@@ -14,13 +14,13 @@
       transform: scale(1.2);
 
       sup {
-        color: fixit-var(global-font-color);
+        color: fi-var(global-font-color);
         transition: all ease-out 0.3s;
       }
     }
 
     sup {
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
     }
   }
 }
@@ -29,14 +29,14 @@
   text-align: center;
 
   .tag-item {
-    color: fixit-var(tag-cloud-color);
-    font-size: fixit-var(tag-cloud-font);
+    color: fi-var(tag-cloud-color);
+    font-size: fi-var(tag-cloud-font);
     margin: 10px;
 
     &:active,
     &:focus,
     &:hover {
-      color: fixit-var(global-link-hover-color);
+      color: fi-var(global-link-hover-color);
 
       sup {
         opacity: 1;
@@ -49,7 +49,7 @@
 
     @for $grade from 0 through 10 {
       &[data-grade="#{$grade}"] {
-        @include set-fixit-var(
+        @include set-fi-var(
           tag-cloud-color,
           light-dark(
             mix($tag-cloud-end, $tag-cloud-start, $grade * 10),
diff --git a/assets/css/_page/_archive/_terms.scss b/assets/css/_page/_archive/_terms.scss
index 5908b937..e40288bc 100644
--- a/assets/css/_page/_archive/_terms.scss
+++ b/assets/css/_page/_archive/_terms.scss
@@ -63,7 +63,7 @@
 
 .archive-item-date {
   text-align: right;
-  color: fixit-var(global-font-secondary-color);
+  color: fi-var(global-font-secondary-color);
   white-space: nowrap;
   @extend .variant-numeric;
 }
diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
index 65f82d7e..7a9c10ea 100644
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -58,7 +58,7 @@
       font-weight: normal;
       margin: 0;
       padding: 0.5rem;
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
     }
   }
 }
@@ -75,7 +75,7 @@
   .summary {
     position: relative;
     padding-block: 1rem;
-    color: fixit-var(global-font-color);
+    color: fi-var(global-font-color);
 
     &:not(:last-of-type)::after {
       content: '';
@@ -85,8 +85,8 @@
       transform: translateY(18px);
       background: repeating-linear-gradient(
         135deg,
-        fixit-var(global-border-color) 0px,
-        fixit-var(global-border-color) 4px,
+        fi-var(global-border-color) 0px,
+        fi-var(global-border-color) 4px,
         transparent 4px,
         transparent 8px
       );
@@ -126,12 +126,12 @@
 
     .content {
       margin-top: 0.3rem;
-      color: fixit-var(global-font-tertiary-color);  
+      color: fi-var(global-font-tertiary-color);  
       @include link(false, true);
 
       b,
       strong {
-        color: fixit-var(global-font-tertiary-color);
+        color: fi-var(global-font-tertiary-color);
       }
     }
 
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 3096e912..df19794d 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -4,29 +4,29 @@
 
   .content {
     [id] {
-      scroll-margin-top: fixit-var(scroll-margin-top, 0.5rem);
+      scroll-margin-top: fi-var(scroll-margin-top, 0.5rem);
 
       @include media('sm', 'up') {
         [data-header-desktop='sticky'] &,
         [data-header-desktop='auto'] & {
-          @include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + 0.5rem));
+          @include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + 0.5rem));
         }
 
         [data-header-desktop='sticky']:has(.breadcrumb-container.sticky) &,
         [data-header-desktop='auto']:has(.breadcrumb-container.sticky) & {
-          @include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)} + 0.5rem));
+          @include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)} + 0.5rem));
         }
       }
 
       @include media('xs') {
         [data-header-mobile='sticky'] &,
         [data-header-mobile='auto'] & {
-          @include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + 0.5rem));
+          @include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + 0.5rem));
         }
 
         [data-header-mobile='sticky']:has(.breadcrumb-container.sticky) &,
         [data-header-mobile='auto']:has(.breadcrumb-container.sticky) & {
-          @include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)} + 0.5rem));
+          @include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)} + 0.5rem));
         }
       }
     }
diff --git a/assets/css/_page/_link.scss b/assets/css/_page/_link.scss
index b5d9dc8c..fce327e5 100644
--- a/assets/css/_page/_link.scss
+++ b/assets/css/_page/_link.scss
@@ -13,6 +13,6 @@
   }
 
   body:has(&) {
-    @include set-fixit-var(global-background-color, fixit-var(header-background-color));
+    @include set-fi-var(global-background-color, fi-var(header-background-color));
   }
 }
diff --git a/assets/css/_page/_single/_alert.scss b/assets/css/_page/_single/_alert.scss
index e2d59c98..de40259e 100644
--- a/assets/css/_page/_single/_alert.scss
+++ b/assets/css/_page/_single/_alert.scss
@@ -2,7 +2,7 @@
   padding: 0.5rem 1rem;
   margin-block: 1rem;
   color: inherit;
-  border-left: 0.25em solid fixit-var(alert-border-color);
+  border-left: 0.25em solid fi-var(alert-border-color);
 
   > :first-child {
     margin-top: 0;
@@ -17,7 +17,7 @@
     align-items: center;
     line-height: 1;
     margin-bottom: 1rem;
-    color: fixit-var(alert-color);
+    color: fi-var(alert-color);
 
     > svg.icon {
       width: initial;
@@ -30,7 +30,7 @@
     $dark-item: map-get($alert-color-map-dark, $type);
 
     &.alert-#{$type} {
-      @include set-fixit-vars((
+      @include set-fi-vars((
         alert-border-color: light-dark(map-get($item, border-color), map-get($dark-item, border-color)),
         alert-color: light-dark(map-get($item, color), map-get($dark-item, color))
       ));
diff --git a/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss b/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss
index 6b6eb6dd..a8674615 100644
--- a/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss
+++ b/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss
@@ -5,7 +5,7 @@
 /// Created on 2022-03-01
 /// Updated on 2026-02-03
 & {
-  @include set-fixit-vars((
+  @include set-fi-vars((
     // Blob colors
     color-blob-num: #778491,
     color-blob-code-inner: #c5d1de,
@@ -43,37 +43,37 @@
   ));
 
   .blob-num {
-    color: fixit-var(color-blob-num);
+    color: fi-var(color-blob-num);
   }
   .blob-code-inner {
-    color: fixit-var(color-blob-code-inner);
+    color: fi-var(color-blob-code-inner);
   }
 
   .pl-c /* comment, punctuation.definition.comment, string.comment */ {
-    color: fixit-var(color-prettylights-syntax-comment);
+    color: fi-var(color-prettylights-syntax-comment);
   }
 
   .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
   .pl-s .pl-v /* string variable */ {
-    color: fixit-var(color-prettylights-syntax-constant);
+    color: fi-var(color-prettylights-syntax-constant);
   }
 
   .pl-e /* entity */,
   .pl-en /* entity.name */ {
-    color: fixit-var(color-prettylights-syntax-entity);
+    color: fi-var(color-prettylights-syntax-entity);
   }
 
   .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
   .pl-s .pl-s1 /* string source */ {
-    color: fixit-var(color-prettylights-syntax-storage-modifier-import);
+    color: fi-var(color-prettylights-syntax-storage-modifier-import);
   }
 
   .pl-ent /* entity.name.tag, markup.quote */ {
-    color: fixit-var(color-prettylights-syntax-entity-tag);
+    color: fi-var(color-prettylights-syntax-entity-tag);
   }
 
   .pl-k /* keyword, storage, storage.type */ {
-    color: fixit-var(color-prettylights-syntax-keyword);
+    color: fi-var(color-prettylights-syntax-keyword);
   }
 
   .pl-s /* string */,
@@ -83,26 +83,26 @@
   .pl-sr .pl-cce /* string.regexp constant.character.escape */,
   .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
   .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
-    color: fixit-var(color-prettylights-syntax-string);
+    color: fi-var(color-prettylights-syntax-string);
   }
 
   .pl-v /* variable */,
   .pl-smw /* sublimelinter.mark.warning */ {
-    color: fixit-var(color-prettylights-syntax-variable);
+    color: fi-var(color-prettylights-syntax-variable);
   }
 
   .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
-    color: fixit-var(color-prettylights-syntax-brackethighlighter-unmatched);
+    color: fi-var(color-prettylights-syntax-brackethighlighter-unmatched);
   }
 
   .pl-ii /* invalid.illegal */ {
-    color: fixit-var(color-prettylights-syntax-invalid-illegal-text);
-    background-color: fixit-var(color-prettylights-syntax-invalid-illegal-bg);
+    color: fi-var(color-prettylights-syntax-invalid-illegal-text);
+    background-color: fi-var(color-prettylights-syntax-invalid-illegal-bg);
   }
 
   .pl-c2 /* carriage-return */ {
-    color: fixit-var(color-prettylights-syntax-carriage-return-text);
-    background-color: fixit-var(color-prettylights-syntax-carriage-return-bg);
+    color: fi-var(color-prettylights-syntax-carriage-return-text);
+    background-color: fi-var(color-prettylights-syntax-carriage-return-bg);
   }
 
   .pl-c2::before /* carriage-return */ {
@@ -111,65 +111,65 @@
 
   .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
     font-weight: bold;
-    color: fixit-var(color-prettylights-syntax-string-regexp);
+    color: fi-var(color-prettylights-syntax-string-regexp);
   }
 
   .pl-ml /* markup.list */ {
-    color: fixit-var(color-prettylights-syntax-markup-list);
+    color: fi-var(color-prettylights-syntax-markup-list);
   }
 
   .pl-mh /* markup.heading */,
   .pl-mh .pl-en /* markup.heading entity.name */,
   .pl-ms /* meta.separator */ {
     font-weight: bold;
-    color: fixit-var(color-prettylights-syntax-markup-heading);
+    color: fi-var(color-prettylights-syntax-markup-heading);
   }
 
   .pl-mi /* markup.italic */ {
     font-style: italic;
-    color: fixit-var(color-prettylights-syntax-markup-italic);
+    color: fi-var(color-prettylights-syntax-markup-italic);
   }
 
   .pl-mb /* markup.bold */ {
     font-weight: bold;
-    color: fixit-var(color-prettylights-syntax-markup-bold);
+    color: fi-var(color-prettylights-syntax-markup-bold);
   }
 
   .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
-    color: fixit-var(color-prettylights-syntax-markup-deleted-text);
-    background-color: fixit-var(color-prettylights-syntax-markup-deleted-bg);
+    color: fi-var(color-prettylights-syntax-markup-deleted-text);
+    background-color: fi-var(color-prettylights-syntax-markup-deleted-bg);
   }
 
   .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
-    color: fixit-var(color-prettylights-syntax-markup-inserted-text);
-    background-color: fixit-var(color-prettylights-syntax-markup-inserted-bg);
+    color: fi-var(color-prettylights-syntax-markup-inserted-text);
+    background-color: fi-var(color-prettylights-syntax-markup-inserted-bg);
   }
 
   .pl-mc /* markup.changed, punctuation.definition.changed */ {
-    color: fixit-var(color-prettylights-syntax-markup-changed-text);
-    background-color: fixit-var(color-prettylights-syntax-markup-changed-bg);
+    color: fi-var(color-prettylights-syntax-markup-changed-text);
+    background-color: fi-var(color-prettylights-syntax-markup-changed-bg);
   }
 
   .pl-mi2 /* markup.ignored, markup.untracked */ {
-    color: fixit-var(color-prettylights-syntax-markup-ignored-text);
-    background-color: fixit-var(color-prettylights-syntax-markup-ignored-bg);
+    color: fi-var(color-prettylights-syntax-markup-ignored-text);
+    background-color: fi-var(color-prettylights-syntax-markup-ignored-bg);
   }
 
   .pl-mdr /* meta.diff.range */ {
     font-weight: bold;
-    color: fixit-var(color-prettylights-syntax-meta-diff-range);
+    color: fi-var(color-prettylights-syntax-meta-diff-range);
   }
 
   .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
-    color: fixit-var(color-prettylights-syntax-brackethighlighter-angle);
+    color: fi-var(color-prettylights-syntax-brackethighlighter-angle);
   }
 
   .pl-sg /* sublimelinter.gutter-mark */ {
-    color: fixit-var(color-prettylights-syntax-sublimelinter-gutter-mark);
+    color: fi-var(color-prettylights-syntax-sublimelinter-gutter-mark);
   }
 
   .pl-corl /* constant.other.reference.link, string.other.link */ {
     text-decoration: underline;
-    color: fixit-var(color-prettylights-syntax-constant-other-reference-link);
+    color: fi-var(color-prettylights-syntax-constant-other-reference-link);
   }
 }
diff --git a/assets/css/_page/_single/_code-syntax/_index.scss b/assets/css/_page/_single/_code-syntax/_index.scss
index 7fe22626..f67f86a9 100644
--- a/assets/css/_page/_single/_code-syntax/_index.scss
+++ b/assets/css/_page/_single/_code-syntax/_index.scss
@@ -17,8 +17,8 @@
   /* LineHighlight */
   .hl {
     display: block;
-    background-color: fixit-var(code-highlight-color);
-    box-shadow: -0.75rem 0 0 fixit-var(code-highlight-color), 0.75rem 0 0 fixit-var(code-highlight-color);
+    background-color: fi-var(code-highlight-color);
+    box-shadow: -0.75rem 0 0 fi-var(code-highlight-color), 0.75rem 0 0 fi-var(code-highlight-color);
   }
 
   @import 'light';
diff --git a/assets/css/_page/_single/_code.scss b/assets/css/_page/_single/_code.scss
index 7d01d96e..c346b92f 100644
--- a/assets/css/_page/_single/_code.scss
+++ b/assets/css/_page/_single/_code.scss
@@ -9,9 +9,9 @@ pre {
   line-height: 1.45em;
   padding: 0.5rem 0.75rem;
   overflow: auto;
-  font-size: fixit-var(code-block-font-size);
-  font-family: fixit-var(code-font-family);
-  background-color: fixit-var(code-block-background-color);
+  font-size: fi-var(code-block-font-size);
+  font-family: fi-var(code-font-family);
+  background-color: fi-var(code-block-background-color);
   tab-size: 4;
   @include border-radius;
 
@@ -37,9 +37,9 @@ pre {
 
 .highlight,
 .gist {
-  font-size: fixit-var(code-block-font-size);
-  font-family: fixit-var(code-font-family);
-  @include set-fixit-var(scrollbar-thumb-color, inherit);
+  font-size: fi-var(code-block-font-size);
+  font-family: fi-var(code-font-family);
+  @include set-fi-var(scrollbar-thumb-color, inherit);
 
   table {
     width: 100%;
@@ -67,7 +67,7 @@ pre {
   // lineNumbersInTable=true
   > div.chroma {
     position: relative;
-    background-color: fixit-var(code-block-background-color);
+    background-color: fi-var(code-block-background-color);
     @include border-radius;
 
     &:is(pre):has(.ln) {
@@ -78,7 +78,7 @@ pre {
       overflow: auto;
       overscroll-behavior-x: none;
       display: block;
-      background-color: fixit-var(code-block-background-color);
+      background-color: fi-var(code-block-background-color);
       @include border-radius;
 
       td {
@@ -117,7 +117,7 @@ pre {
   // Line numbers
   .lnt,
   .ln {
-    color: fixit-var(global-font-secondary-color);
+    color: fi-var(global-font-secondary-color);
     user-select: none;
   }
 
@@ -145,13 +145,13 @@ pre {
       overflow: hidden;
       height: auto;
       position: relative;
-      counter-reset: codeNos calc(#{fixit-var(line-start)} - 1);
+      counter-reset: codeNos calc(#{fi-var(line-start)} - 1);
       transition: height 0.5s ease-out;
       @include border-radius;
       @include border-radius;
       // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
       // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
-      @include set-fixit-vars((
+      @include set-fi-vars((
         max-shown-lines: attr(data-max number, 10),
         line-start: attr(data-line-start number, 1),
         line-digit: attr(data-line-digit number, 1),
@@ -165,10 +165,10 @@ pre {
     // code preview
     &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
       .code-wrapper {
-        height: calc(1.45em * #{fixit-var(max-shown-lines)} + #{fixit-var(code-expand-offset, 0.5rem)});
+        height: calc(1.45em * #{fi-var(max-shown-lines)} + #{fi-var(code-expand-offset, 0.5rem)});
       }
       &[data-mode='mac'] .code-wrapper {
-        @include set-fixit-var(code-expand-offset, 1.875rem + 0.5rem);
+        @include set-fi-var(code-expand-offset, 1.875rem + 0.5rem);
       }
     }
     
@@ -178,11 +178,11 @@ pre {
       align-items: center;
       box-sizing: border-box;
       width: 100%;
-      font-family: fixit-var(global-font-family);
+      font-family: fi-var(global-font-family);
       font-weight: bold;
       line-height: 1.4em;
-      color: fixit-var(code-header-color);
-      background-color: fixit-var(code-header-background-color);
+      color: fi-var(code-header-color);
+      background-color: fi-var(code-header-background-color);
       position: sticky;
       transition: border-radius 0s;
       cursor: pointer;
@@ -204,7 +204,7 @@ pre {
 
         &::after {
           padding-left: 0.2rem;
-          content: attr(data-name, fixit-var(code-type, 'Code'));
+          content: attr(data-name, fi-var(code-type, 'Code'));
         }
 
         // filename for code block
@@ -221,7 +221,7 @@ pre {
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
-          background-color: fixit-var(code-header-background-color);
+          background-color: fi-var(code-header-background-color);
           padding-inline: 1em;
           max-width: calc(100% - 200px);
           white-space: nowrap;
@@ -247,25 +247,25 @@ pre {
       .copy-btn[data-copied] .fa-clone {
         --fa: "\f00c";
         font-weight: 900;
-        color: fixit-var(global-link-hover-color);
+        color: fi-var(global-link-hover-color);
       }
 
       .download-btn[data-downloaded] .fa-download {
         --fa: "\f1ce";
         font-weight: 900;
-        color: fixit-var(global-link-hover-color);
+        color: fi-var(global-link-hover-color);
       }
 
       .fullscreen-btn[data-fullscreen] .fa-expand {
         --fa: "\f066";
         font-weight: 900;
-        color: fixit-var(global-link-hover-color);
+        color: fi-var(global-link-hover-color);
       }
 
       @each $type, $text in $code-type-map {
         &.language-#{to-lower-case($type)} {
           // e.g., --fi-code-type: "JavaScript";
-          @include set-fixit-var(code-type, '"#{$text}"');
+          @include set-fi-var(code-type, '"#{$text}"');
         }
       }
 
@@ -278,7 +278,7 @@ pre {
     &:not(.line-nos-hidden) .line-nos-btn,
     .code-header button:hover,
     &:has([contenteditable='true']) .edit-btn {
-      color: fixit-var(global-link-hover-color);
+      color: fi-var(global-link-hover-color);
     }
 
     &.is-fullscreen {
@@ -344,7 +344,7 @@ pre {
       .code-header {
         transition: border-radius 0.2s ease 0.2s;
         @include border-radius;
-        @include set-fixit-var(
+        @include set-fi-var(
           code-header-background-color,
           light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
         );
@@ -453,11 +453,11 @@ pre {
           content: counter(codeNos);
           white-space: nowrap;
           text-align: right;
-          min-width: calc(#{fixit-var(line-digit)} * 1ch);
+          min-width: calc(#{fi-var(line-digit)} * 1ch);
           padding-inline: 0.75rem;
           flex-shrink: 0;
-          color: fixit-var(global-font-secondary-color);
-          background-color: fixit-var(code-block-background-color);
+          color: fi-var(global-font-secondary-color);
+          background-color: fi-var(code-block-background-color);
         }
 
         // highlight for line numbers
@@ -483,7 +483,7 @@ pre {
 
     // add border for non-classic mode
     &:not([data-mode='classic']) {
-      border: 1px solid fixit-var(global-border-color-light);
+      border: 1px solid fi-var(global-border-color-light);
     }
 
     &[data-mode='mac'] {
@@ -491,8 +491,8 @@ pre {
         padding-top: 1.875rem;
 
         &::after {
-          background: fixit-var(mac-red, #fc625d);
-          box-shadow: 20px 0 fixit-var(mac-yellow, #fdbc40), 40px 0 fixit-var(mac-green, #35cd4b);
+          background: fi-var(mac-red, #fc625d);
+          box-shadow: 20px 0 fi-var(mac-yellow, #fdbc40), 40px 0 fi-var(mac-green, #35cd4b);
           left: 8px;
           top: 8px;
           position: absolute;
@@ -502,7 +502,7 @@ pre {
           @include border-radius(full);
 
           @include dark-mode {
-            @include set-fixit-vars((
+            @include set-fi-vars((
               mac-red: #ff5f56,
               mac-yellow: #febc2e,
               mac-green: #28c840,
@@ -524,7 +524,7 @@ pre {
 
 // gist shortcode
 .gist {
-  background-color: fixit-var(code-block-background-color);
+  background-color: fi-var(code-block-background-color);
   @include border-radius(top);
   
   .gist-file,
@@ -546,7 +546,7 @@ pre {
         td.blob-num {
           position: sticky;
           left: 0;
-          background-color: fixit-var(code-block-background-color);
+          background-color: fi-var(code-block-background-color);
           @include z-index(base);
         }
 
@@ -561,7 +561,7 @@ pre {
     padding: 0.4rem 0.8rem;
     @include link(false, false);
     @include border-radius(bottom);
-    background-color: fixit-var(gist-meta-background-color);
+    background-color: fi-var(gist-meta-background-color);
   }
 
   @include dark-mode {
@@ -572,8 +572,8 @@ pre {
 // Code Tabs
 .code-tabs {
   margin: 0.5rem 0;
-  background-color: fixit-var(code-block-background-color);
-  border: 1px solid fixit-var(global-border-color-light);
+  background-color: fi-var(code-block-background-color);
+  border: 1px solid fi-var(global-border-color-light);
   @include border-radius;
 
   &[data-shadow='always'] {
@@ -591,7 +591,7 @@ pre {
   &:has(.code-block.active.line-wrapping) .tabs-actions .line-wrap-btn,
   &:has(.code-block.active:not(.line-nos-hidden)) .tabs-actions .line-nos-btn,
   &:has(.code-block.active [contenteditable='true']) .tabs-actions .edit-btn {
-    color: fixit-var(global-link-hover-color);
+    color: fi-var(global-link-hover-color);
   }
 
   .tabs-header {
@@ -599,11 +599,11 @@ pre {
     justify-content: space-between;
     align-items: center;
     line-height: 1.4em;
-    font-size: fixit-var(code-block-font-size);
-    color: fixit-var(code-header-color);
-    background-color: fixit-var(code-header-background-color);
+    font-size: fi-var(code-block-font-size);
+    color: fi-var(code-header-color);
+    background-color: fi-var(code-header-background-color);
     position: sticky;
-    border-bottom: 1px solid fixit-var(global-border-color);
+    border-bottom: 1px solid fi-var(global-border-color);
     @include z-index(base, 1);
     @include border-radius(top);
     @include sticky-top-offset;
@@ -617,14 +617,14 @@ pre {
       .before-tabs {
         padding: 0.4rem 0.6rem;
         white-space: nowrap;
-        color: fixit-var(global-font-color);
+        color: fi-var(global-font-color);
       }
 
       .tab-item {
         padding: 0.4rem 0.8rem;
         cursor: pointer;
         font-weight: bold;
-        color: fixit-var(global-font-secondary-color);
+        color: fi-var(global-font-secondary-color);
         white-space: nowrap;
         user-select: none;
         @include border-radius;
@@ -637,7 +637,7 @@ pre {
       &:not(:has(.tab-item:hover)) .tab-item.active,
       .tab-item:hover {
         anchor-name: #{$rootPrefix}tab-hover;
-        color: fixit-var(global-font-color);
+        color: fi-var(global-font-color);
       }
 
       &::before {
@@ -648,7 +648,7 @@ pre {
         translate: 2px 2px;
         width: calc(anchor-size(width) - 0.25rem);
         height: calc(anchor-size(height) - 0.25rem);
-        box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fixit-var(global-font-secondary-color) 30%, transparent);
+        box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fi-var(global-font-secondary-color) 30%, transparent);
         pointer-events: none;
         transition: 0.3s ease-in-out;
         @include border-radius;
@@ -663,19 +663,19 @@ pre {
         padding: 0.4rem;
 
         &:hover {
-          color: fixit-var(global-link-hover-color);
+          color: fi-var(global-link-hover-color);
         }
 
         &.copy-btn[data-copied] .fa-clone {
           --fa: "\f00c";
           font-weight: 900;
-          color: fixit-var(global-link-hover-color);
+          color: fi-var(global-link-hover-color);
         }
 
         &.download-btn[data-downloaded] .fa-download {
           --fa: "\f1ce";
           font-weight: 900;
-          color: fixit-var(global-link-hover-color);
+          color: fi-var(global-link-hover-color);
         }
 
         &.fullscreen-btn {
diff --git a/assets/css/_page/_single/_collections.scss b/assets/css/_page/_single/_collections.scss
index 29909cc2..d1c0e5ae 100644
--- a/assets/css/_page/_single/_collections.scss
+++ b/assets/css/_page/_single/_collections.scss
@@ -118,7 +118,7 @@
     .collection-name {
       flex-grow: 1;
       font-weight: bold;
-      font-size: fixit-var(collection-title-font-size);
+      font-size: fi-var(collection-title-font-size);
 
       &::before {
         content: attr(title) '・';
@@ -127,7 +127,7 @@
 
     .collection-count {
       flex-shrink: 0;
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
     }
 
     .details-icon {
@@ -136,7 +136,7 @@
   }
 
   .collection-content {
-    font-size: fixit-var(collection-list-font-size);
+    font-size: fi-var(collection-list-font-size);
     background-color: light-dark(darken($global-background-color, 3%), lighten($global-background-color-dark, 3%));
 
     .collection-list {
@@ -157,15 +157,15 @@
         margin-right: 0.5em;
         position: relative;
         bottom: 2px;
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
 
       .collection-item > .active {
         font-weight: bold;
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
 
         &::before {
-          color: fixit-var(single-link-hover-color);
+          color: fi-var(single-link-hover-color);
         }
       }
     }
diff --git a/assets/css/_page/_single/_color-preview.scss b/assets/css/_page/_single/_color-preview.scss
index 61064e8c..43ddfc9f 100644
--- a/assets/css/_page/_single/_color-preview.scss
+++ b/assets/css/_page/_single/_color-preview.scss
@@ -1,12 +1,12 @@
 // Color preview styles for inline code
 .color-code {
   position: relative;
-  @include set-fixit-var(color-code-size, 0.64em);
+  @include set-fi-var(color-code-size, 0.64em);
 
   .color-preview {
     display: inline-block;
-    width: fixit-var(color-code-size);
-    height: fixit-var(color-code-size);
+    width: fi-var(color-code-size);
+    height: fi-var(color-code-size);
     @include border-radius(full);
     margin-right: 0.25em;
     vertical-align: middle;
diff --git a/assets/css/_page/_single/_diagram-copy-btn.scss b/assets/css/_page/_single/_diagram-copy-btn.scss
index 74c43609..1aa44716 100644
--- a/assets/css/_page/_single/_diagram-copy-btn.scss
+++ b/assets/css/_page/_single/_diagram-copy-btn.scss
@@ -34,7 +34,7 @@
     .fa-clone {
       --fa: '\f00c';
       --fa-style: 900;
-      color: fixit-var(global-link-hover-color);
+      color: fi-var(global-link-hover-color);
     }
   }
 
diff --git a/assets/css/_page/_single/_fixit-decryptor.scss b/assets/css/_page/_single/_fixit-decryptor.scss
index a6dfc4d3..a2d06281 100644
--- a/assets/css/_page/_single/_fixit-decryptor.scss
+++ b/assets/css/_page/_single/_fixit-decryptor.scss
@@ -1,7 +1,7 @@
 .fixit-decryptor-container {
-  font-family: fixit-var(global-font-family);
+  font-family: fi-var(global-font-family);
   text-align: center;
-  margin-block: fixit-var(decryptor-margin-block);
+  margin-block: fi-var(decryptor-margin-block);
 
   .fixit-decryptor-loading {
     vertical-align: middle;
@@ -13,9 +13,9 @@
     display: none;
     box-sizing: border-box;
     outline: none;
-    color: fixit-var(global-font-color);
-    border: 1px solid fixit-var(global-border-color);
-    box-shadow: 0px 0px 5px 0px fixit-var(global-border-color);
+    color: fi-var(global-font-color);
+    border: 1px solid fi-var(global-border-color);
+    box-shadow: 0px 0px 5px 0px fi-var(global-border-color);
     @include border-radius;
     transition: all 0.1s ease-out;
 
@@ -23,7 +23,7 @@
     &:focus,
     &:hover {
       color: light-dark(darken($global-link-hover-color, 6%), lighten($global-link-hover-color-dark, 6%));
-      border-color: fixit-var(global-link-hover-color);
+      border-color: fi-var(global-link-hover-color);
       box-shadow: 0px 0px 5px 0px light-dark(
         lighten($global-link-hover-color, 20%),
         darken($global-link-hover-color-dark, 20%)
@@ -36,14 +36,14 @@
     height: 3rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    background-color: fixit-var(global-background-color);
+    background-color: fi-var(global-background-color);
   }
 
   .fixit-decryptor-btn,
   .fixit-encryptor-btn {
     cursor: pointer;
     padding: 0.8rem 1rem;
-    background-color: fixit-var(global-background-color);
+    background-color: fi-var(global-background-color);
     transition: all 0.1s ease-out;
   }
 
@@ -72,7 +72,7 @@ fixit-encryptor {
 // fixit-encryptor for for the encrypted pages
 article fixit-encryptor {
   .fixit-decryptor-container {
-    @include set-fixit-var(decryptor-margin-block, 2rem);
+    @include set-fi-var(decryptor-margin-block, 2rem);
   }
   &.decrypted > .fixit-decryptor-container {
     .fixit-decryptor-loading,
@@ -90,7 +90,7 @@ article fixit-encryptor {
 // fixit-encryptor shortcodes
 #content fixit-encryptor {
   .fixit-decryptor-container {
-    @include set-fixit-var(decryptor-margin-block, 1rem);
+    @include set-fi-var(decryptor-margin-block, 1rem);
   }
   &.decrypted > .fixit-decryptor-container {
     display: none;
diff --git a/assets/css/_page/_single/_footer.scss b/assets/css/_page/_single/_footer.scss
index be781b8c..86217644 100644
--- a/assets/css/_page/_single/_footer.scss
+++ b/assets/css/_page/_single/_footer.scss
@@ -6,7 +6,7 @@
   }
 
   .post-info {
-    border-bottom: 1px solid fixit-var(global-border-color);
+    border-bottom: 1px solid fi-var(global-border-color);
     padding: 0.3rem 0;
 
     .post-info-line {
@@ -15,14 +15,14 @@
 
       .post-info-mod {
         font-size: 0.8em;
-        color: fixit-var(global-font-secondary-color);  
+        color: fi-var(global-font-secondary-color);  
 
         @include link(false, false);
       }
 
       .post-info-license {
         font-size: 0.8em;
-        color: fixit-var(global-font-secondary-color);
+        color: fi-var(global-font-secondary-color);
 
         @include link(false, false);
       }
@@ -37,7 +37,7 @@
           content: '|';
           margin-left: 0.25rem;
           margin-right: 0.25rem;
-          color: fixit-var(global-font-secondary-color);
+          color: fi-var(global-font-secondary-color);
         }
       }
 
diff --git a/assets/css/_page/_single/_index.scss b/assets/css/_page/_single/_index.scss
index 7c7d59ae..79b2d258 100644
--- a/assets/css/_page/_single/_index.scss
+++ b/assets/css/_page/_single/_index.scss
@@ -17,14 +17,14 @@
       width: max-content;
       transform: rotate(30deg);
       margin-right: 0.25em;
-      color: fixit-var(danger);
+      color: fi-var(danger);
     }
 
     .icon-repost {
       display: inline-block;
       width: max-content;
       margin-right: 0.25em;
-      color: fixit-var(success);
+      color: fi-var(success);
     }
 
     @include media('print') {
@@ -45,7 +45,7 @@
 
   .post-meta {
     font-size: 0.875rem;
-    color: fixit-var(global-font-secondary-color);
+    color: fi-var(global-font-secondary-color);
 
     span {
       display: inline-block;
@@ -60,7 +60,7 @@
         width: 1.3rem;
         height: 1.3rem;
         vertical-align: text-bottom;
-        border: 0.25px solid fixit-var(global-border-color);
+        border: 0.25px solid fi-var(global-border-color);
         box-sizing: border-box;
         object-position: center;
         @include border-radius(full);
@@ -97,7 +97,7 @@
     text-align: center;
     font-size: 0.875em;
     padding: 0.25rem;
-    color: fixit-var(global-font-tertiary-color);
+    color: fi-var(global-font-tertiary-color);
     opacity: 0.8;
   }
 
@@ -105,7 +105,7 @@
     position: relative;
     height: 1em;
     margin-block: 1em;
-    background-image: linear-gradient(to right, fixit-var(global-border-color) 50%, transparent 50%);
+    background-image: linear-gradient(to right, fi-var(global-border-color) 50%, transparent 50%);
     background-size: 10px 2px;
     background-position: center;
     background-repeat: repeat-x;
@@ -120,7 +120,7 @@
         left: 5%;
         top: 50%;
         transform: translateY(-50%);
-        color: fixit-var(hr-active-color);
+        color: fi-var(hr-active-color);
         font-size: 20px;
         line-height: 1;
         transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
@@ -143,7 +143,7 @@
     > h2 {
       font-size: 1.5em;
       padding-bottom: 0.3em;
-      border-bottom: 1px solid fixit-var(global-border-color-light);
+      border-bottom: 1px solid fi-var(global-border-color-light);
     }
 
     > h3 {
@@ -223,10 +223,10 @@
     }
 
     li::marker {
-      color: fixit-var(secondary);
+      color: fi-var(secondary);
     }
     li:hover::marker {
-      color: fixit-var(single-link-hover-color);
+      color: fi-var(single-link-hover-color);
     }
 
     // Task lists
@@ -235,16 +235,16 @@
         list-style: none;
         @include task-icon {
           margin: 0 0.25em 0 -1.5em;
-          color: fixit-var(task-icon-color, fixit-var(secondary));
+          color: fi-var(task-icon-color, fi-var(secondary));
         };
         @include task-text {
-          color: fixit-var(task-text-color);
+          color: fi-var(task-text-color);
         }
       }
       
       &[data-task='x'] {
         @include task-icon {
-          background-color: fixit-rgba(fixit-var(secondary), 0.2);
+          background-color: fi-rgba(fi-var(secondary), 0.2);
           mask-image: linear-gradient(#000, #000);
           mask-size: 0.875em 0.875em;
           mask-repeat: no-repeat;
@@ -256,24 +256,24 @@
         @include task-icon {
           opacity: 0.7;
         };
-        @include task-text(fixit-var(secondary)) {
+        @include task-text(fi-var(secondary)) {
           opacity: 0.7;
-          text-decoration: line-through fixit-var(secondary);
+          text-decoration: line-through fi-var(secondary);
         }
       }
 
       &[data-task='/'] {
-        @include task-icon(fixit-var(success));
-        @include task-text(fixit-var(success));
+        @include task-icon(fi-var(success));
+        @include task-text(fi-var(success));
       }
 
       &[data-task='!'],
       &[data-task='!x'] {
-        @include task-icon(fixit-var(danger));
+        @include task-icon(fi-var(danger));
       }
 
       &[data-task='?'] {
-        @include task-icon(fixit-var(warning));
+        @include task-icon(fi-var(warning));
       }
     }
 
@@ -287,24 +287,24 @@
     }
 
     ruby {
-      background-color: fixit-var(code-block-background-color);
+      background-color: fi-var(code-block-background-color);
 
       rt {
-        color: fixit-var(global-font-secondary-color);
+        color: fi-var(global-font-secondary-color);
       }
     }
 
     mark {
       padding: 0.14em 0.28em;
-      background-color: fixit-var(mark-background-color, mark);
-      color: fixit-var(mark-color, marktext);
+      background-color: fi-var(mark-background-color, mark);
+      color: fi-var(mark-color, marktext);
       @include border-radius;
 
       @each $color, $value in $theme-colors {
         &.mark-#{$color} {
-          @include set-fixit-vars((
+          @include set-fi-vars((
             mark-color: #fff,
-            mark-background-color: fixit-var(#{$color}),
+            mark-background-color: fi-var(#{$color}),
           ));
         }
       }
@@ -315,21 +315,21 @@
       overflow-x: auto;
       overflow-y: hidden;
       margin: 0.5rem 0;
-      background: fixit-var(table-background-color);
-      border: 1px solid fixit-var(table-border-color);
+      background: fi-var(table-background-color);
+      border: 1px solid fi-var(table-border-color);
       @include border-radius;
-      @include set-fixit-var(scrollbar-thumb-color, fixit-var(table-background-color));
+      @include set-fi-var(scrollbar-thumb-color, fi-var(table-background-color));
 
       > table {
         width: 100%;
         max-width: 100%;
         margin: 0;
         border-spacing: 0;
-        background: fixit-var(table-background-color);
+        background: fi-var(table-background-color);
         border-collapse: separate;
 
         thead {
-          background: fixit-var(table-thead-color);
+          background: fi-var(table-thead-color);
         }
 
         &:not([class]) tbody {
@@ -345,8 +345,8 @@
         th,
         td {
           padding: 0.3rem 1rem;
-          border-right: 1px solid fixit-var(table-border-color);
-          border-bottom: 1px solid fixit-var(table-border-color);
+          border-right: 1px solid fi-var(table-border-color);
+          border-bottom: 1px solid fi-var(table-border-color);
         }
 
         tr > :last-child {
@@ -394,8 +394,8 @@
 
     blockquote {
       display: block;
-      border-left: 0.25em solid fixit-var(global-border-color);
-      color: fixit-var(blockquote-color);
+      border-left: 0.25em solid fi-var(global-border-color);
+      color: fi-var(blockquote-color);
       padding: 0 1em;
       margin: 1rem 0;
 
@@ -433,7 +433,7 @@
       }
       
       hr {
-        background-color: fixit-var(global-border-color);
+        background-color: fi-var(global-border-color);
         height: 1px;
         margin-block: 1em;
       }
@@ -455,12 +455,12 @@
     kbd {
       display: inline-block;
       padding: 0 0.25rem;
-      background-color: fixit-var(global-background-color);
-      border: 1px solid fixit-var(global-border-color);
+      background-color: fi-var(global-background-color);
+      border: 1px solid fi-var(global-border-color);
       font-size: 0.8rem;
-      font-family: fixit-var(code-font-family);
-      color: fixit-var(code-color);
-      box-shadow: inset 0 -1px 0 fixit-var(global-border-color);
+      font-family: fi-var(code-font-family);
+      color: fi-var(code-color);
+      box-shadow: inset 0 -1px 0 fi-var(global-border-color);
       @include border-radius;
     }
 
diff --git a/assets/css/_page/_single/_related.scss b/assets/css/_page/_single/_related.scss
index cb64063b..a4a6824c 100644
--- a/assets/css/_page/_single/_related.scss
+++ b/assets/css/_page/_single/_related.scss
@@ -5,7 +5,7 @@
     display: block;
     border: 0;
     padding-top: 1px;
-    background: fixit-var(divider-edge-weak);
+    background: fi-var(divider-edge-weak);
     margin-block: 1rem 0.5rem;
   }
 
@@ -26,12 +26,12 @@
 
     .related-title {
       font-weight: bold;
-      font-size: fixit-var(related-title-font-size);
+      font-size: fi-var(related-title-font-size);
     }
 
     .related-count {
       flex-shrink: 0;
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
     }
 
     .details-icon {
@@ -40,7 +40,7 @@
   }
 
   .related-content {
-    font-size: fixit-var(related-list-font-size);
+    font-size: fi-var(related-list-font-size);
 
     .related-list {
       margin: 0;
@@ -60,7 +60,7 @@
         margin-right: 0.5em;
         position: relative;
         bottom: 2px;
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
     }
   }
diff --git a/assets/css/_page/_single/_reward.scss b/assets/css/_page/_single/_reward.scss
index e884ab4c..e0762308 100644
--- a/assets/css/_page/_single/_reward.scss
+++ b/assets/css/_page/_single/_reward.scss
@@ -28,7 +28,7 @@
       }
   
       &:hover span[data-animation] {
-        animation: fixit-var(animation-reward, jackInTheBox) 0.8s infinite linear;
+        animation: fi-var(animation-reward, jackInTheBox) 0.8s infinite linear;
         // The animation may affect :hover of img in dark mode
         pointer-events: none;
       }
@@ -37,7 +37,7 @@
         display: inline-block;
         margin: 0.8em 2em 0;
         max-width: 100%;
-        width: fixit-var(reward-img-width);
+        width: fi-var(reward-img-width);
       }
     }
 
@@ -48,7 +48,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 1rem;
-      background-color: fixit-var(global-background-color);
+      background-color: fi-var(global-background-color);
       @include z-index(fixed);
       @include border-radius;
       box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
@@ -60,10 +60,10 @@
     box-sizing: border-box;
     cursor: pointer;
     outline: none;
-    color: fixit-var(reward-color, lighten($reward-color, 5%));
+    color: fi-var(reward-color, lighten($reward-color, 5%));
     border: 2px solid light-dark(lighten($reward-color, 10%), lighten($reward-color, 5%));
     padding: 0.6rem 1rem;
-    background-color: fixit-var(global-background-color);
+    background-color: fi-var(global-background-color);
     vertical-align: text-top;
     line-height: 1rem;
     transition: all 0.3s ease-out;
@@ -72,8 +72,8 @@
     &:active,
     &:hover {
       color: #ffffff;
-      border-color: fixit-var(reward-color);
-      background-color: fixit-var(reward-color);
+      border-color: fi-var(reward-color);
+      background-color: fi-var(reward-color);
     }
   }
 
diff --git a/assets/css/_page/_single/_shortcodes/_admonition.scss b/assets/css/_page/_single/_shortcodes/_admonition.scss
index 0ad11018..33eac5b1 100644
--- a/assets/css/_page/_single/_shortcodes/_admonition.scss
+++ b/assets/css/_page/_single/_shortcodes/_admonition.scss
@@ -4,12 +4,12 @@
   padding: 0 0.75rem;
   border-left: .25rem solid;
   overflow: hidden;
-  background-color: fixit-var(admonition-bg-color);
-  border-left-color: fixit-var(admonition-color);
+  background-color: fi-var(admonition-bg-color);
+  border-left-color: fi-var(admonition-color);
   @include border-radius;
 
   .admonition-title {
-    font-weight: fixit-var(admonition-title-font-weight, bold);
+    font-weight: fi-var(admonition-title-font-weight, bold);
     margin: 0 -0.75rem;
     padding: 0.25rem 1.8rem;
     border-bottom: 1px solid;
@@ -23,7 +23,7 @@
 
     // title-only admonition without content
     &:not(:has(+ .details-content)) {
-      @include set-fixit-var(admonition-title-font-weight, normal);
+      @include set-fi-var(admonition-title-font-weight, normal);
       padding: 0.75rem 1rem 0.75rem 2.2rem;
       border: 0;
 
@@ -35,17 +35,17 @@
   }
 
   > .admonition-title {
-    border-bottom-color: fixit-var(admonition-bg-color);
-    background-color: fixit-var(admonition-bg-color-collapsed);
+    border-bottom-color: fi-var(admonition-bg-color);
+    background-color: fi-var(admonition-bg-color-collapsed);
     transition: all 0.2s ease;
 
     i.icon {
-      color: fixit-var(admonition-color);
+      color: fi-var(admonition-color);
     }
   }
 
   &.open > .admonition-title {
-    background-color: fixit-var(admonition-bg-color);
+    background-color: fi-var(admonition-bg-color);
   }
 
   .admonition-content {
@@ -79,7 +79,7 @@
   }
 
   // default admonition type is note
-  @include set-fixit-vars((
+  @include set-fi-vars((
     admonition-color: map-get(map-get($admonition-color-map, note), color),
     admonition-bg-color: map-get(map-get($admonition-color-map, note), bg-color),
     admonition-bg-color-collapsed: opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15),
@@ -89,7 +89,7 @@
   @each $type, $item in $admonition-color-map {
     @if $type != 'note' {
       &.#{$type} {
-         @include set-fixit-vars((
+         @include set-fi-vars((
           admonition-color: map-get($item, color),
           admonition-bg-color: map-get($item, bg-color),
           admonition-bg-color-collapsed: opacify(map-get($item, bg-color), 0.15),
@@ -104,7 +104,7 @@
 
   // content-only admonition without title
   &:not(:has(.admonition-title)) {
-    border: 1px solid fixit-var(admonition-bg-color);
+    border: 1px solid fi-var(admonition-bg-color);
 
     .admonition-content {
       padding: 0.75rem 0.25rem;
diff --git a/assets/css/_page/_single/_shortcodes/_cardlink.scss b/assets/css/_page/_single/_shortcodes/_cardlink.scss
index ca1e985f..3e50923a 100644
--- a/assets/css/_page/_single/_shortcodes/_cardlink.scss
+++ b/assets/css/_page/_single/_shortcodes/_cardlink.scss
@@ -20,7 +20,7 @@
     bottom: 0.75rem;
     left: 0;
     right: 0;
-    background-image: fixit-var(logo-img);
+    background-image: fi-var(logo-img);
     background-repeat: no-repeat;
     filter: blur(0.5rem);
     opacity: 0.5;
@@ -50,7 +50,7 @@
     font-size: 1rem;
     font-weight: 500;
     line-height: 1.25;
-    color: fixit-var(global-font-color);
+    color: fi-var(global-font-color);
   }
 
   &meta {
@@ -58,7 +58,7 @@
     align-items: center;
     margin-top: 0.25rem;
     font-size: 0.825rem;
-    color: fixit-var(global-font-secondary-color);
+    color: fi-var(global-font-secondary-color);
   }
 
   &icon-link {
diff --git a/assets/css/_page/_single/_shortcodes/_center-quote.scss b/assets/css/_page/_single/_shortcodes/_center-quote.scss
index 0209785b..d549243f 100644
--- a/assets/css/_page/_single/_shortcodes/_center-quote.scss
+++ b/assets/css/_page/_single/_shortcodes/_center-quote.scss
@@ -16,7 +16,7 @@ blockquote.blockquote-center {
   }
 
   &::before {
-    border-top: 1px solid fixit-var(global-border-color);
+    border-top: 1px solid fi-var(global-border-color);
     text-align: left;
     top: -20px;
     font-family: var(--fa-family-classic);
@@ -25,7 +25,7 @@ blockquote.blockquote-center {
   }
 
   &::after {
-    border-bottom: 1px solid fixit-var(global-border-color);
+    border-bottom: 1px solid fi-var(global-border-color);
     bottom: -20px;
     text-align: right;
     font-family: var(--fa-family-classic);
diff --git a/assets/css/_page/_single/_shortcodes/_file-tree.scss b/assets/css/_page/_single/_shortcodes/_file-tree.scss
index 586b8184..9a0ec9d8 100644
--- a/assets/css/_page/_single/_shortcodes/_file-tree.scss
+++ b/assets/css/_page/_single/_shortcodes/_file-tree.scss
@@ -1,5 +1,5 @@
 .file-tree-wrapper {
-  border: 1px solid fixit-var(global-border-color);
+  border: 1px solid fi-var(global-border-color);
   padding: 0.5rem;
   font-size: 0.8rem;
   line-height: 1;
@@ -53,7 +53,7 @@
         }
 
         &.is-highlighted {
-          color: fixit-var(global-link-hover-color);
+          color: fi-var(global-link-hover-color);
         }
       }
     }
@@ -71,7 +71,7 @@
           translate: 0 -50%;
           width: 0.75rem;
           height: 1px;
-          background-color: fixit-var(global-font-secondary-color);
+          background-color: fi-var(global-font-secondary-color);
         }
       }
     }
@@ -88,8 +88,8 @@
       bottom: 0.625rem;
       left: calc(1rem - 0.5px);
       width: 1px;
-      background-color: fixit-var(global-font-secondary-color);
-      height: fixit-var(file-tree-line-height);
+      background-color: fi-var(global-font-secondary-color);
+      height: fi-var(file-tree-line-height);
     }
   }
 
diff --git a/assets/css/_page/_single/_shortcodes/_tabs.scss b/assets/css/_page/_single/_shortcodes/_tabs.scss
index b1aaf41c..1f75a5f8 100644
--- a/assets/css/_page/_single/_shortcodes/_tabs.scss
+++ b/assets/css/_page/_single/_shortcodes/_tabs.scss
@@ -115,7 +115,7 @@ tab-container {
 
       &[aria-selected='true'],
       &[aria-selected='false']:hover {
-        color: fixit-var(primary);
+        color: fi-var(primary);
       }
 
       &[aria-selected='false']:hover {
@@ -178,11 +178,11 @@ tab-container {
     // Top placement
     &[placement='top'] {
       &::part(tablist-tab-wrapper) {
-        border-bottom: 2px solid fixit-var(global-border-color);
+        border-bottom: 2px solid fi-var(global-border-color);
       }
 
       &::part(tablist-wrapper)::before {
-        box-shadow: inset 0 -2px 0 fixit-var(primary);
+        box-shadow: inset 0 -2px 0 fi-var(primary);
         translate: 0 2px;
       }
     }
@@ -190,11 +190,11 @@ tab-container {
     // Bottom placement
     &[placement='bottom'] {
       &::part(tablist-tab-wrapper) {
-        border-top: 2px solid fixit-var(global-border-color);
+        border-top: 2px solid fi-var(global-border-color);
       }
 
       &::part(tablist-wrapper)::before {
-        box-shadow: inset 0 2px 0 fixit-var(primary);
+        box-shadow: inset 0 2px 0 fi-var(primary);
         translate: 0 -2px;
       }
     }
@@ -202,11 +202,11 @@ tab-container {
     // Left placement
     &[placement='left'] {
       &::part(tablist-tab-wrapper) {
-        border-right: 2px solid fixit-var(global-border-color);
+        border-right: 2px solid fi-var(global-border-color);
       }
 
       &::part(tablist-wrapper)::before {
-        box-shadow: inset -2px 0 0 fixit-var(primary);
+        box-shadow: inset -2px 0 0 fi-var(primary);
         translate: 2px 0;
       }
 
@@ -218,11 +218,11 @@ tab-container {
     // Right placement
     &[placement='right'] {
       &::part(tablist-tab-wrapper) {
-        border-left: 2px solid fixit-var(global-border-color);
+        border-left: 2px solid fi-var(global-border-color);
       }
 
       &::part(tablist-wrapper)::before {
-        box-shadow: inset 2px 0 0 fixit-var(primary);
+        box-shadow: inset 2px 0 0 fi-var(primary);
         translate: -2px 0;
       }
 
@@ -238,13 +238,13 @@ tab-container {
   // ========================================
   &[type='pill'] {
     > .tab-button {
-      background-color: fixit-var(code-inline-background-color);
+      background-color: fi-var(code-inline-background-color);
       @include tab-button-size;
       @include border-radius(full);
 
       &[aria-selected='true'] {
         color: #ffffff;
-        background-color: fixit-var(primary);
+        background-color: fi-var(primary);
         box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
         box-shadow: 0 0.125rem 0.5rem light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
       }
@@ -332,22 +332,22 @@ tab-container {
     }
 
     > .tab-button {
-      border: 1px solid fixit-var(global-border-color);
-      background-color: fixit-var(code-block-background-color);
+      border: 1px solid fi-var(global-border-color);
+      background-color: fi-var(code-block-background-color);
       @include tab-button-size(1.5rem);
 
       &[aria-selected='true'],
       &[aria-selected='false']:hover {
-        background-color: fixit-var(global-background-color);
-        color: fixit-var(global-link-color);
+        background-color: fi-var(global-background-color);
+        color: fi-var(global-link-color);
         @include z-index(base);
       }
     }
 
     > .tab-panel {
       padding: 0.75rem;
-      background-color: fixit-var(global-background-color);
-      border: 1px solid fixit-var(global-border-color);
+      background-color: fi-var(global-background-color);
+      border: 1px solid fi-var(global-border-color);
     }
 
     &[placement='top'],
@@ -375,7 +375,7 @@ tab-container {
     // Top placement
     &[placement='top'] {
       &::part(tablist-tab-wrapper) {
-        border-bottom: 1px solid fixit-var(global-border-color);
+        border-bottom: 1px solid fi-var(global-border-color);
       }
 
       > .tab-button {
@@ -383,7 +383,7 @@ tab-container {
         @include border-radius(top);
 
         &[aria-selected='true'] {
-          border-bottom-color: fixit-var(global-background-color);
+          border-bottom-color: fi-var(global-background-color);
         }
       }
 
@@ -396,7 +396,7 @@ tab-container {
     // Bottom placement
     &[placement='bottom'] {
       &::part(tablist-tab-wrapper) {
-        border-top: 1px solid fixit-var(global-border-color);
+        border-top: 1px solid fi-var(global-border-color);
       }
 
       > .tab-button {
@@ -404,7 +404,7 @@ tab-container {
         @include border-radius(bottom);
 
         &[aria-selected='true'] {
-          border-top-color: fixit-var(global-background-color);
+          border-top-color: fi-var(global-background-color);
         }
       }
 
@@ -417,7 +417,7 @@ tab-container {
     // Left placement
     &[placement='left'] {
       &::part(tablist-tab-wrapper) {
-        border-right: 1px solid fixit-var(global-border-color);
+        border-right: 1px solid fi-var(global-border-color);
       }
 
       > .tab-button {
@@ -425,7 +425,7 @@ tab-container {
         @include border-radius(left);
 
         &[aria-selected='true'] {
-          border-right-color: fixit-var(global-background-color);
+          border-right-color: fi-var(global-background-color);
         }
       }
 
@@ -438,7 +438,7 @@ tab-container {
     // Right placement
     &[placement='right'] {
       &::part(tablist-tab-wrapper) {
-        border-left: 1px solid fixit-var(global-border-color);
+        border-left: 1px solid fi-var(global-border-color);
       }
 
       > .tab-button {
@@ -446,7 +446,7 @@ tab-container {
         @include border-radius(right);
 
         &[aria-selected='true'] {
-          border-left-color: fixit-var(global-background-color);
+          border-left-color: fi-var(global-background-color);
         }
       }
 
@@ -470,7 +470,7 @@ tab-container {
     &::part(tablist-tab-wrapper) {
       position: relative;
       padding: 0.25rem;
-      background-color: fixit-var(code-block-background-color);
+      background-color: fi-var(code-block-background-color);
       @include border-radius;
     }
 
@@ -511,7 +511,7 @@ tab-container {
       left: anchor(left);
       width: anchor-size(width);
       height: anchor-size(height);
-      background-color: fixit-var(global-background-color);
+      background-color: fi-var(global-background-color);
       transition:
         top 0.3s ease,
         left 0.3s ease,
@@ -588,39 +588,39 @@ tab-container .tab-panel:not([hidden]) {
   tab-container {
     &[type='underline'] {
       > .tab-button {
-        @include set-fixit-var(tab-button-border-color, transparent);
+        @include set-fi-var(tab-button-border-color, transparent);
 
         &[aria-selected='true'],
         &[aria-selected='false']:hover {
-          @include set-fixit-var(tab-button-border-color, fixit-var(primary));
+          @include set-fi-var(tab-button-border-color, fi-var(primary));
         }
       }
 
       &[placement='top'] > .tab-button {
         translate: 0 2px;
-        border-bottom: 2px solid fixit-var(tab-button-border-color);
+        border-bottom: 2px solid fi-var(tab-button-border-color);
       }
 
       &[placement='bottom'] > .tab-button {
         translate: 0 -2px;
-        border-top: 2px solid fixit-var(tab-button-border-color);
+        border-top: 2px solid fi-var(tab-button-border-color);
       }
 
       &[placement='left'] > .tab-button {
         translate: 2px 0;
-        border-right: 2px solid fixit-var(tab-button-border-color);
+        border-right: 2px solid fi-var(tab-button-border-color);
       }
 
       &[placement='right'] > .tab-button {
         translate: -2px 0;
-        border-left: 2px solid fixit-var(tab-button-border-color);
+        border-left: 2px solid fi-var(tab-button-border-color);
       }
     }
 
     &[type='segment'] {
       > .tab-button {
         &[aria-selected='true'] {
-          background-color: fixit-var(global-background-color);
+          background-color: fi-var(global-background-color);
           box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
         }
       }
diff --git a/assets/css/_page/_single/_shortcodes/_timeline.scss b/assets/css/_page/_single/_shortcodes/_timeline.scss
index 75c50b74..ee6331a3 100644
--- a/assets/css/_page/_single/_shortcodes/_timeline.scss
+++ b/assets/css/_page/_single/_shortcodes/_timeline.scss
@@ -3,8 +3,8 @@ ul.#{$prefix}timeline {
   box-sizing: border-box;
   overflow: auto;
   margin: 1rem auto;
-  @include set-fixit-vars((
-    timeline-color: fixit-var(global-border-color),
+  @include set-fi-vars((
+    timeline-color: fi-var(global-border-color),
     timeline-circle-color: #FF735A,
     timeline-circle-size: 10px,
     timeline-width: 2px,
@@ -12,21 +12,21 @@ ul.#{$prefix}timeline {
 
   &[data-animation] {
     .#{$prefix}timeline-item::before {
-      border-color: fixit-var(timeline-color);
+      border-color: fi-var(timeline-color);
       animation-name: border-color-fade;
       animation-duration: 2s;
       animation-iteration-count: infinite;
-      animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s);
+      animation-delay: calc(#{fi-var(timeline-index)} * 0.3s);
   
       @keyframes border-color-fade {
         0% {
-          border-color: fixit-var(timeline-color);
+          border-color: fi-var(timeline-color);
         }
         50% {
-          border-color: fixit-var(timeline-circle-color);
+          border-color: fi-var(timeline-circle-color);
         }
         100% {
-          border-color: fixit-var(timeline-color);
+          border-color: fi-var(timeline-color);
         }
       }
     }
@@ -38,14 +38,14 @@ ul.#{$prefix}timeline {
 
     @each $color, $value in $theme-colors {
       &[data-type='#{$color}'] {
-        @include set-fixit-var(timeline-circle-color, fixit-var(#{$color}));
+        @include set-fi-var(timeline-circle-color, fi-var(#{$color}));
       }
     }
 
     .#{$prefix}timeline-item__timestamp {
       font-size: 0.8125rem;
       line-height: 1;
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
 
       &.is-top {
         margin-bottom: 0.25rem;
@@ -61,7 +61,7 @@ ul.#{$prefix}timeline {
     }
 
     &[data-node='dot']::before {
-      background-color: fixit-var(timeline-circle-color) !important;
+      background-color: fi-var(timeline-circle-color) !important;
     }
     &[data-size='small']::before {
       transform: scale(0.8) translateY(-50%);
@@ -79,13 +79,13 @@ ul.#{$prefix}timeline {
       text-align: center;
       border-style: solid;
       color: transparent;
-      width: fixit-var(timeline-circle-size);
-      height: fixit-var(timeline-circle-size);
-      font-size: fixit-var(timeline-circle-size);
-      line-height: fixit-var(timeline-circle-size);
-      border-width: fixit-var(timeline-width);
-      border-color: fixit-var(timeline-circle-color);
-      background-color: fixit-var(global-background-color);
+      width: fi-var(timeline-circle-size);
+      height: fi-var(timeline-circle-size);
+      font-size: fi-var(timeline-circle-size);
+      line-height: fi-var(timeline-circle-size);
+      border-width: fi-var(timeline-width);
+      border-color: fi-var(timeline-circle-color);
+      background-color: fi-var(global-background-color);
       @include border-radius(full);
       @include z-index(base);
     }
@@ -93,10 +93,10 @@ ul.#{$prefix}timeline {
       content: '';
       position: absolute;
       top: 0;
-      left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2);
-      width: fixit-var(timeline-width);
+      left: calc(#{fi-var(timeline-circle-size)} / 2 + #{fi-var(timeline-width)} / 2);
+      width: fi-var(timeline-width);
       height: 100%;
-      background-color: fixit-var(timeline-color);
+      background-color: fi-var(timeline-color);
     }
   }  
 }
diff --git a/assets/css/_page/_single/_toc.scss b/assets/css/_page/_single/_toc.scss
index cb03a3da..c4c20752 100644
--- a/assets/css/_page/_single/_toc.scss
+++ b/assets/css/_page/_single/_toc.scss
@@ -1,13 +1,13 @@
 // Common styles for all TOC types
 .toc {
   .toc-title {
-    font-size: fixit-var(toc-title-font-size);
+    font-size: fi-var(toc-title-font-size);
     font-weight: bold;
     text-transform: uppercase;
   }
 
   .toc-content {
-    font-size: fixit-var(toc-content-font-size);
+    font-size: fi-var(toc-content-font-size);
 
     code {
       @extend %code;
@@ -25,7 +25,7 @@
         margin-right: 0.5em;
         position: relative;
         bottom: 2px;
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
 
       ul {
@@ -42,16 +42,16 @@
       }
 
       li:has(> a:hover)::marker {
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
     }
   }
 
   ruby {
-    background-color: fixit-var(code-block-background-color);
+    background-color: fi-var(code-block-background-color);
 
     rt {
-      color: fixit-var(global-font-secondary-color);
+      color: fi-var(global-font-secondary-color);
     }
   }
 }
@@ -62,7 +62,7 @@
   .toc-content {
     li.has-active {
       &::marker {
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
 
       &:has(> .active)::marker {
@@ -70,13 +70,13 @@
       }
 
       > a {
-        color: fixit-var(single-link-color);
+        color: fi-var(single-link-color);
       }
     }
 
     ul {
       a.active::before {
-        color: fixit-var(single-link-hover-color);
+        color: fi-var(single-link-hover-color);
       }
     }
 
@@ -106,7 +106,7 @@
       margin-right: 0.5em;
       position: relative;
       bottom: 2px;
-      color: fixit-var(global-border-color);
+      color: fi-var(global-border-color);
     }
 
     i.toc-icon {
@@ -122,7 +122,7 @@
   .toc-content {
     overflow-y: auto;
     overscroll-behavior: contain;
-    max-height: fixit-var(toc-content-max-height, calc(100dvh - #{2 * #{fixit-var(header-height)}}));
+    max-height: fi-var(toc-content-max-height, calc(100dvh - #{2 * #{fi-var(header-height)}}));
     @include scrollbar-width(none, 0);
 
     &.always-active ul,
@@ -171,11 +171,11 @@
     justify-content: space-between;
     line-height: 2em;
     padding: 0 0.75em;
-    background-color: fixit-var(code-header-background-color);
+    background-color: fi-var(code-header-background-color);
   }
 
   .toc-content {
-    background-color: fixit-var(code-block-background-color);
+    background-color: fi-var(code-block-background-color);
 
     > nav {
       > ul {
@@ -185,7 +185,7 @@
           font-weight: bold;
 
           &::before {
-            color: fixit-var(single-link-hover-color);
+            color: fi-var(single-link-hover-color);
           }
         }
       }
@@ -203,7 +203,7 @@
 
   &:not(.open) {
     .toc-title {
-      @include set-fixit-var(
+      @include set-fi-var(
         code-header-background-color,
         light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
       );
@@ -224,8 +224,8 @@
   max-height: 100%;
   margin-right: 0;
   border: none;
-  border-left: 1px solid fixit-var(global-border-color-light);
-  background-color: fixit-var(global-background-color);
+  border-left: 1px solid fi-var(global-border-color-light);
+  background-color: fi-var(global-background-color);
   transition:
     display 0.2s allow-discrete,
     overlay 0.2s allow-discrete,
@@ -237,13 +237,13 @@
     margin-inline: 1rem;
 
     .toc-title {
-      font-size: calc(#{fixit-var(toc-title-font-size)} * 1.5);
-      line-height: calc(#{fixit-var(toc-title-font-size)} * 2);
-      margin-block: fixit-var(toc-title-font-size);
+      font-size: calc(#{fi-var(toc-title-font-size)} * 1.5);
+      line-height: calc(#{fi-var(toc-title-font-size)} * 2);
+      margin-block: fi-var(toc-title-font-size);
     }
 
     .toc-content {
-      font-size: MAX(fixit-var(toc-content-font-size), 1rem);
+      font-size: MAX(fi-var(toc-content-font-size), 1rem);
 
       nav {
         max-height: calc(100dvh - 5rem);