/* =============================================
   UI Patterns CSS Variables and Base Styles
   ============================================= */

:root {
    /* Carousel Pattern */
    --pattern-carousel-height: 400px;
    --pattern-carousel-radius: 16px;
    --pattern-carousel-transition: 0.5s;
    --pattern-carousel-nav-size: 48px;
    --pattern-carousel-nav-bg: rgba(255, 255, 255, 0.9);
    --pattern-carousel-nav-hover-bg: white;
    --pattern-carousel-nav-color: #1f2937;
    --pattern-carousel-nav-offset: 1rem;
    --pattern-carousel-indicator-size: 12px;
    --pattern-carousel-indicator-gap: 0.5rem;
    --pattern-carousel-indicator-offset: 1.5rem;
    --pattern-carousel-indicator-bg: rgba(255, 255, 255, 0.5);
    --pattern-carousel-indicator-hover-bg: rgba(255, 255, 255, 0.75);
    --pattern-carousel-indicator-active-bg: white;

    /* Horizontal Scroll Pattern */
    --pattern-scroll-gap: 1.5rem;
    --pattern-scroll-gap-mobile: 1rem;
    --pattern-scroll-nav-size: 44px;
    --pattern-scroll-nav-bg: white;
    --pattern-scroll-nav-hover-bg: #f9fafb;
    --pattern-scroll-nav-border: #e5e7eb;
    --pattern-scroll-nav-color: #374151;
    --pattern-scroll-progress-bg: #e5e7eb;
    --pattern-scroll-progress-fill: #6d28d9;
    --pattern-scroll-fade-color: white;

    /* Show More Pattern */
    --pattern-showmore-duration: 0.4s;
    --pattern-showmore-gradient-color: white;
    --pattern-showmore-btn-radius: 25px;
    --pattern-showmore-btn-color: #6d28d9;
    --pattern-showmore-btn-hover: #5b21b6;

    /* Tabs Pattern */
    --pattern-tabs-bg: #f3f4f6;
    --pattern-tabs-color: #6b7280;
    --pattern-tabs-hover-bg: #e5e7eb;
    --pattern-tabs-hover-color: #374151;
    --pattern-tabs-active-bg: #6d28d9;
    --pattern-tabs-active-color: white;
    --pattern-tabs-radius: 25px;
    --pattern-tabs-border: #e5e7eb;
    --pattern-tabs-hover-border: #d1d5db;
    --pattern-tabs-active-border: #6d28d9;
    --pattern-tabs-item-width: 300px;
    --pattern-tabs-gap: 1.5rem;
    --pattern-tabs-empty-color: #9ca3af;

    /* Accordion Pattern */
    --pattern-accordion-gap: 0.75rem;
    --pattern-accordion-bg: white;
    --pattern-accordion-radius: 12px;
    --pattern-accordion-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --pattern-accordion-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --pattern-accordion-expanded-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --pattern-accordion-header-hover: rgba(0, 0, 0, 0.02);
    --pattern-accordion-icon-color: #9ca3af;
    --pattern-accordion-icon-active: #6d28d9;
    --pattern-accordion-divider: #f3f4f6;
    --pattern-accordion-border: #e5e7eb;
    --pattern-accordion-border-active: #6d28d9;
    --pattern-accordion-max-height: 1000px;

    /* Featured List Pattern */
    --pattern-featured-gap: 1.5rem;
    --pattern-featured-list-gap: 1rem;
    --pattern-featured-accent: linear-gradient(180deg, #6d28d9 0%, #7c3aed 100%);

    /* Ticker/Marquee Pattern */
    --pattern-ticker-duration: 20s;
    --pattern-ticker-height: 48px;
    --pattern-ticker-bg: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --pattern-ticker-color: white;
    --pattern-ticker-gap: 3rem;
    --pattern-ticker-pause-on-hover: paused;

    /* Flip Card Pattern */
    --pattern-flip-duration: 0.6s;
    --pattern-flip-perspective: 1000px;
    --pattern-flip-front-bg: white;
    --pattern-flip-back-bg: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    --pattern-flip-back-color: white;
    --pattern-flip-radius: 16px;
    --pattern-flip-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    /* Modal Gallery Pattern */
    --pattern-gallery-overlay-bg: rgba(0, 0, 0, 0.95);
    --pattern-gallery-nav-size: 50px;
    --pattern-gallery-nav-bg: rgba(255, 255, 255, 0.1);
    --pattern-gallery-nav-hover-bg: rgba(255, 255, 255, 0.2);
    --pattern-gallery-nav-color: white;
    --pattern-gallery-indicator-bg: rgba(255, 255, 255, 0.3);
    --pattern-gallery-indicator-active-bg: white;
}

/* Dark theme overrides */
[data-theme="dark"] {
    --pattern-carousel-nav-bg: rgba(31, 41, 55, 0.9);
    --pattern-carousel-nav-hover-bg: #374151;
    --pattern-carousel-nav-color: white;

    --pattern-scroll-nav-bg: #374151;
    --pattern-scroll-nav-hover-bg: #4b5563;
    --pattern-scroll-nav-border: #4b5563;
    --pattern-scroll-nav-color: white;
    --pattern-scroll-progress-bg: #4b5563;
    --pattern-scroll-fade-color: #1f2937;

    --pattern-showmore-gradient-color: #1f2937;

    --pattern-tabs-bg: #374151;
    --pattern-tabs-color: #9ca3af;
    --pattern-tabs-hover-bg: #4b5563;
    --pattern-tabs-hover-color: white;
    --pattern-tabs-border: #4b5563;

    --pattern-accordion-bg: #374151;
    --pattern-accordion-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --pattern-accordion-header-hover: rgba(255, 255, 255, 0.05);
    --pattern-accordion-divider: #4b5563;
    --pattern-accordion-border: #4b5563;

    --pattern-flip-front-bg: #374151;
}

/* =============================================
   Utility Classes for UI Patterns
   ============================================= */

/* Scroll snap utilities */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-start {
    scroll-snap-align: start;
}

.scroll-snap-center {
    scroll-snap-align: center;
}

/* Hide scrollbar utilities */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Animation utilities */
.animate-fade-in {
    animation: patternFadeIn 0.3s ease;
}

.animate-slide-up {
    animation: patternSlideUp 0.3s ease;
}

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

@keyframes patternFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes patternSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes patternSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ticker/Marquee animation */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Flip animation */
@keyframes flipIn {
    0% {
        transform: perspective(var(--pattern-flip-perspective)) rotateY(90deg);
    }
    100% {
        transform: perspective(var(--pattern-flip-perspective)) rotateY(0);
    }
}

/* Card hover effects */
.pattern-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pattern-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Focus states for accessibility */
.pattern-focus-ring:focus-visible {
    outline: 2px solid var(--pattern-tabs-active-bg, #6d28d9);
    outline-offset: 2px;
}

/* Responsive container widths for patterns */
@media (max-width: 640px) {
    :root {
        --pattern-carousel-height: 280px;
        --pattern-carousel-nav-size: 40px;
        --pattern-scroll-gap: 1rem;
        --pattern-tabs-item-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --pattern-carousel-height: 320px;
        --pattern-featured-gap: 1rem;
    }
}