replace colors and fonts with variables

tailwind.config.ts

@@ -8,20 +8,16 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Manrope", ...fontFamily.sans],
-        serif: ["Literata", ...fontFamily.serif],
-        mono: ["Martian", ...fontFamily.mono],
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        serif: ["var(--font-serif)", ...fontFamily.serif],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
       },
       colors: {
-        green: "#28d27d",
-        red: "#f0506e",
-        pumpkin: "#f57855",
-        gold: "#ffdc50",
-        forest: "#28aa68",
-        teal: "#008791",
-        arctic: "#0cc0df",
-        aqua: "#5082d2",
-        black: "#282828",
+        default: "var(--color-default)",
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        muted: "var(--color-muted)",
+        accent: "var(--color-accent)",
       }
     },
   },