style: update hover background colors across various components for improved UI consistency and accessibility

app/[locale]/layout.tsx

@@ -154,7 +154,7 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
             <NextTopLoader color="#FF5722" delay={100} showSpinner={false} />
 
             {/* Main Card Container */}
-            <div className="card bg-base-100 dark:bg-[#232324] shadow-xl w-full max-w-3xl max-sm:rounded-none max-sm:h-full border border-base-200 dark:border-gray-800">
+            <div className="card bg-white dark:bg-[#232324] shadow-xl w-full max-w-3xl max-sm:rounded-none max-sm:h-full border border-base-200 dark:border-gray-800">
               <div className="card-body p-0">
                 <Header />
                 <div className="px-2 sm:px-6 pb-6">{children}</div>

src/features/layout/Footer.tsx

@@ -39,7 +39,7 @@ export const Footer = async () => {
           {SOCIAL_LINKS.map(({ href, icon: Icon, label }) => (
             <a
               aria-label={label}
-              className="btn btn-ghost btn-sm btn-circle text-gray-700 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-gray-800"
+              className="btn btn-ghost btn-sm btn-circle text-gray-700 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-800"
               href={href}
               key={label}
               rel="noopener noreferrer"

src/features/layout/Header.tsx

@@ -52,7 +52,7 @@ export const Header = () => {
       <div className="navbar-end">
         <Link
           aria-label={t("commons.home")}
-          className="hover:bg-slate-100 dark:hover:bg-gray-800 rounded-full p-2 transition flex"
+          className="hover:bg-slate-200 dark:hover:bg-gray-800 rounded-full p-2 transition flex"
           href="/"
         >
           <div className="tooltip" data-tip={t("commons.home")}>
@@ -73,7 +73,7 @@ export const Header = () => {
           </div>
 
           <ul
-            className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box w-52 border border-slate-100 dark:border-gray-800"
+            className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box w-52 border border-slate-200 dark:border-gray-800"
             tabIndex={0}
           >
             <li>
@@ -82,7 +82,7 @@ export const Header = () => {
               </Link>
             </li>
 
-            <hr className="my-1 border-slate-100 dark:border-gray-800" />
+            <hr className="my-1 border-slate-200 dark:border-gray-800" />
 
             {!session.data ? (
               <>
@@ -102,7 +102,7 @@ export const Header = () => {
             ) : (
               <li>
                 <button
-                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
+                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
                   onClick={handleSignOut}
                 >
                   <LogOut className="w-4 h-4" />

src/features/release-notes/ui/release-notes-dialog.tsx

@@ -17,7 +17,7 @@ export function ReleaseNotesDialog() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-100" size="small" variant="ghost">
+        <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-200" size="small" variant="ghost">
           <div className="tooltip" data-tip={t("commons.changelog")}>
             <Bell className="text-blue-500 dark:text-blue-400 h-6 w-6" />
           </div>

src/features/theme/ThemeToggle.tsx

@@ -15,7 +15,7 @@ export function ThemeToggle() {
 
   return (
     <Button
-      className="hover:bg-slate-100 rounded-full p-2 pr-2"
+      className="hover:bg-slate-200 rounded-full p-2 pr-2"
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
       variant="ghost"
     >

src/features/workout-builder/ui/equipment-selection.tsx

@@ -51,7 +51,7 @@ function EquipmentCard({ equipment, isSelected, onToggle }: EquipmentCardProps)
       className={cn(
         // Base styles - Chess.com inspiration
         "group relative overflow-hidden cursor-pointer",
-        "bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900",
+        "bg-gradient-to-br from-slate-50 to-slate-200 dark:from-slate-800 dark:to-slate-900",
         "border-2 border-slate-200 dark:border-slate-700",
         "rounded-xl shadow-sm hover:shadow-xl",
         // Transitions smooth
@@ -112,7 +112,7 @@ function EquipmentCard({ equipment, isSelected, onToggle }: EquipmentCardProps)
               "tracking-wide leading-tight",
               isSelected
                 ? "text-emerald-700 dark:text-emerald-300"
-                : "text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-slate-100",
+                : "text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-slate-200",
             )}
           >
             {translation.label}

src/features/workout-builder/ui/exercise-card.tsx

@@ -44,7 +44,7 @@ export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }:
       <Card className="group relative overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all duration-200 hover:border-blue-200 dark:hover:border-blue-800">
         <CardHeader className="relative p-0">
           {/* Image/Vidéo thumbnail */}
-          <div className="relative h-48 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800">
+          <div className="relative h-48 bg-gradient-to-br from-slate-200 to-slate-200 dark:from-slate-700 dark:to-slate-800">
             {exercise.fullVideoImageUrl && !imageError ? (
               <>
                 <Image
@@ -103,7 +103,7 @@ export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }:
         <CardContent className="p-4">
           {/* Titre de l'exercice */}
           <div className="flex items-start justify-between mb-3">
-            <h4 className="font-semibold text-slate-900 dark:text-slate-100 text-sm leading-tight line-clamp-2">{exercise.name}</h4>
+            <h4 className="font-semibold text-slate-900 dark:text-slate-200 text-sm leading-tight line-clamp-2">{exercise.name}</h4>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button className="h-8 w-8 ml-2 flex-shrink-0" size="small" variant="ghost">

src/features/workout-builder/ui/exercise-list-item.tsx

@@ -80,7 +80,7 @@ export function ExerciseListItem({ exercise, muscle, onShuffle, onPick, onDelete
 
           {/* Image de l'exercice */}
           {exercise.fullVideoImageUrl && (
-            <div className="relative w-10 h-10 rounded-lg overflow-hidden shrink-0 bg-slate-100 dark:bg-slate-800 cursor-pointer border border-slate-200 dark:border-slate-700/50">
+            <div className="relative w-10 h-10 rounded-lg overflow-hidden shrink-0 bg-slate-200 dark:bg-slate-800 cursor-pointer border border-slate-200 dark:border-slate-700/50">
               <Image
                 alt={exerciseName ?? ""}
                 className="w-full h-full object-cover scale-[1.5]"
@@ -116,7 +116,7 @@ export function ExerciseListItem({ exercise, muscle, onShuffle, onPick, onDelete
           {/* Nom de l'exercice avec indicateurs */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-3 mb-1">
-              <h3 className="font-semibold text-slate-900 dark:text-slate-100 truncate text-sm">{exerciseName}</h3>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-200 truncate text-sm">{exerciseName}</h3>
             </div>
           </div>
         </div>

src/features/workout-builder/ui/exercise-video-modal.tsx

@@ -90,7 +90,7 @@ export function ExerciseVideoModal({ open, onOpenChange, exercise }: ExerciseVid
         {/* Instructions (description) */}
         {description && (
           <div
-            className="px-6 pt-4 pb-6 text-slate-700 dark:text-slate-200 text-sm md:text-base prose dark:prose-invert max-w-none border-t border-slate-100 dark:border-slate-800 mt-2"
+            className="px-6 pt-4 pb-6 text-slate-700 dark:text-slate-200 text-sm md:text-base prose dark:prose-invert max-w-none border-t border-slate-200 dark:border-slate-800 mt-2"
             dangerouslySetInnerHTML={{ __html: description }}
           />
         )}

src/features/workout-session/ui/workout-session-header.tsx

@@ -75,7 +75,7 @@ export function WorkoutSessionHeader({
 
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
             {/* Card 1: elapsed time */}
-            <div className="bg-white dark:bg-gradient-to-br dark:from-slate-800/80 dark:to-slate-700/80 rounded-lg p-3 border border-slate-100 dark:border-slate-600/30">
+            <div className="bg-white dark:bg-gradient-to-br dark:from-slate-800/80 dark:to-slate-700/80 rounded-lg p-3 border border-slate-200 dark:border-slate-600/30">
               <div className="flex items-center gap-2 mb-2">
                 <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
                   <Clock className="h-4 w-4 text-blue-400" />
@@ -102,7 +102,7 @@ export function WorkoutSessionHeader({
                   </Button>
 
                   <Button
-                    className="w-8 h-8 rounded-full p-0 border-slate-200 text-slate-400 hover:bg-slate-100 dark:border-slate-600 hover:dark:bg-slate-700"
+                    className="w-8 h-8 rounded-full p-0 border-slate-200 text-slate-400 hover:bg-slate-200 dark:border-slate-600 hover:dark:bg-slate-700"
                     onClick={handleReset}
                     variant="outline"
                   >
@@ -113,7 +113,7 @@ export function WorkoutSessionHeader({
             </div>
 
             {/* Card 2: progress */}
-            <div className="bg-white dark:bg-gradient-to-br dark:from-slate-800/80 dark:to-slate-700/80 rounded-lg p-3 border border-slate-100 dark:border-slate-600/30">
+            <div className="bg-white dark:bg-gradient-to-br dark:from-slate-800/80 dark:to-slate-700/80 rounded-lg p-3 border border-slate-200 dark:border-slate-600/30">
               <div className="flex items-center gap-2 mb-2">
                 <div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center">
                   <Target className="h-4 w-4 text-purple-400" />

src/features/workout-session/ui/workout-session-list.tsx

@@ -78,7 +78,7 @@ export function WorkoutSessionList() {
 
   return (
     <div className="space-y-4">
-      <h2 className="text-xl font-bold mt-5 mb-2 text-slate-900 dark:text-slate-100">
+      <h2 className="text-xl font-bold mt-5 mb-2 text-slate-900 dark:text-slate-200">
         {t("workout_builder.session.history", { count: sessions.length })}
       </h2>
       {sessions.length === 0 && <div className="text-slate-500 dark:text-slate-400">{t("workout_builder.session.no_workout_yet")}</div>}
@@ -90,7 +90,7 @@ export function WorkoutSessionList() {
               key={session.id}
             >
               <div className="flex items-center flex-col">
-                <span className="font-bold text-base tabular-nums text-slate-900 dark:text-slate-100">
+                <span className="font-bold text-base tabular-nums text-slate-900 dark:text-slate-200">
                   {new Date(session.startedAt).toLocaleDateString(locale)}
                 </span>
                 <span className="text-xs text-slate-700 dark:text-slate-300 tabular-nums">

src/features/workout-session/ui/workout-session-sets.tsx

@@ -110,7 +110,7 @@ export function WorkoutSessionSets({
               <div className="flex items-center gap-3 ml-2 hover:opacity-80">
                 {details?.fullVideoImageUrl && (
                   <div
-                    className="relative aspect-video max-w-24 rounded-lg overflow-hidden shrink-0 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700/50 cursor-pointer"
+                    className="relative aspect-video max-w-24 rounded-lg overflow-hidden shrink-0 bg-slate-200 dark:bg-slate-800 border border-slate-200 dark:border-slate-700/50 cursor-pointer"
                     onClick={(e) => {
                       e.stopPropagation();
                       setVideoModal({ open: true, exerciseId: ex.id });

src/widgets/language-selector/language-selector.tsx

@@ -26,7 +26,7 @@ export function LanguageSelector() {
     <div className="dropdown dropdown-end">
       <div className="tooltip" data-tip={t("commons.change_language")}>
         <div
-          className="btn btn-ghost btn-circle h-8 w-8 p-0 text-xl flex items-center justify-center hover:bg-slate-100 border-none dark:hover:bg-gray-800 rounded-full"
+          className="btn btn-ghost btn-circle h-8 w-8 p-0 text-xl flex items-center justify-center hover:bg-slate-200 border-none dark:hover:bg-gray-800 rounded-full"
           role="button"
           tabIndex={0}
         >
@@ -34,13 +34,13 @@ export function LanguageSelector() {
         </div>
       </div>
       <ul
-        className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box  border border-slate-100 dark:border-gray-800"
+        className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box  border border-slate-200 dark:border-gray-800"
         tabIndex={0}
       >
         {languages.map((language) => (
           <li className="" key={language}>
             <button
-              className="flex items-center gap-2 text-base hover:bg-slate-100 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
+              className="flex items-center gap-2 text-base hover:bg-slate-200 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
               onClick={() => handleLanguageChange(language)}
             >
               <span className="text-lg">{languageFlags[language]}</span>