feat: implement dark mode infrastructure, optimize images, and add SEO structured data

app/globals.css

@@ -26,8 +26,30 @@
     --radius: 1rem;
 }
 
+.dark {
+    --background: #1c1917; /* stone-900 */
+    --foreground: #f5f5f4; /* stone-100 */
+    --card: rgba(28, 25, 23, 0.7);
+    --card-foreground: #f5f5f4;
+    --popover: #1c1917;
+    --popover-foreground: #f5f5f4;
+    --primary: #d6d3d1; /* stone-300 */
+    --primary-foreground: #1c1917;
+    --secondary: #44403c; /* stone-700 */
+    --secondary-foreground: #f5f5f4;
+    --muted: #292524; /* stone-800 */
+    --muted-foreground: #a8a29e; /* stone-400 */
+    --accent: #57534e; /* stone-600 */
+    --accent-foreground: #f5f5f4;
+    --destructive: #7f1d1d; /* dark red */
+    --destructive-foreground: #f5f5f4;
+    --border: #44403c;
+    --input: #292524;
+    --ring: #d6d3d1;
+}
+
 body {
-    background: linear-gradient(135deg, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.92) 100%);
+    background: var(--background);
     color: var(--foreground);
     font-family: "Inter", sans-serif;
     margin: 0;
@@ -37,6 +59,7 @@ body {
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     position: relative;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Custom Selection */
@@ -52,35 +75,33 @@ html {
 
 /* Liquid Glass Effects */
 .glass-panel {
-    background: rgba(250, 248, 243, 0.75);
+    background: var(--card);
     backdrop-filter: blur(20px) saturate(130%);
     -webkit-backdrop-filter: blur(20px) saturate(130%);
-    border: 1px solid rgba(215, 204, 200, 0.6);
-    box-shadow: 0 8px 32px rgba(62, 39, 35, 0.12);
+    border: 1px solid var(--border);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
     will-change: backdrop-filter;
 }
 
 .glass-card {
-    background: rgba(255, 252, 245, 0.85);
+    background: var(--card);
     backdrop-filter: blur(30px) saturate(200%);
     -webkit-backdrop-filter: blur(30px) saturate(200%);
-    border: 1px solid rgba(215, 204, 200, 0.7);
+    border: 1px solid var(--border);
     box-shadow:
-        0 4px 6px -1px rgba(62, 39, 35, 0.06),
-        0 2px 4px -1px rgba(62, 39, 35, 0.05),
-        inset 0 0 30px rgba(255, 252, 245, 0.6);
+        0 4px 6px -1px rgba(0, 0, 0, 0.06),
+        0 2px 4px -1px rgba(0, 0, 0, 0.05);
     transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
     will-change: transform, box-shadow;
 }
 
 .glass-card:hover {
-    background: rgba(255, 252, 245, 0.95);
+    background: var(--card);
     box-shadow:
-        0 20px 25px -5px rgba(62, 39, 35, 0.15),
-        0 10px 10px -5px rgba(62, 39, 35, 0.08),
-        inset 0 0 30px rgba(255, 252, 245, 0.9);
+        0 20px 25px -5px rgba(0, 0, 0, 0.15),
+        0 10px 10px -5px rgba(0, 0, 0, 0.08);
     transform: translateY(-4px);
-    border-color: rgba(215, 204, 200, 0.9);
+    border-color: var(--ring);
 }
 
 /* Typography & Headings */
@@ -93,7 +114,7 @@ h6 {
     font-family: var(--font-playfair), Georgia, serif;
     letter-spacing: -0.02em;
     font-weight: 700;
-    color: #3e2723;
+    color: var(--foreground);
 }
 
 /* Improve text contrast - using foreground variable for WCAG AA compliance */
@@ -154,34 +175,34 @@ div {
 /* Markdown Specifics for Blog/Projects */
 .markdown h1 {
     @apply text-4xl font-bold mb-6 tracking-tight;
-    color: #3e2723;
+    color: var(--foreground);
 }
 .markdown h2 {
     @apply text-2xl font-semibold mt-8 mb-4 tracking-tight;
-    color: #3e2723;
+    color: var(--foreground);
 }
 .markdown p {
     @apply mb-4 leading-relaxed;
-    color: #4e342e;
+    color: var(--foreground);
 }
 .markdown a {
     @apply underline decoration-2 underline-offset-2 hover:opacity-80 transition-colors duration-300;
-    color: #5d4037;
-    text-decoration-color: #a1887f;
+    color: var(--primary);
+    text-decoration-color: var(--accent);
 }
 .markdown ul {
     @apply list-disc list-inside mb-4 space-y-2;
-    color: #4e342e;
+    color: var(--foreground);
 }
 .markdown code {
     @apply px-1.5 py-0.5 rounded text-sm font-mono;
-    background: #efebe9;
-    color: #3e2723;
+    background: var(--muted);
+    color: var(--foreground);
 }
 .markdown pre {
     @apply p-4 rounded-xl overflow-x-auto mb-6;
-    background: #3e2723;
-    color: #faf8f3;
+    background: var(--foreground);
+    color: var(--background);
 }
 
 /* Admin Dashboard Styles - Warm Brown Theme */