:root {
    --forest-green: #1B4332;
    --forest-green-light: #2D6A4F;
    --off-white: #FAFAF5;
    --lime-accent: #84CC16;
    --yellow-accent: #FACC15;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--off-white);
    color: #1E293B;
}

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

::-webkit-scrollbar-track {
    background: var(--off-white);
}

::-webkit-scrollbar-thumb {
    background: var(--forest-green);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--forest-green-light);
}

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

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

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

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

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

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

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
}

.animate-slide-up-delay {
    animation: slide-up 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-slide-up-delay-2 {
    animation: slide-up 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.animate-slide-up-delay-3 {
    animation: slide-up 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

/* Tailwind Config */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .bg-forest-green {
        background-color: var(--forest-green);
    }
    
    .bg-off-white {
        background-color: var(--off-white);
    }
    
    .text-forest-green {
        color: var(--forest-green);
    }
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.3s ease;
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 3px solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile menu transitions */
#mobile-menu {
    transform-origin: top;
}

#mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

#mobile-menu.closed {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
}

/* Navbar scroll effect */
.nav-scrolled #nav-bg {
    opacity: 1;
}