:root {
    color-scheme: light;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    padding-bottom: 4rem;
}

/*
 * Compact type scale for phones.
 * Tailwind's responsive variants take over from 768px, so tablet and desktop
 * typography keep their existing sizes.
 */
@media (max-width: 767px) {
    body {
        font-size: 0.875rem;
    }

    input,
    select,
    textarea,
    button {
        font-size: inherit;
    }

    .text-xs {
        font-size: 0.6875rem !important;
        line-height: 0.9375rem !important;
    }

    .text-sm {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }

    .text-base {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
        line-height: 1.375rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .text-4xl {
        font-size: 1.75rem !important;
        line-height: 2.125rem !important;
    }

    .prose {
        font-size: 0.875rem;
        line-height: 1.625;
    }

    .prose h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .prose h2 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .prose h3 {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .prose h4 {
        font-size: 1rem;
        line-height: 1.375rem;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 0.9375rem;
        padding-bottom: 0;
    }

    .prose {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .prose h2 {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .prose h3 {
        font-size: 1rem;
        line-height: 1.375rem;
    }
}

.container-page {
    max-width: 1140px;
}

/* Hide scrollbars for carousel containers */
[id$="-carousel"]::-webkit-scrollbar,
[id$="-carousel-mobile"]::-webkit-scrollbar,
[id$="-carousel-desktop"]::-webkit-scrollbar {
    display: none;
}

[id$="-carousel"],
[id$="-carousel-mobile"],
[id$="-carousel-desktop"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Success modal animations */
@keyframes scale-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes check-draw {
    0% { stroke-dashoffset: 100; stroke-dasharray: 100; }
    100% { stroke-dashoffset: 0; stroke-dasharray: 100; }
}

@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(-10px, -20px) scale(1.5); opacity: 0; }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(10px, -15px) scale(1.5); opacity: 0; }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(-15px, 10px) scale(1.5); opacity: 0; }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-scale-in { animation: scale-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-check-draw { animation: check-draw 0.5s ease-out 0.3s forwards; stroke-dashoffset: 100; stroke-dasharray: 100; }
.animate-float-1 { animation: float-1 2s ease-in-out infinite; }
.animate-float-2 { animation: float-2 2.5s ease-in-out infinite 0.3s; }
.animate-float-3 { animation: float-3 2.2s ease-in-out infinite 0.6s; }
.animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }

#successModal.show {
    display: flex !important;
}

#successModal.show #successModalContent {
    animation: scale-in 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    opacity: 1;
    transform: scale(1);
}

/* Avatar lightbox */
#avatarLightbox.show {
    display: flex !important;
}