fix: add accessibility attributes, fix CSS margins, complete textAlign support, remove unused variable

- Added role="button", tabIndex, aria-label, and onKeyDown handler to verse spans for keyboard accessibility
- Fixed CSS margin/padding conflict by using py/px instead of p/margin for proper variable margin width
- Added --text-align CSS variable to getCSSVariables() and applied it in reading view
- Removed unused isTablet variable

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

Co-Authored-By: Claude <noreply@anthropic.com>

components/bible/reading-view.tsx

@@ -28,7 +28,6 @@ export function ReadingView({
 }: ReadingViewProps) {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const [preferences, setPreferences] = useState(loadPreferences())
   const [showControls, setShowControls] = useState(!isMobile)
 
@@ -93,23 +92,33 @@ export function ReadingView({
       <Box
         sx={{
           flex: 1,
-          p: 3,
+          py: 3,
           maxWidth: 700,
           mx: 'auto',
           width: '100%',
-          margin: 'var(--margin-width)',
+          px: 'var(--margin-width)',
           lineHeight: 'var(--line-height)',
           fontSize: 'var(--font-size)',
           fontFamily: 'var(--font-family)',
+          textAlign: 'var(--text-align)' as any,
         } as CSSProperties}
       >
         {chapter.verses.map((verse) => (
           <span
             key={verse.id}
+            role="button"
+            tabIndex={0}
+            aria-label={`Verse ${verse.verseNum}: ${verse.text}`}
             onClick={(e) => {
               e.stopPropagation()
               onVerseClick(verse.id)
             }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onVerseClick(verse.id)
+              }
+            }}
             style={{
               cursor: 'pointer',
               transition: 'background-color 0.15s',

lib/reading-preferences.ts

@@ -82,6 +82,7 @@ export function getCSSVariables(prefs: ReadingPreference): Record<string, string
     '--font-size': `${prefs.fontSize}px`,
     '--line-height': `${prefs.lineHeight}`,
     '--letter-spacing': `${prefs.letterSpacing}em`,
+    '--text-align': prefs.textAlign,
     '--bg-color': prefs.backgroundColor,
     '--text-color': prefs.textColor,
     '--margin-width': getMarginWidth(prefs.margin),