centralize the theming

frontend/src/App.css

@@ -7,5 +7,5 @@
 }
 
 .page-outer {
-  @apply bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
+  @apply bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
 }

frontend/src/components/AddBulkIngredients.tsx

@@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <h3 className="text-xl font-bold">Ingredients:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Ingredients:</h3>
       <textarea
         rows={8}
         value={textValue}
@@ -43,7 +43,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter ingredients separated by new line"
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
+        className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />
     </div>
   );

frontend/src/components/AddBulkSteps.tsx

@@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   return (
     <div>
-      <h3 className="text-xl font-bold">Steps:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
       <textarea
         rows={8}
         value={textValue}
@@ -55,7 +55,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter steps separated by new line"
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
+        className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />
     </div>
   );

frontend/src/components/CookbookRecipeTile.tsx

@@ -6,14 +6,14 @@ import TimeDisplay from "../components/TimeDisplay.tsx"
 function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
 
   return (
-    <div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
+    <div className="recipe-card m-2 bg-[var(--color-secondaryBg)] p-4 rounded shadow">
       <div className="flex justify-between items-center recipe-name">
-        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
-        <div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
+        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-[var(--color-textLink)]">{recipe.name}</Link></h3>
+        <div className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-0 px-2 rounded m-2">
           {recipe.cuisine}
         </div>
       </div>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center text-[var(--color-textDark)]">
         ⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
         <StarRating rating={recipe.stars} onRatingChange={() => { }} />
       </div>

frontend/src/components/DemoModal.tsx

@@ -11,14 +11,14 @@ const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
 
   return (
     <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+      <div className="modal-content bg-[var(--color-primaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
-          <p><a className="text-blue-600" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
+          <p><a className="text-[var(--color-textLink)]" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
           <p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
         </div>
         <div className="modal-buttons">
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
         </div>
       </div>
     </div>

frontend/src/components/Modal.tsx

@@ -11,13 +11,13 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
 
   return (
     <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+      <div className="modal-content bg-[var(--color-secondaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <span aria-labelledby="message">{message}</span>
         </div>
         <div className="modal-buttons">
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
         </div>
       </div>
     </div>

frontend/src/components/RecipeBookTabs.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
 import { getRecipes } from "../services/frontendApi.js";
 
 const RecipeBookTabs = () => {
   const location = useLocation();
-  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
+  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(
+    null,
+  );
 
   const loadRandomRecipeId = async () => {
     try {
@@ -14,7 +16,7 @@ const RecipeBookTabs = () => {
         setLastViewedRecipeId(recipes[randomIndex].id);
       }
     } catch (error) {
-      console.error('Error loading recipes:', error);
+      console.error("Error loading recipes:", error);
     }
   };
 
@@ -33,54 +35,61 @@ const RecipeBookTabs = () => {
     }
   }, []);
 
-
   const tabs = [
-    { id: '/', label: 'Cookbook', icon: '📚' },
-    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
-    { id: '/add-recipe', label: 'Add', icon: '➕' },
-    { id: '/about', label: 'About', icon: '🍽️' },
+    { id: "/", label: "Cookbook", icon: "📚" },
+    { id: `/recipe/${lastViewedRecipeId}`, label: "Recipe", icon: "🥗" },
+    { id: "/add-recipe", label: "Add", icon: "➕" },
+    { id: "/about", label: "About", icon: "🍽️" },
   ];
 
   return (
-    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
+    <div className="bg-[var(--color-backdrop)] h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
       <div className="relative h-full">
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primaryBg)]"></div>
 
         <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
           {tabs.map((tab) => {
-            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
+            const isActive =
+              location.pathname === tab.id ||
+              (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
 
             return (
               <Link
                 key={tab.id}
                 to={tab.id}
                 className={`
-                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
+                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform
                   ${isActive
-                    ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
-                    : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
+                    ? "bg-[var(--color-primaryBg)] scale-105 z-10 border-t-2 border-[var(--color-primaryBorder)] text-[var(--color-textDark)]"
+                    : "bg-[var(--color-secondaryBg)] hover:bg-[var(--color-secondaryBgHover)] text-[var(--color-textDark)] hover:scale-102 shadow-sm"
                   }
-                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
-                  ${isActive ? '' : ''}
+                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
+                  ${isActive ? "" : ""}
                 `}
               >
                 <div className="flex items-center">
-                  <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
+                  <span
+                    className={`text-lg pr-2 ${window.innerWidth <= 640 ? "hidden" : ""}`}
+                  >
+                    {tab.icon}
+                  </span>
                   <span>{tab.label}</span>
                 </div>
 
-                {
-                  isActive && (
-                    <>
-                      <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
-                        <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
-                      </div>
-                      <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
-                        <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
-                      </div>
-                    </>
-                  )
-                }
+                {isActive && (
+                  <>
+                    <div
+                      className={`absolute -left-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/" ? "hidden" : ""}`}
+                    >
+                      <div className="absolute top-0 left-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-br-lg"></div>
+                    </div>
+                    <div
+                      className={`absolute -right-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/about" ? "hidden" : ""}`}
+                    >
+                      <div className="absolute top-0 right-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-bl-lg"></div>
+                    </div>
+                  </>
+                )}
               </Link>
             );
           })}

frontend/src/css/colorTheme.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --color-backdrop: #ffffff;
+    --color-primaryBg: #fef3c7;
+    --color-primaryBgHover: #fde68a;
+    --color-primaryBorder: #fde68a;
+    --color-secondaryBg: #fde68a;
+    --color-secondaryBgHover: #fef3c7;
+    --color-secondaryBorder: #0f087c;
+    --color-buttonBg: #d97706;
+    --color-buttonBgHover: #b45309;
+    --color-textDark: #78350f;
+    --color-secondaryTextDark: #2f2f2f;
+    --color-textLight: #ffffff;
+    --color-textLink: #3b82f6;
+  }
+}

frontend/src/pages/About.tsx

@@ -3,17 +3,17 @@ function About() {
   return (
     <div className="about page-outer">
       <div>
-        <h2 className="text-xl">This app uses the following components:</h2>
-        <h2 className="mt-4 font-bold text-xl">Frontend:</h2>
+        <h2 className="text-xl text-[var(--color-secondaryTextDark)]">This app uses the following components:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Frontend:</h2>
         <ul><li>React</li><li>TypeScript</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Backend:</h2>
-        <ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Containerization:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Backend:</h2>
+        <ul><li>Node.js & Express</li><li>PostgreSQL</li><li>Prisma</li></ul>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Containerization:</h2>
         <ul><li>Docker</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Styling/UI:</h2>
         <ul><li>Tailwind CSS</li></ul>
-        <p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
-          Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
+        <p className="mt-4 text-[var(--color-secondaryTextDark)]">More about me <a className="text-[var(--color-textLink)]" target="_blank" href="https://fredzernia.com">here</a> |
+          Code for this app <a className="text-[var(--color-textLink)]" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
       </div>
     </div >
   )

frontend/src/pages/AddRecipe.tsx

@@ -5,6 +5,7 @@ import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 import AddBulkSteps from "../components/AddBulkSteps.tsx"
 import StarRating from "../components/StarRating.tsx"
 import DemoModal from '../components/DemoModal.tsx'
+import '../css/colorTheme.css';
 
 interface Step {
   step_number: number;
@@ -65,7 +66,7 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Title"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={recipeName}
           maxLength={35}
           onChange={(e) => setRecipeName(e.target.value)}
@@ -73,7 +74,7 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Cuisine"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={recipeCuisine}
           maxLength={15}
           onChange={(e) => setRecipeCuisine(e.target.value)}
@@ -81,32 +82,32 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Author"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={author}
           onChange={(e) => setAuthor(e.target.value)}
         />
         <div className="flex items-center justify-between mb-4">
           <div>
-            <label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
+            <label htmlFor="prepTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Prep Time:</label>
             <input
               type="number"
               placeholder="prep time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
               value={prepMinutes}
               onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
             />
-            <span className="ml-2">minutes</span>
+            <span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
           </div>
           <div>
-            <label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
+            <label htmlFor="cookTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Cook Time:</label>
             <input
               type="number"
               placeholder="cook time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
               value={cookMinutes}
               onChange={(e) => setCookMinutes(parseInt(e.target.value))}
             />
-            <span className="ml-2">minutes</span>
+            <span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
           </div>
           <div>
             <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
@@ -142,7 +143,7 @@ function AddRecipe() {
           </li>
         ))}
       </ul>*/}
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+        <button type="submit" className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]">
           submit
         </button>
       </form>

frontend/src/pages/Index.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
-import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx";
 import { getRecipes } from "../services/frontendApi.js";
-import { type RecipeSmall } from "../types/Recipe.ts"
-
+import { type RecipeSmall } from "../types/Recipe.ts";
+import '../css/colorTheme.css'
 
 function AllRecipes() {
   const [searchQuery, setSearchQuery] = useState("");
@@ -18,13 +18,16 @@ function AllRecipes() {
       try {
         const recipes = await getRecipes();
         setRecipes(recipes);
-        if (process.env.NODE_ENV === 'dev') {
-          console.log(recipes)
+        if (process.env.NODE_ENV === "dev") {
+          console.log(recipes);
         }
-        const uniqueCuisines: string[] = recipes.length > 0
-          ? Array.from(new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)))
-          : [];
-        setCuisines(uniqueCuisines)
+        const uniqueCuisines: string[] =
+          recipes.length > 0
+            ? Array.from(
+              new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)),
+            )
+            : [];
+        setCuisines(uniqueCuisines);
       } catch (error) {
         console.log(error);
         setError("Failed to load recipes...");
@@ -37,38 +40,51 @@ function AllRecipes() {
     }
   }, [shouldFetchRecipes]);
 
-  const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
+  const filteredRecipes = selectedCuisine
+    ? recipes.filter((recipe) => recipe.cuisine === selectedCuisine)
+    : recipes;
 
   return (
-    <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
-      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
+    <div className="add-recipe-card bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
+      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-[var(--color-textDark)]">
+        Recipe Index
+      </h1>
       <div className="cuisines-buttons flex flex-wrap justify-center">
         <input
           type="text"
           placeholder="search"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
         {cuisines.map((cuisine) => (
           <button
             key={cuisine}
-            className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
-            onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
+            className={`ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)] m-2 ${selectedCuisine === cuisine ? "selected bg-[var(--color-buttonBgHover)]" : ""}`}
+            onClick={() =>
+              setSelectedCuisine((prevState) =>
+                prevState === cuisine ? "" : cuisine,
+              )
+            }
           >
             {cuisine}
           </button>
         ))}
-      </div>      {error && <div className="error-message">{error}</div>}
+      </div>{" "}
+      {error && <div className="error-message">{error}</div>}
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {filteredRecipes.map((recipe) => (
-              recipe.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
-              <CookbookRecipeTile recipe={recipe} key={recipe.id} />
-            ))}
+            {filteredRecipes.map(
+              (recipe) =>
+                recipe.name
+                  .toLowerCase()
+                  .includes(searchQuery.toLowerCase()) && (
+                  <CookbookRecipeTile recipe={recipe} key={recipe.id} />
+                ),
+            )}
           </div>
         </div>
       )}
@@ -76,4 +92,4 @@ function AllRecipes() {
   );
 }
 
-export default AllRecipes
+export default AllRecipes;

frontend/src/pages/RecipeIngredients.tsx

@@ -28,7 +28,7 @@ function RecipeIngredients() {
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
             {recipeIngredients.map((ing, idx) => (
               <li key={idx}>{ing}</li>

frontend/src/pages/RecipePage.tsx

@@ -101,34 +101,34 @@ function RecipePage() {
           <div className="m-2">
             <Link
               to="/"
-              className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"
+              className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]"
             >
               Return to Cookbook
             </Link>
           </div>
         </div>
       ) : (
-        <div className="border-b-2 border-amber-300 pb-4">
+        <div className="border-b-2 border-[var(--color-primaryBorder)] pb-4">
           <div className="recipe-card">
             <div className="flex relative justify-between">
               <button
-                onClick={() => {}}
+                onClick={() => { }}
                 className="invisible ar-button py-1 px-1 rounded self-start"
               >
                 🗑️
               </button>
-              <h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">
+              <h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-[var(--color-textDark)]">
                 {recipe.details.name}
               </h3>
               <button
                 onClick={openModal}
-                className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start"
+                className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
               >
                 🗑️
               </button>
             </div>
             <div className="mt-1">
-              <p className="text-amber-700 italic text-lg">
+              <p className="text-[var(--color-textDark)] italic text-lg">
                 {recipe.details.cuisine}
               </p>
               <p>
@@ -140,22 +140,22 @@ function RecipePage() {
           </div>
 
           <div className="grid lg:grid-cols-2 gap-6 mb-6">
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
+            <div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
+              <h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
                 Ingredients:
               </h4>
               <ul className="space-y-2">
                 {recipe.ingredients.map((ingredient: string, index) => (
-                  <li key={index} className="text-gray-700 flex items-start">
-                    <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
+                  <li key={index} className="text-[var(--color-secondaryTextDark)] flex items-start">
+                    <span className="w-1.5 h-1.5 bg-[var(--color-buttonBg)] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                     <span className="font-medium text-left">{ingredient}</span>
                   </li>
                 ))}
               </ul>
             </div>
 
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
+            <div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
+              <h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
                 Instructions:
               </h4>
               <ol className="space-y-3">
@@ -163,9 +163,9 @@ function RecipePage() {
                   Object.keys(recipe.steps || {}).map((stepNumber) => (
                     <li
                       key={stepNumber}
-                      className="text-gray-700 flex items-start"
+                      className="text-[var(--color-secondaryTextDark)] flex items-start"
                     >
-                      <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
+                      <span className="bg-[var(--color-buttonBg)] text-[var(--color-textLight)] rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
                         {recipe.steps[parseInt(stepNumber)].step_number}
                       </span>
                       <span className="leading-relaxed text-left">
@@ -177,8 +177,8 @@ function RecipePage() {
             </div>
           </div>
 
-          <div className="border-t-2 border-amber-300 pt-4">
-            <div className="flex justify-between items-center text-sm text-amber-600">
+          <div className="border-t-2 border-[var(--color-primaryBorder)] pt-4">
+            <div className="flex justify-between items-center text-sm text-[var(--color-textDark)]">
               {isWebSource ? (
                 <span>Source: {recipe.details.author}</span>
               ) : (

frontend/src/pages/RecipeSteps.tsx

@@ -30,7 +30,7 @@ function RecipeSteps() {
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
             {recipeSteps.map(step => (
               <li key={step.id}>