improvements

frontend/src/components/viewer/CustomSearchLayer.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSearch } from '@embedpdf/plugin-search/react';
 import { useViewer } from '../../contexts/ViewerContext';
+import { SEARCH_CONSTANTS } from './constants/search';
 
 interface SearchLayerProps {
   pageIndex: number;
@@ -26,10 +27,10 @@ interface SearchResultState {
 export function CustomSearchLayer({ 
   pageIndex, 
   scale, 
-  highlightColor = 'var(--search-highlight-bg)',
-  activeHighlightColor = 'var(--search-highlight-active-bg)',
-  opacity = 0.6,
-  padding = 2,
+  highlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.BACKGROUND,
+  activeHighlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND,
+  opacity = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.OPACITY,
+  padding = SEARCH_CONSTANTS.UI.HIGHLIGHT_PADDING,
   borderRadius = 4
 }: SearchLayerProps) {
   const { provides: searchProvides } = useSearch();
@@ -104,10 +105,10 @@ export function CustomSearchLayer({
                 borderRadius: `${borderRadius}px`,
                 transform: 'scale(1.02)',
                 transformOrigin: 'center',
-                transition: 'opacity 0.3s ease-in-out, background-color 0.2s ease-in-out',
+                transition: 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out',
                 pointerEvents: 'none',
                 boxShadow: originalIndex === searchResultState?.activeResultIndex
-                  ? '0 0 0 1px var(--search-highlight-active-border)'
+                  ? `0 0 0 1px ${SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND}80`
                   : 'none'
               }}
             />

frontend/src/components/viewer/constants/search.ts

@@ -0,0 +1,15 @@
+export const SEARCH_CONSTANTS = {
+  HIGHLIGHT_COLORS: {
+    BACKGROUND: '#ffff00',
+    ACTIVE_BACKGROUND: '#ff6b35',
+    OPACITY: 0.4,
+  },
+  TIMING: {
+    DEBOUNCE_DELAY: 300,
+  },
+  UI: {
+    HIGHLIGHT_PADDING: 2,
+    MIN_SEARCH_LENGTH: 1,
+    MAX_RESULTS_DISPLAY: 100,
+  }
+} as const;

frontend/src/styles/theme.css

@@ -152,10 +152,6 @@
   --text-brand: var(--color-gray-700);
   --text-brand-accent: #DC2626;
 
-  /* Search highlight colors */
-  --search-highlight-bg: #FFFF00;
-  --search-highlight-active-bg: #FFBF00;
-  --search-highlight-active-border: rgba(255, 191, 0, 0.8);
 
   /* Placeholder text colors */
   --search-text-and-icon-color: #6B7382;
@@ -342,10 +338,6 @@
   --tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */
   --tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */
 
-  /* Search highlight colors (dark mode) */
-  --search-highlight-bg: #FFF700;
-  --search-highlight-active-bg: #FFD700;
-  --search-highlight-active-border: rgba(255, 215, 0, 0.8);
 
   /* Placeholder text colors (dark mode) */
   --search-text-and-icon-color: #FFFFFF !important;