/* Tailwind CSS Custom Utilities and Components for Ugo */

/* Custom Tailwind utilities that extend the framework */

/* Ugo Color Palette */
.bg-ugo-primary { background-color: #b97a56; }
.bg-ugo-secondary { background-color: #2d1c0f; }
.bg-ugo-accent { background-color: #f97316; }
.bg-ugo-bg { background-color: #f8f6f0; }

.text-ugo-primary { color: #b97a56; }
.text-ugo-secondary { color: #2d1c0f; }
.text-ugo-accent { color: #f97316; }

.border-ugo-primary { border-color: #b97a56; }
.border-ugo-secondary { border-color: #2d1c0f; }
.border-ugo-accent { border-color: #f97316; }

/* Custom Gradients */
.bg-gradient-ugo {
    background: linear-gradient(135deg, #b97a56, #f97316);
}

.bg-gradient-ugo-soft {
    background: linear-gradient(135deg, rgba(185, 122, 86, 0.1), rgba(249, 115, 22, 0.1));
}

/* Custom Shadows */
.shadow-ugo {
    box-shadow: 0 4px 20px rgba(185, 122, 86, 0.2);
}

.shadow-ugo-lg {
    box-shadow: 0 8px 40px rgba(185, 122, 86, 0.25);
}

/* Custom Border Radius */
.rounded-ugo {
    border-radius: 20px;
}

.rounded-ugo-lg {
    border-radius: 28px;
}

/* Custom Animations */
.animate-bounce-soft {
    animation: bounce-soft 2s infinite;
}

@keyframes bounce-soft {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0,-15px,0);
    }
    70% {
        transform: translate3d(0,-7px,0);
    }
    90% {
        transform: translate3d(0,-2px,0);
    }
}

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

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

.animate-slide-in-left {
    animation: slide-in-left 0.5s ease-out forwards;
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.5s ease-out forwards;
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(185, 122, 86, 0.3);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(185, 122, 86, 0.4);
}

/* Text Effects */
.text-gradient-ugo {
    background: linear-gradient(135deg, #b97a56, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-shadow-soft {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Glass Morphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
    background: rgba(45, 28, 15, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(185, 122, 86, 0.18);
}

/* Custom Buttons */
.btn-ugo {
    @apply bg-ugo-primary text-white px-6 py-3 rounded-ugo font-semibold;
    @apply hover:bg-opacity-90 transition-all duration-300;
    @apply shadow-ugo hover:shadow-ugo-lg;
    @apply transform hover:scale-105;
}

.btn-ugo-outline {
    @apply border-2 border-ugo-primary text-ugo-primary px-6 py-3 rounded-ugo font-semibold;
    @apply hover:bg-ugo-primary hover:text-white transition-all duration-300;
    @apply shadow-ugo hover:shadow-ugo-lg;
}

.btn-ugo-ghost {
    @apply text-ugo-primary px-6 py-3 rounded-ugo font-semibold;
    @apply hover:bg-ugo-primary hover:bg-opacity-10 transition-all duration-300;
}

/* Custom Cards */
.card-ugo {
    @apply bg-white rounded-ugo shadow-ugo p-6;
    @apply hover:shadow-ugo-lg transition-all duration-300;
    @apply border border-gray-100;
}

.card-ugo-feature {
    @apply bg-gradient-to-br from-white to-ugo-bg rounded-ugo-lg shadow-ugo-lg p-8;
    @apply hover:shadow-xl transition-all duration-300;
    @apply transform hover:scale-105;
}

/* Navigation Styles */
.nav-link-ugo {
    @apply text-ugo-secondary hover:text-ugo-primary transition-colors duration-300;
    @apply relative;
}

.nav-link-ugo::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-ugo-primary;
    @apply transition-all duration-300;
}

.nav-link-ugo:hover::after,
.nav-link-ugo.active::after {
    @apply w-full;
}

/* Form Elements */
.input-ugo {
    @apply border-2 border-gray-200 rounded-ugo px-4 py-3;
    @apply focus:border-ugo-primary focus:ring-4 focus:ring-ugo-primary focus:ring-opacity-20;
    @apply transition-all duration-300;
}

.input-ugo:focus {
    @apply outline-none;
}

/* Spacing Utilities */
.space-ugo > * + * {
    margin-top: 1.5rem;
}

.space-ugo-sm > * + * {
    margin-top: 1rem;
}

.space-ugo-lg > * + * {
    margin-top: 2rem;
}

/* Layout Utilities */
.container-ugo {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
}

.section-ugo {
    @apply py-16 lg:py-24;
}

/* Responsive Text */
.text-responsive-xl {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
}

.text-responsive-lg {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
}

.text-responsive-md {
    @apply text-lg sm:text-xl md:text-2xl;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .glass {
        background: rgba(45, 28, 15, 0.25);
        border: 1px solid rgba(185, 122, 86, 0.18);
    }
    
    .card-ugo {
        @apply bg-gray-800 border-gray-700;
    }
    
    .nav-link-ugo {
        @apply text-gray-300 hover:text-ugo-accent;
    }
    
    .input-ugo {
        @apply bg-gray-800 border-gray-600 text-white;
        @apply focus:border-ugo-accent;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
.focus-ugo:focus {
    @apply outline-none ring-4 ring-ugo-primary ring-opacity-50;
}

/* Loading States */
.loading-ugo {
    position: relative;
    overflow: hidden;
}

.loading-ugo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(185, 122, 86, 0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}