feat: structure

frontend/tailwind.config.js

@@ -0,0 +1,51 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Dark-first color scheme for photo apps
+        bg: '#111110',
+        surface: '#161615',
+        'surface-2': '#1c1c1a',
+        'surface-offset': '#222220',
+        border: 'rgba(255,255,255,0.08)',
+        text: '#e8e6e0',
+        'text-muted': '#878580',
+        'text-faint': '#4a4845',
+        primary: '#4f98a3', // desaturated teal
+        pick: '#4f9e5c',    // green for picked
+        reject: '#c25a5a',  // red for rejected
+        star: '#d4a340',    // amber for stars
+      },
+      fontFamily: {
+        sans: ['Geist', 'system-ui', 'sans-serif'],
+        mono: ['Geist Mono', 'monospace'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.2s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'shimmer': 'shimmer 2s infinite linear',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}