@import "tailwindcss";

/* Tailwind v4 is CSS-first and no longer auto-discovers tailwind.config.js.
   @config keeps the existing JS config (custom colours, gradient keyframes,
   darkMode: 'class' and the content globs) authoritative. */
@config "../../tailwind.config.js";

/* Custom component classes */
@layer components {
    /* Recipe cards with colorful borders */
    .recipe-card {
        @apply relative overflow-hidden;
    }

    .recipe-card::before {
        content: '';
        @apply absolute top-0 left-0 right-0 h-1;
        background: linear-gradient(90deg, #ff6b35, #fbbf24, #4ade80);
    }

    /* Ingredient badges */
    .ingredient-badge {
        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
        background: linear-gradient(135deg, #fef3c7, #fed7aa);
        @apply text-orange-700 border border-orange-400;
    }

    .cookware-badge {
        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
        background: linear-gradient(135deg, #dcfce7, #bbf7d0);
        @apply text-green-900 border border-green-400;
    }

    .timer-badge {
        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        @apply text-red-900 border border-red-400;
    }

    /* Enhanced buttons */
    .btn-primary {
        background: linear-gradient(135deg, #ff6b35, #f97316);
        @apply shadow-lg hover:-translate-y-0.5 transition-all;
    }

    .btn-primary:hover {
        box-shadow: 0 6px 20px 0 rgba(255, 107, 53, 0.4);
    }

    /* Step numbers with colorful circles */
    .step-number {
        @apply w-8 h-8 flex items-center justify-center rounded-full text-white font-bold shrink-0;
        background: linear-gradient(135deg, #ff6b35, #f97316);
    }

    /* Tags styling */
    .tag {
        @apply inline-block px-3 py-1 rounded-full text-xs font-medium mr-2;
        background: linear-gradient(135deg, #fbbf24, #fb923c);
        @apply text-white shadow-xs;
    }

    /* Navigation pills */
    .nav-pill {
        @apply px-5 py-2 rounded-full transition-all font-medium text-gray-500 relative;
    }

    .nav-pill:hover {
        background: linear-gradient(135deg, #fef3c7, #fed7aa);
        @apply text-orange-700 -translate-y-0.5 shadow-md;
    }

    .nav-pill.active {
        background: linear-gradient(135deg, #ff6b35, #f97316);
        @apply text-white font-bold shadow-lg;
    }

    /* Recipe metadata pills - simple outline style */
    .metadata-pill {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap border bg-white;
    }

    .metadata-servings {
        @apply text-gray-600 border-gray-300;
    }

    .metadata-time {
        @apply text-blue-600 border-blue-300;
    }

    .metadata-difficulty {
        @apply text-yellow-600 border-yellow-300;
    }

    .metadata-course {
        @apply text-orange-600 border-orange-300;
    }

    .metadata-prep {
        @apply text-indigo-600 border-indigo-300;
    }

    .metadata-cook {
        @apply text-red-600 border-red-300;
    }

    .metadata-cuisine {
        @apply text-green-600 border-green-300;
    }

    .metadata-diet {
        @apply text-lime-600 border-lime-300;
    }

    .metadata-author {
        @apply text-pink-600 border-pink-300;
    }

    .metadata-custom {
        @apply text-purple-600 border-purple-300;
    }

    /* Search input with colorful focus */
    .search-input:focus {
        @apply border-primary-orange;
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    }

    /* Step images in recipes */
    .image-step {
        @apply w-full max-h-80 object-contain rounded-xl;
    }

    /* Recipe image placeholder with gradient */
    .recipe-image-placeholder {
        background: linear-gradient(135deg, #ff6b35, #fbbf24);
        @apply w-30 h-30 rounded-full flex items-center justify-center text-white text-5xl;
    }

    /* Pantry item styles with improved dark mode support */
    .pantry-item {
        @apply bg-gray-50 dark:bg-gray-800;
    }

    .pantry-item:hover {
        @apply bg-gray-100 dark:bg-gray-700;
    }

    /* Out-of-stock pantry items with better dark mode contrast */
    .pantry-item.out-of-stock {
        @apply bg-red-50 border border-red-200 dark:bg-red-950/30 dark:border-red-900/50;
    }

    .pantry-item.out-of-stock:hover {
        @apply bg-red-100 dark:bg-red-950/40;
    }

    /* Pantry text colors for dark mode */
    .pantry-item .text-gray-900 {
        @apply dark:text-gray-100;
    }

    .pantry-item .text-gray-600 {
        @apply dark:text-gray-400;
    }

    .pantry-item .text-gray-500 {
        @apply dark:text-gray-400;
    }

    /* Out-of-stock text in dark mode */
    .pantry-item.out-of-stock .quantity-display {
        @apply text-red-600 dark:text-red-400;
    }

    /* Status dots with dark mode support */
    .item-status-dot.in-stock {
        @apply bg-green-500 dark:bg-green-400;
    }

    .item-status-dot.out-of-stock {
        @apply bg-red-500 dark:bg-red-400;
    }

    /* CodeMirror editor dark mode support */
    .dark .cm-editor {
        @apply bg-gray-900;
    }

    .dark .cm-gutters {
        @apply bg-gray-800 border-gray-700;
    }

    .dark .cm-lineNumbers .cm-gutterElement {
        @apply text-gray-400;
    }

    .dark .cm-activeLineGutter {
        @apply bg-gray-700;
    }

    .dark .cm-activeLine {
        @apply bg-gray-800/50;
    }

    .dark .cm-content {
        caret-color: white;
    }

    .dark .cm-cursor {
        border-left-color: white;
    }

    .dark .cm-selectionBackground {
        @apply bg-blue-800/50!;
    }
}