@import 'tailwindcss';

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

@theme {
    --font-sans: var(--font-family, 'Cairo'), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    
    --color-primary-50: var(--primary-50, #f0f9ff);
    --color-primary-100: var(--primary-100, #e0f2fe);
    --color-primary-200: var(--primary-200, #bae6fd);
    --color-primary-300: var(--primary-300, #7dd3fc);
    --color-primary-400: var(--primary-400, #38bdf8);
    --color-primary-500: var(--primary-500, #0ea5e9);
    --color-primary-600: var(--primary-600, #0284c7);
    --color-primary-700: var(--primary-700, #0369a1);
    --color-primary-800: var(--primary-800, #075985);
    --color-primary-900: var(--primary-900, #0c4a6e);
    
    --color-secondary-50: var(--secondary-50, #f8fafc);
    --color-secondary-100: var(--secondary-100, #f1f5f9);
    --color-secondary-200: var(--secondary-200, #e2e8f0);
    --color-secondary-300: var(--secondary-300, #cbd5e1);
    --color-secondary-400: var(--secondary-400, #94a3b8);
    --color-secondary-500: var(--secondary-500, #64748b);
    --color-secondary-600: var(--secondary-600, #475569);
    --color-secondary-700: var(--secondary-700, #334155);
    --color-secondary-800: var(--secondary-800, #1e293b);
    --color-secondary-900: var(--secondary-900, #0f172a);
}

/* Custom utilities */
@layer utilities {
    .bg-theme-primary {
        background-color: var(--primary-500, #0ea5e9);
    }
    .bg-theme-primary-dark {
        background-color: var(--primary-600, #0284c7);
    }
    .bg-theme-primary-light {
        background-color: var(--primary-100, #e0f2fe);
    }
    .text-theme-primary {
        color: var(--primary-500, #0ea5e9);
    }
    .text-theme-primary-dark {
        color: var(--primary-700, #0369a1);
    }
    .border-theme-primary {
        border-color: var(--primary-500, #0ea5e9);
    }
    .hover\:bg-theme-primary-dark:hover {
        background-color: var(--primary-600, #0284c7);
    }
    .hover\:text-theme-primary:hover {
        color: var(--primary-500, #0ea5e9);
    }
    .bg-theme-secondary {
        background-color: var(--secondary-500, #64748b);
    }
    .text-theme-secondary {
        color: var(--secondary-500, #64748b);
    }
    .bg-footer {
        background-color: var(--footer-bg, #0f172a);
    }
}

/* Animation keyframes */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}