2026.06.04 frontend építés közben

frontend/tailwind.config.js

@@ -6,37 +6,32 @@ export default {
   ],
   theme: {
     extend: {
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
-      },
       colors: {
-        // Premium slate palette for professional feel
-        slate: {
-          50: '#f8fafc',
-          100: '#f1f5f9',
-          200: '#e2e8f0',
-          300: '#cbd5e1',
-          400: '#94a3b8',
-          500: '#64748b',
-          600: '#475569',
-          700: '#334155',
-          800: '#1e293b',
-          900: '#0f172a',
-        },
-        // Zinc as alternative clean industrial palette
-        zinc: {
-          50: '#fafafa',
-          100: '#f4f4f5',
-          200: '#e4e4e7',
-          300: '#d4d4d8',
-          400: '#a1a1aa',
-          500: '#71717a',
-          600: '#52525b',
-          700: '#3f3f46',
-          800: '#27272a',
-          900: '#18181b',
-        },
+        // Service Finder Design System Colors based on garage.jpg
+        'sf-wall': '#B5DCE3',
+        'sf-green': '#70BC84',
+        'sf-blue': '#004B63',
+        'sf-accent': '#008CA4',
+        // Neutral colors
+        'sf-gray-light': '#f8fafc',
+        'sf-gray': '#64748b',
+        'sf-gray-dark': '#334155',
+        // Dark dashboard theme
+        'sf-dark': '#04151F',
+        'sf-dark-lighter': '#0a2a40',
+        'sf-dark-card': 'rgba(255,255,255,0.04)',
+        'sf-dark-border': 'rgba(255,255,255,0.10)',
+        'sf-dark-glass': 'rgba(255,255,255,0.05)'
       },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['Fira Code', 'monospace']
+      },
+      backgroundImage: {
+        'sf-wall-pattern': 'linear-gradient(135deg, #B5DCE3 0%, #d4e9ed 100%)',
+        'sf-subtle-stripes': 'repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)',
+        'sf-dark-gradient': 'radial-gradient(ellipse 80% 60% at 50% 0%, #0a2a40 0%, #04151F 70%)'
+      }
     },
   },
   plugins: [],