@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    
    /* Custom Colors */
    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-300: #a5b4fc;
    --color-primary-400: #818cf8;
    --color-primary-500: #6366f1;
    --color-primary-600: #4f46e5;
    --color-primary-700: #4338ca;
    --color-primary-800: #3730a3;
    --color-primary-900: #312e81;
    
    --color-accent-400: #f472b6;
    --color-accent-500: #ec4899;
    --color-accent-600: #db2777;
    
    --color-dark-900: #0f0f23;
    --color-dark-800: #1a1a2e;
    --color-dark-700: #252541;
    --color-dark-600: #2d2d4a;
}

/* Custom Utilities */
@layer utilities {
    .gradient-primary {
        background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
    }
    
    .gradient-text {
        background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-accent-400) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .glass-dark {
        background: rgba(15, 15, 35, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .text-shadow {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }
    
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse 3s ease-in-out infinite;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: var(--font-sans);
        background-color: var(--color-dark-900);
        color: white;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
    }
}