Fix StepIndicator, dropdown padding, and missing theme tokens

- StepIndicator now honors totalSteps prop (fixes 2-step forms)
- FormPageLayout accepts hasDropdownOpen to prevent dropdown clipping
- Added missing brand.primaryAlpha and brand.primaryLight tokens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

Author: YashK2005

frontend/src/components/layout/FormPageLayout.tsx

@@ -13,6 +13,11 @@ interface FormPageLayoutProps {
    * @default "gray.50"
    */
   bg?: string;
+  /**
+   * Whether a dropdown is currently open (adds extra bottom padding to prevent clipping)
+   * @default false
+   */
+  hasDropdownOpen?: boolean;
 }
 
 /**
@@ -26,9 +31,21 @@ interface FormPageLayoutProps {
  * </FormPageLayout>
  * ```
  */
-export function FormPageLayout({ children, maxW = '1200px', bg = 'gray.50' }: FormPageLayoutProps) {
+export function FormPageLayout({
+  children,
+  maxW = '1200px',
+  bg = 'gray.50',
+  hasDropdownOpen = false,
+}: FormPageLayoutProps) {
   return (
-    <Flex minH="100vh" bg={bg} justify="center" py={12} overflow="visible">
+    <Flex
+      minH="100vh"
+      bg={bg}
+      justify="center"
+      pt={12}
+      pb={hasDropdownOpen ? '50vh' : 12}
+      overflow="visible"
+    >
       <Box
         w="full"
         maxW={maxW}

frontend/src/components/ui/StepIndicator.tsx

@@ -14,16 +14,15 @@ interface StepIndicatorProps {
 
 /**
  * Visual progress indicator for multi-step forms.
- * Always renders 3 segments, highlighting the current step.
+ * Renders the specified number of segments, highlighting the current step.
  *
  * @example
  * ```tsx
- * <StepIndicator currentStep={2} />
+ * <StepIndicator currentStep={2} totalSteps={3} />
  * ```
  */
-export function StepIndicator({ currentStep }: StepIndicatorProps) {
-  // Always render 3 segments as per current implementation
-  const segments = 3;
+export function StepIndicator({ currentStep, totalSteps }: StepIndicatorProps) {
+  const segments = totalSteps ?? 3;
 
   return (
     <Box mb={10}>

frontend/src/pages/participant/intake/index.tsx

@@ -230,7 +230,7 @@ export default function ParticipantIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.PARTICIPANT, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <FormPageLayout>
+        <FormPageLayout hasDropdownOpen={hasDropdownOpen}>
           {currentStepType === 'experience-personal' && (
             <PersonalInfoForm
               formType="participant"

frontend/src/pages/volunteer/intake/index.tsx

@@ -239,7 +239,7 @@ export default function VolunteerIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.VOLUNTEER, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <FormPageLayout>
+        <FormPageLayout hasDropdownOpen={hasDropdownOpen}>
           {currentStepType === 'experience-personal' && (
             <PersonalInfoForm
               formType="volunteer"

frontend/src/styles/theme.ts

@@ -6,6 +6,8 @@ const brandTokens = defineTokens({
       primary: { value: '#056067' },
       primaryEmphasis: { value: '#044953' },
       primaryMuted: { value: '#B3CED1' },
+      primaryAlpha: { value: 'rgba(5, 96, 103, 0.08)' }, // 8% opacity for subtle hover states
+      primaryLight: { value: '#E6F4F5' }, // Very light teal for hover backgrounds
       navy: { value: '#1D3448' },
       navyMuted: { value: '#41576B' },
       fieldText: { value: '#414651' },