Add custom css variables

src/assets/styles/base.css

@@ -3,21 +3,33 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
+  .text-page {
-    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+    color: var(--aw-color-text-page);
   }
 
-  .btn-ghost {
+  .text-muted {
-    @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+    color: var(--aw-color-text-muted);
   }
 
-  .btn-primary {
+  .bg-light {
-    @apply font-semibold bg-primary-800 text-white border-primary-800 hover:bg-primary-900 hover:border-primary-900 hover:text-white dark:text-white dark:bg-primary-800 dark:border-primary-800 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+    background-color: var(--aw-color-bg-page);
   }
 
   .bg-dark {
     @apply bg-slate-900;
   }
+
+  .btn {
+    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+  }
+
+  .btn-ghost {
+    @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  }
+
+  .btn-primary {
+    @apply font-semibold bg-primary text-white border-primary hover:bg-blue-900 hover:border-blue-900 hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-blue-900 dark:hover:bg-blue-900;
+  }
 }
 
 #header.scroll {

src/components/common/CustomStyles.astro

@@ -1,13 +1,23 @@
 ---
 import '@fontsource/inter/variable.css';
+
+// Nunito
+// Dosis
 ---
 
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
+
 <style is:inline is:global>
   :root {
     --aw-font-sans: 'InterVariable';
-    --aw-font-serif: var(--ph-font-sans);
+    --aw-font-serif: var(--aw-font-sans);
-    --aw-font-heading: 'InterVariable';
+    --aw-font-heading: 'Nunito'; /* var(--aw-font-sans); */
 
-    --aw-color-primary: '';
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+    --aw-color-text-page: rgb(17 24 39);
+    --aw-color-text-muted: rgb(75 85 99);
+    --aw-color-bg-page: rgb(255 255 255);
   }
 </style>

tailwind.config.cjs

@@ -6,8 +6,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: colors.blue,
+        primary: 'var(--aw-color-primary)',
-        secondary: colors.pink,
+        secondary: 'var(--aw-color-secondary)',
+        accent: 'var(--aw-color-accent)',
       },
       fontFamily: {
         sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans],