feat(theme): implement Palina Gold theme and adaptive SVG logo system

assets/css/tailwind.css

@@ -1,16 +1,30 @@
 @import "tailwindcss";
 
 @theme {
-  /* Default Custom Properties (Dark Theme) */
+  /* Brand Palette: Palina Gold (#DDC288) */
-  --bg-primary: var(--color-gray-900);
+  --color-brand-50: #faf8f0;
-  --bg-secondary: var(--color-gray-800);
+  --color-brand-100: #f4edd1;
-  --bg-tertiary: var(--color-gray-700);
+  --color-brand-200: #e9dba4;
-  --text-primary: var(--color-gray-100);
+  --color-brand-300: #ddc277;
-  --text-secondary: var(--color-gray-400);
+  --color-brand-400: #ddc288; /* Requested: #DDC288 */
-  --text-tertiary: var(--color-gray-300);
+  --color-brand-500: #c9a765;
-  --brand-primary: var(--color-indigo-600);
+  --color-brand-600: #b58d46;
-  --brand-secondary: var(--color-indigo-700);
+  --color-brand-700: #9c763a;
+  --color-brand-800: #7d5e31;
+  --color-brand-900: #624a29;
+  --color-brand-950: #4c3a23;
 
+  /* Default Custom Properties (Dark Theme) */
+  --bg-primary: #121212;
+  --bg-secondary: #1e1e1e;
+  --bg-tertiary: #2a2a2a;
+  --text-primary: #f2f2f2;
+  --text-secondary: #a3a3a3;
+  --text-tertiary: #737373;
+  --brand-primary: var(--color-brand-400);
+  --brand-secondary: var(--color-brand-500);
+
+  /* Gray Palette for standard UI */
   --color-gray-900: #1a1a1a;
   --color-gray-800: #2b2b2b;
   --color-gray-700: #3c3c3c;
@@ -18,22 +32,20 @@
   --color-gray-400: #a0a0a0;
   --color-gray-200: #e0e0e0;
   --color-gray-100: #f5f5f5;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
 
   /* Font Families */
   --font-family-body: "Montserrat", sans-serif;
   --font-family-heading: "Playfair Display", serif;
 }
 
-/* Light Theme Overrides (outside @theme block) */
+/* Light Theme Overrides */
 html[data-theme='light'] {
-  --bg-primary: var(--color-gray-100);
+  --bg-primary: #fdfcf9;
-  --bg-secondary: var(--color-gray-200);
+  --bg-secondary: #f4f1e8;
-  --bg-tertiary: var(--color-gray-300);
+  --bg-tertiary: #e9e4d5;
-  --text-primary: var(--color-gray-900);
+  --text-primary: #2d2114;
-  --text-secondary: var(--color-gray-600);
+  --text-secondary: #624a29;
-  --text-tertiary: var(--color-gray-700);
+  --text-tertiary: #7d5e31;
 }
 
 [x-cloak] { display: none !important; }
@@ -42,38 +54,37 @@ html[data-theme='light'] {
   body {
     background-color: var(--bg-primary);
     color: var(--text-primary);
-    font-family: var(--font-family-body); /* Apply default body font */
+    font-family: var(--font-family-body);
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-family-heading); /* Apply heading font */
+    font-family: var(--font-family-heading);
+    color: var(--brand-primary);
   }
 }
 
 @layer components {
   /* Main navigation styling */
   header nav ul {
-    @apply flex items-center space-x-4; /* Make li items inline with spacing */
+    @apply flex items-center space-x-4;
   }
   header nav ul li a {
-    @apply text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors duration-200; /* Default link style */
+    @apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
   }
 
   /* Mobile navigation styling */
   #mobile-menu nav ul {
-    @apply flex flex-col items-center space-y-8; /* Stack items vertically in mobile menu */
+    @apply flex flex-col items-center space-y-8;
   }
   #mobile-menu nav ul li a {
-    @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--text-secondary)] transition-colors duration-200;
+    @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
   }
 }
 
 .site-logo {
   @apply transition-all duration-300;
-}
+  color: var(--brand-primary);
-
+  fill: currentColor;
-html[data-theme='dark'] .site-logo {
-  filter: invert(0.9) brightness(1.2);
 }
 
 @keyframes fadeInUp {

partials/footer.hbs

@@ -4,7 +4,7 @@
             {{#if @site.logo}}
                 <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-8 w-auto site-logo">
             {{else}}
-                <img src="{{asset "images/palina.png"}}" alt="{{@site.title}}" class="h-8 w-auto site-logo">
+                {{> "icons/logo" class="h-8 w-auto site-logo"}}
             {{/if}}
         </a>
         <p class="text-sm text-[var(--text-secondary)] sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-[var(--bg-secondary)] sm:py-2 sm:mt-0 mt-4">

partials/header.hbs

@@ -4,8 +4,9 @@
             {{#if @site.logo}}
                 <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
             {{else}}
-                <img src="{{asset "images/palina.png"}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
+                {{> "icons/logo" class="h-10 w-auto site-logo"}}
             {{/if}}
+            <span class="ml-3 text-xl font-bold">{{@site.title}}</span>
         </a>
 
         <div class="flex items-center">

partials/mobile-menu.hbs

@@ -13,7 +13,7 @@
             {{#if @site.logo}}
                 <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
             {{else}}
-                <img src="{{asset "images/palina.png"}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
+                {{> "icons/logo" class="h-10 w-auto site-logo"}}
             {{/if}}
         </a>
         <button @click="mobileMenuOpen = false" class="p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">