feat: implement dynamic viewport theme color management and update meta tag

lib/theme-colors.ts

@@ -0,0 +1,29 @@
+// Theme color utilities for dynamic viewport theme color
+
+export const themeColors = {
+  blue: {
+    background: 'hsl(240, 10%, 3.9%)', // Dark blue background
+    hex: '#0f0f23' // Hex equivalent for theme-color
+  },
+  violet: {
+    background: 'hsl(224, 71.4%, 4.1%)', // Dark violet background  
+    hex: '#0c0a2e' // Hex equivalent for theme-color
+  }
+} as const;
+
+export type Theme = keyof typeof themeColors;
+
+export function getThemeBackgroundColor(theme: Theme): string {
+  return themeColors[theme].hex;
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  l /= 100;
+  const a = s * Math.min(l, 1 - l) / 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}