feat(css): CATPPUCCIN!

assets/new.scss

@@ -2,40 +2,42 @@
 ---
 
 :root {
-  --backgroundColor: #fdfdfd;
-  --textColor: #303030;
-  --secondaryTextColor: #404040;
-  --mutedTextColor: #707070;
-  --subtleBackgroundColor: #f5f5f5;
-  --heartedBackgroundColor: #ffe2e2;
-  --selectionBackgroundColor: #ffc;
-  --linkColor: #2357cd;
-  --borderColor: #ccc;
-  --hrColor: #888;
-  --activeColor: #74d274;
-  --langBackgroundColor: #eeeeee;
+  /* Light Mode */
+  --backgroundColor: #EFF1F5; /* froth */
+  --textColor: #4C4F69; /* text */
+  --secondaryTextColor: #565A6E; /* overlay2 */
+  --mutedTextColor: #727585; /* overlay1 */
+  --subtleBackgroundColor: #E6E9EF; /* surface2 */
+  --heartedBackgroundColor: #F5E0DC; /* peach */
+  --selectionBackgroundColor: #A6E3A1; /* green */
+  --linkColor: #89B4FA; /* blue */
+  --borderColor: #D9E0EE; /* crust */
+  --hrColor: #ABAEC6; /* mantle */
+  --activeColor: #F28FAD; /* pink */
+  --langBackgroundColor: #DCE0EA; /* surface1 */
   --langShadowColor: transparent;
-  --logoColor: #cccccc;
-  --photoBackground: #f4f4f4;
+  --logoColor: #B8C0E0; /* lavender */
+  --photoBackground: #E9ECF2; /* surface0 */
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --backgroundColor: #151615;
-    --textColor: #dbdfdf;
-    --secondaryTextColor: #cfd5d5;
-    --mutedTextColor: #b4b6b8;
-    --subtleBackgroundColor: #3a3b3b;
-    --heartedBackgroundColor: #652222;
-    --selectionBackgroundColor: #19446b;
-    --linkColor: #6eb8ff;
-    --borderColor: #414141;
-    --hrColor: #888;
-    --activeColor: #74d274;
-    --langBackgroundColor: #2c2c2c;
-    --langShadowColor: #0b0c0b33;
-    --logoColor: #555555;
-    --photoBackground: #1a1a1a;
+    /* Dark Mode */
+    --backgroundColor: #1E1E2E; /* base */
+    --textColor: #CDD6F4; /* text */
+    --secondaryTextColor: #A6ADC8; /* overlay2 */
+    --mutedTextColor: #88909F; /* overlay1 */
+    --subtleBackgroundColor: #313244; /* surface2 */
+    --heartedBackgroundColor: #913C3C; /* red */
+    --selectionBackgroundColor: #223249; /* blue darker */
+    --linkColor: #89B4FA; /* blue */
+    --borderColor: #414559; /* crust */
+    --hrColor: #4C4F69; /* mantle */
+    --activeColor: #ABE9B3; /* green */
+    --langBackgroundColor: #2A2A3C; /* surface1 */
+    --langShadowColor: #00000033;
+    --logoColor: #6E6C7E; /* lavender darker */
+    --photoBackground: #24273A; /* surface0 */
   }
 }
 
@@ -45,7 +47,7 @@ body {
   line-height: 1.7em;
   padding: 0 2.5em;
   margin: 0;
-  font-size: 18px;
+  font-size: 1.1em;
   word-wrap: break-word;
 }
 
@@ -255,7 +257,7 @@ hr {
 
 article {
   font-family: system-ui, sans-serif;
-  font-size: 16px;
+  font-size: 1em;
 }
 
 .smol {