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

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slightly cooler gray */
    color: #334155; /* slate-700 */
}

/* Timeline vertical line */
.journey-line {
    position: absolute;
    left: 48px; /* Centered with w-24 container */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
    z-index: 0;
}

/* Active State for Sidebar */
.sidebar-item.active {
    background-color: #f1f5f9; /* slate-100 */
    color: #4f46e5; /* indigo-600 */
    font-weight: 600;
}

.sidebar-item.active .sidebar-icon {
    color: #4f46e5;
}

/* Branching logic markers in overview */
.flow-branch {
    position: relative;
    padding-left: 24px;
    border-left: 2px solid #e2e8f0;
    margin-left: 8px;
    margin-top: 12px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Content Entrance Animation */
.animate-content {
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Glassmorphism utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}