@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-color: #F8FAF9;
    --primary-green: #84B783;
    --primary-green-hover: #73A672;
    --badge-yellow: #F4C744;
    --dark-green: #325E35;
    --light-green-bg: #EAF1EA;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: #1F2937;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
}

.btn-primary {
    background-color: var(--primary-green);
    color: white;
}
.btn-primary:hover {
    background-color: var(--primary-green-hover);
}