feat: complete UI overhaul (liquid glass theme, i18n, FontAwesome)

tailwind.config.js

@@ -1,43 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
-  // The result cards use a dynamic class `stagger-${index}` for the
-  // per-card animation delay. Tailwind's content scanner can't statically
-  // resolve that template literal, so without the safelist the four
-  // matching rules from src/index.css get purged from the build.
   safelist: [{ pattern: /^stagger-[0-4]$/ }],
   darkMode: "class",
   theme: {
     extend: {
       colors: {
-        // Dark mode (default) palette
         bg: {
-          DEFAULT: "#080810",
-          card: "#111118",
-          hover: "#16161f",
-        },
-        // Light mode palette (applied via :root when not .dark)
-        bgLight: {
-          DEFAULT: "#f8fafc",
-          card: "#ffffff",
+          DEFAULT: "var(--bg)",
+          card: "var(--bg-card)",
+          hover: "var(--bg-hover)",
         },
         border: {
-          DEFAULT: "rgba(255, 255, 255, 0.06)",
-        },
-        borderLight: {
-          DEFAULT: "rgba(0, 0, 0, 0.08)",
+          DEFAULT: "var(--border)",
         },
         accent: {
-          primary: "#7c3aed",
-          secondary: "#06b6d4",
-          secondaryLight: "#0891b2",
+          primary: "var(--accent-primary)",
+          secondary: "var(--accent-secondary)",
         },
         fg: {
-          DEFAULT: "#e2e8f0",
-          muted: "#64748b",
-          dark: "#0f172a",
+          DEFAULT: "var(--fg)",
+          muted: "var(--fg-muted)",
         },
-        tag: "#a78bfa",
+        tag: "var(--tag)",
       },
       animation: {
         "gradient-shift": "gradient-shift 8s ease infinite",