use new accent colors

src/app/components/GuessForm.tsx

@@ -18,8 +18,8 @@ const GuessForm: React.FC<GuessFormProps> = ({ input, onInputChange, onSubmit, d
         type="text"
         value={input}
         onChange={onInputChange}
-        className={`focus:border-accent h-12 w-60 rounded border px-2 py-1 focus:outline-none md:w-75 ${
+        className={`focus:border-accent-primary h-12 w-60 rounded border px-2 py-1 focus:outline-none md:w-75 ${
-          disabled ? "cursor-not-allowed border-gray-500 bg-gray-400 opacity-50" : "bg-background2 duration-300"
+          disabled ? "cursor-not-allowed border-gray-500 bg-gray-400 opacity-50" : "bg-background-secondary duration-300"
         }`}
         placeholder={t.placeholder}
         disabled={disabled}
@@ -27,7 +27,7 @@ const GuessForm: React.FC<GuessFormProps> = ({ input, onInputChange, onSubmit, d
       <button
         type="submit"
         className={`rounded px-4 py-1 ${
-          !input || disabled ? "cursor-not-allowed bg-gray-400 opacity-50" : "bg-accent cursor-pointer"
+          !input || disabled ? "cursor-not-allowed bg-gray-400 opacity-50" : "bg-accent-primary cursor-pointer"
         }`}
         disabled={disabled || !input}
       >

src/app/components/HowToPlayButton.tsx

@@ -8,7 +8,7 @@ interface HowToPlayButtonProps {
 
 const HowToPlayButton: React.FC<HowToPlayButtonProps> = ({ onClick, ariaLabel }) => (
   <button
-    className="text-accent border-accent hover:bg-accent cursor-pointer rounded-full border bg-white p-2 text-2xl duration-300 hover:text-white"
+    className="text-accent-primary border-accent-primary hover:bg-accent-primary cursor-pointer rounded-full border bg-white p-2 text-2xl duration-300 hover:text-white"
     onClick={onClick}
     aria-label={ariaLabel}
   >

src/app/components/LanguageMenu.tsx

@@ -18,9 +18,8 @@ const LanguageMenu = () => {
 
   return (
     <Menu as="div" className="relative">
-      {/* Menu Button */}
       <div>
-        <MenuButton className="border-accent bg-accent hover:text-accent aria-expanded:text-accent w-full cursor-pointer rounded-full border px-4 py-2 text-2xl text-white duration-300 hover:bg-white focus:outline-none aria-expanded:bg-white">
+        <MenuButton className="border-accent-primary bg-accent-primary hover:text-accent-primary aria-expanded:text-accent-primary w-full cursor-pointer rounded-full border px-4 py-2 text-2xl text-white duration-300 hover:bg-white focus:outline-none aria-expanded:bg-white">
           <IoLanguage />
         </MenuButton>
       </div>

src/app/components/RestartButton.tsx

@@ -7,7 +7,7 @@ interface RestartButtonProps {
 
 const RestartButton: React.FC<RestartButtonProps> = ({ onClick }) => (
   <button
-    className="border-accent2 text-accent2 bg-accent2light hover:bg-accent2 hover:border-accent2light hover:text-accent2light cursor-pointer rounded-full border-2 p-2 text-xl"
+    className="border-accent-secondary text-accent-secondary bg-accent-secondary-light hover:bg-accent-secondary hover:border-accent-secondary-light hover:text-accent-secondary-light cursor-pointer rounded-full border-2 p-2 text-xl"
     onClick={onClick}
   >
     <VscDebugRestart />

src/app/components/Timer.tsx

@@ -21,7 +21,7 @@ const Timer: React.FC<TimerProps> = ({ timer }) => {
   };
 
   return (
-    <span className="text-accent2 bg-accent2light border-accent2 flex items-center gap-1 rounded-2xl border-2 p-2 font-bold">
+    <span className="text-accent-secondary bg-accent-secondary-light border-accent-secondary flex items-center gap-1 rounded-2xl border-2 p-2 font-bold">
       <MdOutlineTimer className="text-xl" />
       {formatTime(timer)}
     </span>