## Purpose Define the requirements for a floating, accessible theme switcher notch anchored to the right side of the viewport. ## Requirements ### Requirement: Floating theme switcher notch The site MUST provide a floating theme switcher control anchored to the right side of the viewport. The control MUST be positioned below the primary navigation bar and MUST leave sufficient vertical space for secondary navigation. #### Scenario: Notch positioned below header - **WHEN** the page loads - **THEN** the theme switcher notch is visible on the right side and does not overlap the sticky header or sub-navigation ### Requirement: Notch interaction and animation The notch MUST provide a hover affordance (a small, tasteful animation) that indicates it is interactive. The hover animation MUST be disabled or substantially reduced under `prefers-reduced-motion: reduce`. #### Scenario: Hover animation present - **WHEN** a pointer user hovers the notch - **THEN** the notch animates in a way that suggests it can be expanded or interacted with #### Scenario: Reduced motion disables hover animation - **WHEN** `prefers-reduced-motion: reduce` is set - **THEN** hovering the notch does not trigger a noticeable animation ### Requirement: Theme selection UI The notch MUST expose the three theme options (`dark`, `light`, `high-contrast`) and allow the user to select one. The control MUST be keyboard accessible: - it MUST be reachable via `Tab` - it MUST have a visible focus indicator - selection MUST be possible using keyboard input #### Scenario: Keyboard selects theme - **WHEN** a keyboard user focuses the notch and selects `high-contrast` - **THEN** the site updates to the `high-contrast` theme and the selection is persisted ### Requirement: Accessibility labels The notch and theme options MUST have accessible labels. #### Scenario: Screen reader announces theme switcher - **WHEN** a screen reader user focuses the theme switcher control - **THEN** it announces an appropriate label (e.g., "Theme" or "Theme switcher") and the currently selected theme