Now let me check the available Card component and look at the lucide-react icons:

Now I have all the context. Let me build the Slate/Blue themed stepper. I'll update the globals.css for the theme, the layout metadata, create the stepper components, and the page.

Now update the font declarations in globals.css:

Now let me create the stepper components and page:

Here's what I built:

Vertical Stepper for Psychological Reflection — a clean, mobile-first layout with a Slate/Blue professional theme applied via custom design tokens in globals.css. Each step is rendered as a Shadcn Card alongside a vertical timeline connector, with three distinct icon states: a check for completed steps, a filled circle for the active step, and a lock for future locked steps. The stepper uses Inter for body text and Source Serif 4 for the heading to give it a calm, clinical, editorial quality.

The progress bar at the top summarizes completion at a glance. Locked cards are visually subdued with reduced opacity, while the active card gets a primary-colored border highlight. The entire layout is accessible with keyboard navigation, ARIA roles, and screen-reader-friendly status badges — no gamification, no bright colors, just a serious and composed UI.