refactor: restructure project to classic MVC pattern

tailwind.config.js

@@ -7,79 +7,86 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+          background: "#0f0f1f",  // fondo oscuro elegante
+          foreground: "#f8f8f2",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-          50: "#f0f9ff",
-          100: "#e0f2fe",
-          200: "#bae6fd",
-          300: "#7dd3fc",
-          400: "#38bdf8",
-          500: "#0ea5e9",
-          600: "#0284c7",
-          700: "#0369a1",
-          800: "#075985",
-          900: "#0c4a6e",
+            DEFAULT: "#8b5cf6", // violeta principal
+            50: "#f3ebff",
+            100: "#e0d7ff",
+            200: "#c0aaff",
+            300: "#a078ff",
+            400: "#8b5cf6",
+            500: "#7c3aed",
+            600: "#6d28d9",
+            700: "#5b21b6",
+            800: "#4c1d95",
+            900: "#3b1070",
+            foreground: "#ffffff",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+            DEFAULT: "#c084fc", // púrpura suave para CTA
+            foreground: "#ffffff",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+            DEFAULT: "#d8b4fe", // acento claro violeta
+            foreground: "#1f1f2e",
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          muted: {
+              DEFAULT: "#a78bfa", // violeta pálido
+              foreground: "#f8f8f2",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+            DEFAULT: "#1e1b2f", // card dark purple
+            foreground: "#f8f8f2",
         },
-        purple: {
-          400: "#475569", // slate-600
-          500: "#334155", // slate-700
-          600: "#1e293b", // slate-800
-        },
-        pink: {
-          500: "#0ea5e9", // sky-500 (azul vibrante, pero no chillón)
-          600: "#0284c7", // sky-600
+          popover: {
+              DEFAULT: "#2c2345",
+              foreground: "#f8f8f2",
         },
+          success: "#7dd3fc",
+          warning: "#facc15",
+          error: "#f87171",
+      },
+        fontFamily: {
+            sans: ["Inter", ...fontFamily.sans],
+            mono: ["Fira Code", ...fontFamily.mono],
       },
       animation: {
         "bounce-slow": "bounce 2s infinite",
         "pulse-slow": "pulse 3s infinite",
-        "fade-in": "fadeIn 0.5s ease-in-out",
+          "fade-in": "fadeIn 0.6s ease-in-out",
+          "float": "float 4s ease-in-out infinite",
+          "wiggle": "wiggle 0.8s ease-in-out infinite",
       },
       keyframes: {
         fadeIn: {
           "0%": { opacity: "0", transform: "translateY(10px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-      },
-      fontFamily: {
-        sans: ["Inter", ...fontFamily.sans],
+          float: {
+              "0%, 100%": {transform: "translateY(0)"},
+              "50%": {transform: "translateY(-10px)"},
+          },
+          wiggle: {
+              "0%, 100%": {transform: "rotate(-3deg)"},
+              "50%": {transform: "rotate(3deg)"},
+          },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+          lg: "1rem",
+          md: "0.75rem",
+          sm: "0.5rem",
+      },
+        boxShadow: {
+            "card-light": "0 8px 16px rgba(139,92,246,0.2)",
+            "card-dark": "0 8px 20px rgba(0,0,0,0.5)",
+            glow: "0 0 20px rgba(139,92,246,0.6)",
+        },
+        transitionProperty: {
+            height: "height",
+            spacing: "margin, padding",
       },
     },
   },
   plugins: [],
-};
+};