diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd3850d..0ece298 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- **[BREAKING]** Rename `nav-bg` CSS variable to `glass-bg`.
 - **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers.
 - Make `emoji` class available outside of comments.
 - Make the code and styling for article cards much cleaner.
diff --git a/content/demo/demo.css b/content/demo/demo.css
index 2235f4d..e77d171 100644
--- a/content/demo/demo.css
+++ b/content/demo/demo.css
@@ -10,7 +10,7 @@
 	box-shadow: var(--edge-highlight), var(--shadow-glass);
 	border-start-end-radius: var(--rounded-corner);
 	border-end-end-radius: var(--rounded-corner);
-	background-color: var(--nav-bg);
+	background-color: var(--glass-bg);
 	padding: 0.5rem;
 }
 
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 466fe29..e476cdc 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -14,7 +14,7 @@
 		border-end-end-radius: 1.8125rem;
 		background-image:
 			linear-gradient(var(--bg-overlay), var(--bg-overlay)),
-			linear-gradient(var(--nav-bg), var(--nav-bg)),
+			linear-gradient(var(--glass-bg), var(--glass-bg)),
 			var(--blurnail);
 		background-position: center;
 		background-size: cover;
diff --git a/sass/_article.scss b/sass/_article.scss
index b820d77..2123740 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -150,7 +150,7 @@
 		inset-inline-end: 3rem;
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: var(--rounded-corner);
-		background-color: var(--nav-bg);
+		background-color: var(--glass-bg);
 		padding: 1rem;
 		width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
 		max-height: 50vh;
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 5ce63a0..83e4ecd 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -19,7 +19,7 @@
 		inset: 0;
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: 1.625rem;
-		background-color: var(--nav-bg);
+		background-color: var(--glass-bg);
 		content: '';
 	}
 
@@ -40,7 +40,7 @@
 				var(--edge-highlight),
 				var(--shadow-glass);
 			border-radius: 999px;
-			background-color: var(--nav-bg);
+			background-color: var(--glass-bg);
 			padding: 0.625rem 0.75rem;
 			pointer-events: none;
 			line-height: 1;
@@ -216,7 +216,7 @@
 				inset-block-start: 3.25rem;
 				box-shadow: var(--edge-highlight), var(--shadow-glass);
 				border-radius: calc(var(--rounded-corner) + 0.25rem);
-				background-color: var(--nav-bg);
+				background-color: var(--glass-bg);
 				padding: 0.25rem;
 
 				li {
@@ -361,7 +361,7 @@
 		inset-inline-start: 0;
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: calc(var(--rounded-corner) + 0.5rem);
-		background-color: var(--nav-bg);
+		background-color: var(--glass-bg);
 		width: 100%;
 		max-height: 50vh;
 	}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 611a1c4..c0a4f06 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -19,13 +19,13 @@
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
 		--fg-color: rgb(255 255 255);
+		--fg-contrast: rgb(0 0 0 / 0.8);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
 		--fg-muted-2: rgb(255 255 255 / 0.1);
 		--fg-muted-3: rgb(255 255 255 / 0.2);
 		--fg-muted-4: rgb(255 255 255 / 0.5);
 		--fg-muted-5: rgb(255 255 255 / 0.6);
-		--fg-contrast: rgb(0 0 0 / 0.8);
-		--nav-bg: rgb(25 25 25 / 0.7);
+		--glass-bg: rgb(25 25 25 / 0.7);
 		--blue-fg: rgb(153 193 241);
 		--brown-fg: rgb(205 171 143);
 		--green-fg: rgb(143 240 164);
@@ -39,10 +39,6 @@
 	@else {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
-		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
-		--blue-fg: rgb(53 132 228);
-		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
-		--brown-fg: rgb(99 69 44);
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-contrast: rgb(255 255 255);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
@@ -50,10 +46,14 @@
 		--fg-muted-3: rgb(0 0 0 / 0.2);
 		--fg-muted-4: rgb(0 0 0 / 0.5);
 		--fg-muted-5: rgb(0 0 0 / 0.6);
+		--glass-bg: rgb(242 242 242 / 0.7);
+		--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
+		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
+		--blue-fg: rgb(53 132 228);
+		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
+		--brown-fg: rgb(99 69 44);
 		--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
 		--green-fg: rgb(38 162 105);
-		--nav-bg: rgb(242 242 242 / 0.7);
-		--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
 		--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
 		--purple-fg: rgb(145 65 172);
 		--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));