refactor(web): use ABACUS_THEMES instead of manual style definitions

Replace manual theme style definitions with ABACUS_THEMES presets:
- MyAbacus.tsx: Use ABACUS_THEMES.light and ABACUS_THEMES.trophy
- HeroAbacus.tsx: Use ABACUS_THEMES.light
- LevelSliderDisplay.tsx: Use ABACUS_THEMES.dark

Eliminates ~60 lines of duplicate theme style code.

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

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

apps/web/src/components/HeroAbacus.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig, ABACUS_THEMES } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
 import { useHomeHero } from '../contexts/HomeHeroContext'
 
@@ -17,19 +17,8 @@ export function HeroAbacus() {
   const appConfig = useAbacusConfig()
   const heroRef = useRef<HTMLDivElement>(null)
 
-  // Styling for structural elements (solid, no translucency)
-  const structuralStyles = {
-    columnPosts: {
-      fill: 'rgb(255, 255, 255)',
-      stroke: 'rgb(200, 200, 200)',
-      strokeWidth: 2,
-    },
-    reckoningBar: {
-      fill: 'rgb(255, 255, 255)',
-      stroke: 'rgb(200, 200, 200)',
-      strokeWidth: 3,
-    },
-  }
+  // Use theme preset from abacus-react instead of manual definition
+  const structuralStyles = ABACUS_THEMES.light
 
   // Detect when hero scrolls out of view
   useEffect(() => {

apps/web/src/components/LevelSliderDisplay.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import { useSpring, useTransition, animated } from '@react-spring/web'
 import * as Slider from '@radix-ui/react-slider'
-import { AbacusReact, StandaloneBead } from '@soroban/abacus-react'
+import { AbacusReact, StandaloneBead, ABACUS_THEMES } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
 import { stack } from '../../styled-system/patterns'
 import { kyuLevelDetails } from '@/data/kyuLevelDetails'
@@ -260,19 +260,8 @@ function parseKyuDetails(rawText: string) {
   return sections
 }
 
-// Dark theme styles matching the homepage
-const darkStyles = {
-  columnPosts: {
-    fill: 'rgba(255, 255, 255, 0.3)',
-    stroke: 'rgba(255, 255, 255, 0.2)',
-    strokeWidth: 2,
-  },
-  reckoningBar: {
-    fill: 'rgba(255, 255, 255, 0.4)',
-    stroke: 'rgba(255, 255, 255, 0.25)',
-    strokeWidth: 3,
-  },
-}
+// Use dark theme preset from abacus-react instead of manual definition
+const darkStyles = ABACUS_THEMES.dark
 
 interface LevelSliderDisplayProps {
   initialIndex?: number

apps/web/src/components/MyAbacus.tsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig, ABACUS_THEMES } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
 import { useMyAbacus } from '@/contexts/MyAbacusContext'
 import { HomeHeroContext } from '@/contexts/HomeHeroContext'
@@ -56,33 +56,9 @@ export function MyAbacus() {
     }
   }, [isOpen])
 
-  // Hero mode styles - white structural (from original HeroAbacus)
-  const structuralStyles = {
-    columnPosts: {
-      fill: 'rgb(255, 255, 255)',
-      stroke: 'rgb(200, 200, 200)',
-      strokeWidth: 2,
-    },
-    reckoningBar: {
-      fill: 'rgb(255, 255, 255)',
-      stroke: 'rgb(200, 200, 200)',
-      strokeWidth: 3,
-    },
-  }
-
-  // Trophy abacus styles - golden/premium look
-  const trophyStyles = {
-    columnPosts: {
-      fill: '#fbbf24',
-      stroke: '#f59e0b',
-      strokeWidth: 3,
-    },
-    reckoningBar: {
-      fill: '#fbbf24',
-      stroke: '#f59e0b',
-      strokeWidth: 4,
-    },
-  }
+  // Use theme presets from abacus-react instead of manual definitions
+  const structuralStyles = ABACUS_THEMES.light
+  const trophyStyles = ABACUS_THEMES.trophy
 
   return (
     <>