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

@theme {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    --color-accent-500: #8b5cf6;
    --color-accent-600: #7c3aed;

    --color-success-500: #10b981;
    --color-danger-500: #ef4444;
    --color-warning-500: #f59e0b;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply font-sans antialiased text-gray-900 bg-gray-50;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-semibold tracking-tight;
    }
}

@layer components {

    /* Primary button */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-primary-600 to-primary-700 rounded-lg shadow-sm hover:from-primary-700 hover:to-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 ease-in-out;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-red-600 rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    /* Form inputs */
    .form-input {
        @apply block w-full px-4 py-2.5 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all duration-200;
    }

    .form-select {
        @apply block w-full px-4 py-2.5 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all duration-200;
    }

    .form-textarea {
        @apply block w-full px-4 py-3 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg placeholder-gray-400 resize-y focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all duration-200;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }

    .form-error {
        @apply text-xs text-red-600 mt-1;
    }

    .form-group {
        @apply mb-5;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden;
    }

    .card-body {
        @apply p-6;
    }

    /* Alerts */
    .alert {
        @apply px-4 py-3 rounded-lg text-sm font-medium mb-4;
    }

    .alert-success {
        @apply bg-emerald-50 text-emerald-700 border border-emerald-200;
    }

    .alert-error {
        @apply bg-red-50 text-red-700 border border-red-200;
    }

    .alert-warning {
        @apply bg-amber-50 text-amber-700 border border-amber-200;
    }

    .alert-info {
        @apply bg-blue-50 text-blue-700 border border-blue-200;
    }

    /* Badge */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800;
    }

    .badge-green {
        @apply bg-emerald-100 text-emerald-800;
    }

    .badge-yellow {
        @apply bg-amber-100 text-amber-800;
    }

    .badge-red {
        @apply bg-red-100 text-red-800;
    }

    .badge-purple {
        @apply bg-purple-100 text-purple-800;
    }

    .badge-gray {
        @apply bg-gray-100 text-gray-700;
    }

    /* Job card */
    .job-card {
        @apply card hover:shadow-md hover:border-primary-200 transition-all duration-300 group;
    }

    .job-card:hover .job-card-title {
        @apply text-primary-600;
    }

    /* Stat card */
    .stat-card {
        @apply card p-5 flex items-center gap-4;
    }

    .stat-card-icon {
        @apply w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl;
    }

    /* Skeleton loading */
    .skeleton {
        @apply animate-pulse bg-gray-200 rounded;
    }

    /* Pagination */
    .pagination {
        @apply flex items-center gap-1;
    }

    .pagination a,
    .pagination span {
        @apply px-3 py-1.5 text-sm rounded-lg transition-colors;
    }

    .pagination a {
        @apply text-gray-600 hover:bg-primary-50 hover:text-primary-600;
    }

    .pagination .active {
        @apply bg-primary-600 text-white;
    }
}

/* Custom animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Glassmorphism effect for hero */
.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Pulse for notification badge */
@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.badge-pulse {
    animation: badgePulse 2s infinite;
}