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

:root {
    --pure-emerald: #10b981;
    --pure-emerald-dark: #059669;
    --pure-slate: #0f172a;
    --pure-slate-light: #1e293b;
    --pure-amber: #f59e0b;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

/* Custom Components */
.btn-primary {
    @apply inline-flex justify-center items-center gap-2 bg-emerald-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-emerald-700 active:scale-95 transition-all shadow-md;
}

.btn-secondary {
    @apply inline-flex justify-center items-center gap-2 border-2 border-slate-200 text-slate-600 px-6 py-3 rounded-xl font-bold hover:border-emerald-500 hover:text-emerald-700 active:bg-slate-50 transition-all;
}

.nav-link {
    position: relative;
    @apply font-bold text-slate-500 hover:text-slate-900 transition-colors;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    @apply bg-emerald-500 transition-all duration-300;
}

.nav-active {
    @apply text-emerald-600 !important;
}

.nav-active::after {
    width: 100%;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes toastSlide {
    0% { transform: translateX(100%); opacity: 0; }
    10% { transform: translateX(0); opacity: 1; }
    90% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.toast-animate {
    animation: toastSlide 3s forwards;
}

/* Glassmorphism */
.glass {
    @apply bg-white/80 backdrop-blur-md border border-white/20;
}

/* Custom Utilities */
.text-xxs {
    font-size: 0.65rem;
}