feat: Implement light theme, mobile menu, font and image fallback

assets/css/tailwind.css

@@ -1,6 +1,16 @@
 @import "tailwindcss";
 
 @theme {
+  /* Default Custom Properties (Dark Theme) */
+  --bg-primary: var(--color-gray-900);
+  --bg-secondary: var(--color-gray-800);
+  --bg-tertiary: var(--color-gray-700);
+  --text-primary: var(--color-gray-100);
+  --text-secondary: var(--color-gray-400);
+  --text-tertiary: var(--color-gray-300);
+  --brand-primary: var(--color-indigo-600);
+  --brand-secondary: var(--color-indigo-700);
+
   --color-gray-900: #1a1a1a;
   --color-gray-800: #2b2b2b;
   --color-gray-700: #3c3c3c;
@@ -10,12 +20,31 @@
   --color-gray-100: #f5f5f5;
   --color-indigo-600: #4f46e5;
   --color-indigo-700: #4338ca;
-  --font-family-sans: "Inter", sans-serif;
+
+  /* Font Families */
+  --font-family-body: "Montserrat", sans-serif;
+  --font-family-heading: "Playfair Display", serif;
+}
+
+/* Light Theme Overrides (outside @theme block) */
+html[data-theme='light'] {
+  --bg-primary: var(--color-gray-100);
+  --bg-secondary: var(--color-gray-200);
+  --bg-tertiary: var(--color-gray-300);
+  --text-primary: var(--color-gray-900);
+  --text-secondary: var(--color-gray-600);
+  --text-tertiary: var(--color-gray-700);
 }
 
 @layer base {
   body {
-    @apply bg-gray-900 text-gray-100;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-family-body); /* Apply default body font */
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading); /* Apply heading font */
   }
 }
 
@@ -46,3 +75,4 @@
 #lightbox.show {
     animation: fadeIn 0.3s ease-out forwards;
 }
+