diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 4e89070..8ba7a81 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -2,54 +2,55 @@
  * https://github.com/BBaoVanC/bobatheme.
  */
 
+/* color notes:
+ * accent is 15 chroma, 270 hue
+ *
+ * lightness (dark):
+ * background-0: 5
+ * background-1: 12.5
+ * background-2: 20
+ * background-highlight: 27.5
+ * text-0: 92.5
+ * text-1: 85
+ */
+
 :root {
-  --background: #111;
-  --background-2: #222;
-  --background-3: #282828;
-  --background-4: #333;
-  --background-5: #444;
-  --background-accent: #111d2f;
-  --text-normal: #d3d3d3;
-  --link-color: #4da6ff;
-  --figure-border: #1b5b9b;
+  --background-0: #111111;
+  --background-1: #212121;
+  --background-2: #303030;
+  --background-highlight: #414141;
+  --background-accent: #101c30; /* lch(10, 15, 270) */
+  --text-0: #e9e9e9;
+  --text-1: #d4d4d4;
+  --link-color: #3a94fb; /* lch(60, 60, 270) */
+  --figure-border: #1f5593; /* lch(35, 40, 270) */
 
   --pagination-active-hover-text: black;
-  --pagination-active-background: #163b64;
-  --pagination-active-hover-background: #286ab2;
+  --pagination-active-background: #1a3d69; /* lch(25, 30, 270) */
+  --pagination-active-hover-background: #2061a8; /* lch(40, 45, 270) */
 }
 
-@media (prefers-color-scheme: light) {
+@media print, (prefers-color-scheme: light) {
   :root {
-    --background: #eee;
-    --background-2: #ddd;
-    --background-3: #d8d8d8;
-    --background-4: #bbb;
-    --background-5: #aaa;
-    --background-accent: #aec9ee;
-    --text-normal: #000;
-    --link-color: #0057bf;
-    --figure-border: #2e7bc9;
+    --background-0: #f1f1f1;
+    --background-1: #dbdbdb;
+    --background-2: #c6c6c6;
+    --background-highlight: #c6c6c6;
+    --background-accent: #d7e3ff;
+    --text-0: #171717;
+    --text-1: #262626;
+    --link-color: #2061a8; /* lch(40, 45, 270) */
+    --figure-border: #367acd; /* lch(50, 50, 270) */
 
     --pagination-active-hover-text: white;
-    --pagination-active-background: #3977bd;
-    --pagination-active-hover-background: #154172;
+    --pagination-active-background: #9fbaf0; /* lch(75, 30, 270) */
+    --pagination-active-hover-background: #6193e0; /* lch(60, 45, 270) */
   }
 }
 
 @media print {
   :root {
-    --background: #fff;
-    --background-2: #ddd;
-    --background-3: #d8d8d8;
-    --background-4: #bbb;
-    --background-5: #aaa;
-    --text-normal: #000;
-    --link-color: #0057bf;
-    --figure-border: #2e7bc9;
-
-    --pagination-active-hover-text: white;
-    --pagination-active-background: #3977bd;
-    --pagination-active-hover-background: #154172;
+    --background-0: #fff;
   }
 }
 
@@ -82,7 +83,7 @@
   padding-right: 24px;
   padding-bottom: 24px;
   border-radius: 12px;
-  background-color: var(--background-2);
+  background-color: var(--background-1);
 }
 
 .post-series-position {
@@ -147,7 +148,7 @@
   display: flex;
   flex-direction: row;
   gap: 20px;
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 12px;
   border-radius: 8px;
 }
@@ -184,14 +185,14 @@
 }
 
 .tag-list a {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 12px;
   border-radius: 12px;
 }
 
 .tag-list a:hover {
   text-decoration: none;
-  background-color: var(--background-4);
+  background-color: var(--background-2);
 }
 
 
@@ -202,7 +203,7 @@
   gap: 10px;
   flex-flow: row wrap;
   list-style: none;
-  background-color: var(--background);
+  background-color: var(--background-0);
   padding: 8px;
   border-radius: 16px;
 }
@@ -222,13 +223,13 @@
 }
 
 .section {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   border-radius: 12px;
   padding: 1px 25px;
 }
 
 .section:hover {
-  background-color: var(--background-4);
+  background-color: var(--background-2);
 }
 
 .section-title {
@@ -268,14 +269,14 @@
 
 /* Content formatting */
 .series-box {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 16px;
   border-radius: 8px;
   margin: 15px 0;
 }
 
 .table-of-contents {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 20px;
   border-radius: 8px;
   margin: 10px 0;
@@ -347,7 +348,7 @@
 
 /* Social media share buttons */
 .share-buttons {
-  background: var(--background-2);
+  background: var(--background-1);
   margin: 25px 0;
   padding: 8px 0;
   border-radius: 8px;
@@ -357,7 +358,7 @@
 }
 
 .share-buttons a {
-  background-color: var(--background-4);
+  background-color: var(--background-2);
   padding: 4px;
   border-radius: 8px;
 }
@@ -378,7 +379,7 @@
 
 /* See also formating */
 .see-also {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 12px;
   border-radius: 8px;
   margin: 10px 0;
@@ -395,7 +396,7 @@
   float: right;
   bottom: 25px;
   right: 25px;
-  background-color: var(--background-3);
+  background-color: var(--background-1);
   border-radius: 100%;
   padding: 12px;
   display: none;
@@ -408,7 +409,7 @@
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   border-radius: 8px;
   margin-top: 5px;
   padding: 4px;
@@ -430,7 +431,7 @@
 .navbar-item:hover,
 .langpicker summary:hover,
 .langpicker[open] summary {
-  background-color: var(--background-5);
+  background-color: var(--background-highlight);
   text-decoration: none;
 }
 
@@ -454,8 +455,8 @@
   position: absolute;
   margin-top: 8px;
   right: 0;
-  background-color: var(--background-2);
-  border: 2px solid var(--background-4);
+  background-color: var(--background-1);
+  border: 2px solid var(--background-2);
   padding: 8px 12px;
   border-radius: 8px;
   list-style: none;
@@ -484,8 +485,8 @@ html {
 }
 
 body {
-  background-color: var(--background);
-  color: var(--text-normal);
+  background-color: var(--background-0);
+  color: var(--text-1);
   font-family: "Open Sans", "Noto Sans", sans-serif;
   margin: 20px;
   max-width: 720px;
@@ -535,7 +536,7 @@ figcaption {
 }
 
 aside {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 12px 16px;
   margin: 16px 0;
   border-radius: 8px;
@@ -551,21 +552,21 @@ a:hover {
 }
 
 blockquote {
-  border-left: 5px solid var(--background-4);
+  border-left: 5px solid var(--background-2);
   padding-left: 15px;
 }
 
 hr {
-  border-color: var(--background-5);
+  border-color: var(--background-highlight);
 }
 
 table.markdown {
   border-collapse: collapse;
-  border: 2px solid var(--text-normal);
+  border: 2px solid var(--text-1);
 }
 
 .markdown thead {
-  background-color: var(--background-4);
+  background-color: var(--background-2);
 }
 
 .markdown th,
@@ -574,10 +575,10 @@ table.markdown {
 }
 
 .markdown tbody tr:nth-child(odd) {
-  background-color: var(--background);
+  background-color: var(--background-0);
 }
 .markdown tbody tr:nth-child(even) {
-  background-color: var(--background-2);
+  background-color: var(--background-1);
 }
 
 * {
@@ -597,7 +598,7 @@ table.markdown {
 }
 
 :not(pre) > code {
-  background-color: var(--background-3);
+  background-color: var(--background-2);
   padding: 2px 4px;
   overflow-wrap: break-word;
 }
@@ -616,7 +617,7 @@ code {
 .icon {
   width: 20px;
   height: 20px;
-  color: var(--text-normal);
+  color: var(--text-1);
   text-align: center;
   display: inline;
   vertical-align: middle;
@@ -643,7 +644,7 @@ h1 svg.icon {
 .page-link {
   padding: 8px 16px;
   border-radius: 5px;
-  color: var(--text-normal);
+  color: var(--text-1);
 }
 
 .page-item.active .page-link {
@@ -661,7 +662,7 @@ h1 svg.icon {
 }
 
 :not(li.disabled) > .page-link:hover {
-  background-color: var(--background-5);
+  background-color: var(--background-highlight);
 }
 
 li.disabled {
@@ -707,12 +708,12 @@ li.disabled > .page-link:hover {
   display: flex;
   flex-direction: column;
   color: inherit;
-  background-color: var(--background-2);
+  background-color: var(--background-1);
   padding: 8px 16px;
 }
 
 .prevnext > a:hover {
-  background-color: var(--background-4);
+  background-color: var(--background-2);
   text-decoration: none;
 }