/* Tem Que Provar - Design System */

:root {
    /* Brand Colors - Warm, Artisanal Palette */
    --background: 40 33% 97%; /* Branco Creme #FAF8F5 */
    --foreground: 0 0% 24%; /* Cinza Grafite #3D3D3D */

    --card: 40 33% 97%;
    --card-foreground: 0 0% 24%;

    --popover: 40 33% 97%;
    --popover-foreground: 0 0% 24%;

    /* Laranja Queimado/Âmbar - Primary brand color */
    --primary: 24 76% 52%; /* #E07B2A */
    --primary-foreground: 40 33% 97%;

    /* Amarelo Dourado - Secondary warm accent */
    --secondary: 37 91% 55%; /* #F5A623 */
    --secondary-foreground: 0 0% 24%;

    /* Verde Floresta - Nature, fresh ingredients */
    --accent: 146 52% 36%; /* #2D8C4E */
    --accent-foreground: 40 33% 97%;

    /* Azul Céu - Modern contrast */
    --sky: 212 68% 57%; /* #4A90D9 */
    --sky-foreground: 40 33% 97%;

    /* Muted tones */
    --muted: 30 20% 90%;
    --muted-foreground: 0 0% 35%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 40 33% 97%;

    /* UI Elements */
    --border: 30 20% 85%;
    --input: 30 20% 85%;
    --ring: 24 76% 52%;

    --radius: 1rem;

    /* Custom brand tokens */
    --caramel: 24 76% 52%;
    --honey: 37 91% 55%;
    --forest: 146 52% 36%;
    --chocolate: 20 30% 20%;
    --cream: 40 33% 97%;
    --wood: 25 30% 25%;

    /* Shadows */
    --shadow-soft: 0 4px 20px -4px hsl(20 30% 20% / 0.15);
    --shadow-elevated: 0 12px 40px -8px hsl(20 30% 20% / 0.25);
    --shadow-glow: 0 0 40px hsl(37 91% 55% / 0.3);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Selection styling */
::selection {
    background-color: hsl(var(--primary) / 0.2);
    color: hsl(var(--foreground));
}

/* Hide scrollbar for horizontal scroll */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 0; }
}

/* Utility Classes */
.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.8s ease-out forwards;
}

.animate-slide-down {
    opacity: 0;
    animation: slideDown 0.6s ease-out forwards;
}

.animate-scale-in {
    opacity: 0;
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-soft {
    animation: pulse-soft 3s ease-in-out infinite;
}

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-800 { animation-delay: 0.8s; }
.delay-1100 { animation-delay: 1.1s; }
.delay-1300 { animation-delay: 1.3s; }

/* Text gradient */
.text-gradient-warm {
    background: linear-gradient(135deg, hsl(var(--caramel)) 0%, hsl(var(--honey)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Organic shapes */
.shape-organic {
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
}

/* Transition classes */
.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 6px;
    background: linear-gradient(90deg, hsl(var(--caramel)) 0%, hsl(var(--honey)) 50%, hsl(var(--caramel)) 100%);
    transform-origin: left;
    z-index: 9999;
    transition: transform 0.1s ease-out;
}

/* Parallax Effect */
.parallax-element {
    transition: transform 0.1s ease-out;
}

/* WhatsApp Button Pulse */
.whatsapp-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #25D366;
    animation: pulse-scale 2s ease-in-out infinite;
}

/* Intersection Observer animation classes */
.fade-in-section {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

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

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

/* Swiper Carousel Customization */
.products-carousel {
    padding-bottom: 60px !important;
}

.products-carousel .swiper-button-prev,
.products-carousel .swiper-button-next {
    width: 48px;
    height: 48px;
    background-color: hsl(var(--caramel));
    border-radius: 50%;
    color: hsl(var(--cream));
    transition: all 0.3s ease;
}

.products-carousel .swiper-button-prev::after,
.products-carousel .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

.products-carousel .swiper-button-prev:hover,
.products-carousel .swiper-button-next:hover {
    background-color: hsl(var(--honey));
    transform: scale(1.1);
    box-shadow: 0 4px 20px hsl(var(--caramel) / 0.4);
}

.products-carousel .swiper-button-prev.swiper-button-disabled,
.products-carousel .swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.products-carousel .swiper-pagination {
    bottom: 0 !important;
}

.products-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: hsl(var(--muted-foreground) / 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.products-carousel .swiper-pagination-bullet-active {
    background-color: hsl(var(--caramel));
    width: 32px;
    border-radius: 6px;
}

.products-carousel .swiper-pagination-bullet:hover {
    background-color: hsl(var(--honey));
    transform: scale(1.2);
}

/* Mobile responsiveness for navigation buttons */
@media (max-width: 640px) {
    .products-carousel .swiper-button-prev,
    .products-carousel .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .products-carousel .swiper-button-prev::after,
    .products-carousel .swiper-button-next::after {
        font-size: 16px;
    }
}

/* Reviews Carousel Customization */
.reviews-carousel {
    padding-bottom: 60px !important;
}

.reviews-carousel .swiper-button-prev,
.reviews-carousel .swiper-button-next {
    width: 48px;
    height: 48px;
    background-color: hsl(var(--caramel));
    border-radius: 50%;
    color: hsl(var(--cream));
    transition: all 0.3s ease;
}

.reviews-carousel .swiper-button-prev::after,
.reviews-carousel .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

.reviews-carousel .swiper-button-prev:hover,
.reviews-carousel .swiper-button-next:hover {
    background-color: hsl(var(--honey));
    transform: scale(1.1);
    box-shadow: 0 4px 20px hsl(var(--caramel) / 0.4);
}

.reviews-carousel .swiper-button-prev.swiper-button-disabled,
.reviews-carousel .swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.reviews-carousel .swiper-pagination {
    bottom: 0 !important;
}

.reviews-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: hsl(var(--muted-foreground) / 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.reviews-carousel .swiper-pagination-bullet-active {
    background-color: hsl(var(--caramel));
    width: 32px;
    border-radius: 6px;
}

.reviews-carousel .swiper-pagination-bullet:hover {
    background-color: hsl(var(--honey));
    transform: scale(1.2);
}

/* Mobile responsiveness for reviews navigation buttons */
@media (max-width: 640px) {
    .reviews-carousel .swiper-button-prev,
    .reviews-carousel .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .reviews-carousel .swiper-button-prev::after,
    .reviews-carousel .swiper-button-next::after {
        font-size: 16px;
    }
}