fix: improved tailwindcss configuration

Author: coderdiaz

src/styles/global.css

@@ -1,4 +1,12 @@
+:root { font-family: "Inter", sans-serif; }
+
+@supports (font-variation-settings: normal) {
+  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+}
+
 @import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@config '../../tailwind.config.mjs';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -34,8 +42,12 @@
 
 @theme inline {
   --spacing: 4px;
+  --color-white: #fff;
+  --color-black: #000;
   --color-background: var(--palette-50);
   --color-foreground: var(--palette-600);
-  --color-muted-foreground: var(--palette-500);
-  --color-heading: var(--palette-800);
+  --color-muted-foreground: var(--palette-400);
+  --color-headings: var(--palette-800);
+
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }