M assets/css/style.css → assets/css/style.css

@@ -1,8 +1,38 @@ 
 :root {
-  --color-primary: #4f46e5;
-  --color-primary-light: rgba(79, 70, 229, 0.08);
-  --color-bg: #f1f5f9;
-  --text-secondary: #374151;
+  --rosewater: #dc8a78;
+  --flamingo: #dd7878;
+  --pink: #ea76cb;
+  --mauve: #8839ef;
+  --red: #d20f39;
+  --maroon: #e64553;
+  --peach: #fe640b;
+  --yellow: #df8e1d;
+  --green: #40a02b;
+  --teal: #179299;
+  --sky: #04a5e5;
+  --sapphire: #209fb5;
+  --blue: #1e66f5;
+  --lavender: #7287fd;
+  --text: #4c4f69;
+  --subtext1: #5c5f77;
+  --subtext0: #6c6f85;
+  --overlay2: #7c7f93;
+  --overlay1: #8c8fa1;
+  --overlay0: #9ca0b0;
+  --surface2: #acb0be;
+  --surface1: #bcc0cc;
+  --surface0: #ccd0da;
+  --base: #eff1f5;
+  --mantle: #e6e9ef;
+  --crust: #dce0e8;
+  --inverted-text: var(--base);
+  --selection-color: var(--blue);
+
+  --color-primary: var(--lavender);
+  --color-bg: var(--base);
+  --color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
+  --text-primary: var(--text);
+  --text-secondary: var(--subtext1);
 }
 
 body {
@@ -17,6 +47,7 @@ Courier New,
     monospace,
     serif;
   background-color: var(--color-bg);
+  color: var(--text-primary);
 }
 
 main {
@@ -206,11 +237,34 @@ }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-primary: #818cf8;
-    --color-primary-light: rgba(79, 70, 229, 0.2);
-    --color-bg: #18181b;
-    --color-bg: #14141f;
-    --text-secondary: #e2e4e8;
+    --rosewater: #f5e0dc;
+    --flamingo: #f2cdcd;
+    --pink: #f5c2e7;
+    --mauve: #cba6f7;
+    --red: #f38ba8;
+    --maroon: #eba0ac;
+    --peach: #fab387;
+    --yellow: #f9e2af;
+    --green: #a6e3a1;
+    --teal: #94e2d5;
+    --sky: #89dceb;
+    --sapphire: #74c7ec;
+    --blue: #89b4fa;
+    --lavender: #b4befe;
+    --text: #cdd6f4;
+    --subtext1: #bac2de;
+    --subtext0: #a6adc8;
+    --overlay2: #9399b2;
+    --overlay1: #7f849c;
+    --overlay0: #6c7086;
+    --surface2: #585b70;
+    --surface1: #45475a;
+    --surface0: #313244;
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --crust: #11111b;
+    --inverted-text: var(--crust);
+    --selection-color: var(--mauve)
   }
 
   body {