fixed some issues + change color style.

frontend/src/App.jsx

@@ -48,7 +48,7 @@ function App() {
   }, [fetchModels, checkTaskStatus]);
 
   return (
-    <div className="h-screen bg-gradient-to-br from-primary-50 to-secondary-50 overflow-hidden">
+    <div className="h-screen bg-secondary-50 overflow-hidden">
       {/* GitHub Corner */}
       <a
         href="https://github.com/tcmmichaelb139/evolutiontransformer"
@@ -61,7 +61,7 @@ function App() {
           width="40"
           height="40"
           viewBox="0 0 250 250"
-          className="fill-primary-500 text-white absolute top-0 right-0 border-0"
+          className="fill-primary-500 text-background absolute top-0 right-0 border-0"
           aria-hidden="true"
         >
           <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />

frontend/src/components/Dropdown.jsx

@@ -43,24 +43,22 @@ const Dropdown = ({
   return (
     <div className={`relative ${className}`} ref={dropdownRef}>
       {label && (
-        <label className="block text-sm font-medium text-secondary-700 mb-2">
+        <label className="block text-sm font-medium text-foreground mb-2">
           {label}
         </label>
       )}
       <button
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
-        className={`w-full p-4 rounded-xl text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed bg-white border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg ${className}`}
+        className={`w-full p-4 rounded-xl text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed bg-background border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg ${className}`}
       >
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             {icon && <div className="text-lg">{icon}</div>}
             <span
               className={`${
-                isSelected
-                  ? "text-secondary-800 font-medium"
-                  : "text-secondary-500"
-              } ${loading ? "text-secondary-400" : ""}`}
+                isSelected ? "text-foreground font-medium" : "text-foreground"
+              } ${loading ? "text-foreground" : ""}`}
             >
               {loading ? loadingMessage : displayValue}
             </span>
@@ -72,7 +70,7 @@ const Dropdown = ({
             <svg
               className={`w-5 h-5 text-primary-600 transition-transform duration-200 ${
                 isOpen ? "rotate-180" : ""
-              } ${disabled ? "text-secondary-400" : ""}`}
+              } ${disabled ? "text-foreground" : ""}`}
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -89,13 +87,13 @@ const Dropdown = ({
       </button>
       {isOpen && !disabled && (
         <div
-          className={`absolute z-50 w-full mt-2 rounded-xl max-h-60 overflow-hidden bg-white border-2 border-primary-200 shadow-lg ${dropdownClassName}`}
+          className={`absolute z-50 w-full mt-2 rounded-xl max-h-60 overflow-hidden bg-background border-2 border-primary-200 shadow-lg ${dropdownClassName}`}
         >
           {showSearch && (
             <div className="p-3 border-b border-secondary-100">
               <div className="relative">
                 <svg
-                  className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-secondary-400"
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-foreground"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -120,12 +118,12 @@ const Dropdown = ({
           )}
           <div className="max-h-48 overflow-y-auto p-2">
             {loading ? (
-              <div className="p-4 text-center text-secondary-500">
+              <div className="p-4 text-center text-foreground">
                 <div className="animate-spin w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full mx-auto mb-2"></div>
                 {loadingMessage}
               </div>
             ) : filteredOptions.length === 0 ? (
-              <div className="p-4 text-center text-secondary-500">
+              <div className="p-4 text-center text-foreground">
                 {emptyMessage}
               </div>
             ) : (
@@ -148,45 +146,23 @@ const Dropdown = ({
                     className={`w-full p-3 text-left rounded-lg transition-all duration-200 hover:bg-blue-100 hover:text-blue-900 ${
                       isOptionSelected
                         ? "bg-gradient-to-r from-primary-200 to-accent-200 text-primary-800 font-medium"
-                        : "text-secondary-700 hover:bg-blue-50"
+                        : "text-foreground hover:bg-blue-50"
                     } ${optionClassName}`}
                   >
                     <div className="flex items-center space-x-3">
                       {optionIcon && (
                         <div className="text-lg">{optionIcon}</div>
                       )}
-                      <div
-                        className={`w-3 h-3 rounded-full transition-colors ${
-                          isOptionSelected
-                            ? "bg-primary-600"
-                            : "bg-secondary-300"
-                        }`}
-                      ></div>
                       <div className="flex-1 min-w-0">
                         <div className="truncate font-medium">
                           {optionLabel}
                         </div>
                         {optionDescription && (
-                          <div className="text-xs text-secondary-500 truncate mt-1">
+                          <div className="text-xs text-foreground truncate mt-1">
                             {optionDescription}
                           </div>
                         )}
                       </div>
-                      {isOptionSelected && (
-                        <svg
-                          className="w-4 h-4 text-primary-600"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M5 13l4 4L19 7"
-                          />
-                        </svg>
-                      )}
                     </div>
                   </button>
                 );

frontend/src/components/InferencePopup.jsx

@@ -95,12 +95,12 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
         WebkitBackdropFilter: "blur(8px)", // Safari support
       }}
     >
-      <div className="bg-white rounded-2xl border-2 border-primary-200 shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+      <div className="bg-background rounded-2xl border-2 border-primary-200 shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
         {/* Header */}
-        <div className="p-6 border-b border-secondary-200 bg-gradient-to-r from-primary-50 to-accent-50">
+        <div className="p-6 border-b border-secondary-200 bg-secondary-50">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
-              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-white">
+              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-background">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
@@ -115,13 +115,13 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
                   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                 </svg>
               </div>
-              <h2 className="text-xl font-bold text-secondary-800">
+              <h2 className="text-xl font-bold text-foreground">
                 Model Inference
               </h2>
             </div>
             <button
               onClick={handleClose}
-              className="w-8 h-8 rounded-lg hover:bg-secondary-200 transition-colors duration-200 flex items-center justify-center text-secondary-600 hover:text-secondary-800"
+              className="w-8 h-8 rounded-lg hover:bg-secondary-200 transition-colors duration-200 flex items-center justify-center text-foreground hover:text-foreground"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -152,7 +152,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           />
 
           <div>
-            <label className="block text-sm font-medium text-secondary-700 mb-2">
+            <label className="block text-sm font-medium text-foreground mb-2">
               Prompt
             </label>
             <textarea
@@ -167,7 +167,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           {/* Configuration Section */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <label className="block text-sm font-medium text-foreground mb-2">
                 Max New Tokens
               </label>
               <NumberInput
@@ -182,7 +182,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <label className="block text-sm font-medium text-foreground mb-2">
                 Temperature
               </label>
               <NumberInput
@@ -202,11 +202,11 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           <button
             onClick={handleInference}
             disabled={isLoading || !selectedModel || !prompt.trim()}
-            className="w-full py-3 px-4 bg-gradient-to-r from-primary-500 to-accent-500 text-white font-medium rounded-lg hover:from-primary-600 hover:to-accent-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+            className="w-full py-3 px-4 bg-gradient-to-r from-primary-500 to-accent-500 text-background font-medium rounded-lg hover:from-primary-600 hover:to-accent-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
           >
             {isLoading ? (
               <>
-                <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div>
+                <div className="animate-spin w-4 h-4 border-2 border-background border-t-transparent rounded-full"></div>
                 <span>Generating...</span>
               </>
             ) : (
@@ -239,11 +239,11 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           {/* Response Display */}
           {response && (
             <div>
-              <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <label className="block text-sm font-medium text-foreground mb-2">
                 Generated Response
               </label>
               <div className="p-4 bg-primary-50 border-2 border-primary-200 rounded-xl">
-                <p className="text-secondary-800 whitespace-pre-wrap">
+                <p className="text-foreground backgroundspace-pre-wrap">
                   {response}
                 </p>
               </div>

frontend/src/components/NumberInput.jsx

@@ -90,7 +90,7 @@ const NumberInput = ({
     <div className={className}>
       {label && (
         <label
-          className={`block font-medium text-secondary-700 ${
+          className={`block font-medium text-foreground ${
             compact ? "text-xs mb-1" : "text-sm mb-2"
           }`}
         >
@@ -105,7 +105,7 @@ const NumberInput = ({
           onBlur={handleBlur}
           step={step}
           disabled={disabled}
-          className={`w-full bg-white border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200 text-secondary-800 font-medium disabled:opacity-50 disabled:cursor-not-allowed ${
+          className={`w-full bg-background border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200 text-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed ${
             compact ? "p-2 rounded-lg text-sm" : "p-4 rounded-xl"
           }`}
           min={min}
@@ -117,7 +117,7 @@ const NumberInput = ({
           }`}
         >
           <div
-            className={`text-secondary-500 bg-white px-1 py-0.5 rounded border border-secondary-200 ${
+            className={`text-foreground bg-background px-1 py-0.5 rounded border border-secondary-200 ${
               compact ? "text-xs px-1" : "text-xs px-2 py-1"
             }`}
           >

frontend/src/components/Options.jsx

@@ -89,9 +89,9 @@ const Options = ({
 
   return (
     <div>
-      <div className="p-6 border-2 border-primary-200 rounded-2xl bg-gradient-to-br from-white to-primary-50 shadow-xl fixed inset-y-4 left-4 w-[25rem] overflow-y-auto">
+      <div className="p-6 border-2 border-primary-200 rounded-2xl bg-background shadow-xl fixed inset-y-4 left-4 w-[25rem] overflow-y-auto">
         <div className="flex items-center space-x-2 mb-6">
-          <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-white">
+          <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-background">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -109,7 +109,7 @@ const Options = ({
               <circle cx="7" cy="7" r="3" />
             </svg>
           </div>
-          <h2 className="text-xl font-bold text-secondary-800">
+          <h2 className="text-xl font-bold text-foreground">
             Evolution Transformer Options
           </h2>
         </div>
@@ -151,7 +151,7 @@ const Options = ({
           />
 
           <div>
-            <label className="block text-sm font-medium text-secondary-700 mb-1">
+            <label className="block text-sm font-medium text-foreground mb-1">
               Merged Model Name
             </label>
             <input
@@ -159,7 +159,7 @@ const Options = ({
               value={mergedName}
               onChange={(e) => setMergedName(e.target.value)}
               placeholder="Enter merged model name..."
-              className="w-full px-3 py-2 border-2 border-secondary-200 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-200 text-secondary-800 placeholder-secondary-400 transition-all duration-200"
+              className="w-full px-3 py-2 border-2 border-secondary-200 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-200 text-foreground placeholder-secondary-400 transition-all duration-200"
             />
           </div>
 
@@ -182,9 +182,9 @@ const Options = ({
           </div>
 
           <div className="flex space-x-3">
-            <div className="flex-1 p-4 rounded-xl border-2 border-accent-200 bg-gradient-to-br from-accent-50 to-primary-50">
+            <div className="flex-1 p-4 rounded-xl border-2 border-accent-200 bg-accent-50">
               <div className="flex items-center space-x-2 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-br from-accent-500 to-secondary-500 rounded-lg flex items-center justify-center text-white">
+                <div className="w-6 h-6 bg-gradient-to-br from-accent-500 to-secondary-500 rounded-lg flex items-center justify-center text-background">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
@@ -201,7 +201,7 @@ const Options = ({
                     <path d="m20 22-5-5" />
                   </svg>
                 </div>
-                <h3 className="text-sm font-semibold text-secondary-800">
+                <h3 className="text-sm font-semibold text-foreground">
                   Merge Models
                 </h3>
               </div>
@@ -215,11 +215,11 @@ const Options = ({
                   layerRecipe.length === 0 ||
                   !mergedName.trim()
                 }
-                className="w-full py-2.5 px-3 bg-gradient-to-r from-accent-500 to-primary-500 text-white font-medium rounded-lg hover:from-accent-600 hover:to-primary-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 text-sm"
+                className="w-full py-2.5 px-3 bg-gradient-to-r from-accent-500 to-primary-500 text-background font-medium rounded-lg hover:from-accent-600 hover:to-primary-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 text-sm"
               >
                 {isLoading ? (
                   <>
-                    <div className="animate-spin w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full"></div>
+                    <div className="animate-spin w-3.5 h-3.5 border-2 border-background border-t-transparent rounded-full"></div>
                     <span>Merging...</span>
                   </>
                 ) : (
@@ -245,9 +245,9 @@ const Options = ({
               </button>
             </div>
 
-            <div className="flex-1 p-4 rounded-xl border-2 border-primary-200 bg-gradient-to-br from-primary-50 to-accent-50">
+            <div className="flex-1 p-4 rounded-xl border-2 border-primary-200 bg-primary-50">
               <div className="flex items-center space-x-2 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-br from-secondary-500 to-primary-500 rounded-lg flex items-center justify-center text-white">
+                <div className="w-6 h-6 bg-gradient-to-br from-secondary-500 to-primary-500 rounded-lg flex items-center justify-center text-background">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
@@ -262,14 +262,14 @@ const Options = ({
                     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                   </svg>
                 </div>
-                <h3 className="text-sm font-semibold text-secondary-800">
+                <h3 className="text-sm font-semibold text-foreground">
                   Test Inference
                 </h3>
               </div>
 
               <button
                 onClick={() => setIsInferenceOpen(true)}
-                className="w-full py-2.5 px-3 bg-gradient-to-r from-secondary-500 to-primary-500 text-white font-medium rounded-lg hover:from-secondary-600 hover:to-primary-600 transition-all duration-200 flex items-center justify-center space-x-2 text-sm"
+                className="w-full py-2.5 px-3 bg-gradient-to-r from-secondary-500 to-primary-500 text-background font-medium rounded-lg hover:from-secondary-600 hover:to-primary-600 transition-all duration-200 flex items-center justify-center space-x-2 text-sm"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

frontend/src/components/Recipe.jsx

@@ -108,7 +108,7 @@ const Recipe = ({
   };
 
   return (
-    <div className="p-6 border-2 border-primary-200 rounded-2xl bg-gradient-to-br from-white to-primary-50 shadow-xl fixed top-4 right-4 bottom-4 left-[27rem] overflow-y-auto ">
+    <div className="p-6 border-2 border-primary-200 rounded-2xl bg-background shadow-xl fixed top-4 right-4 bottom-4 left-[27rem] overflow-y-auto ">
       <div className="flex items-center space-x-2 mb-6">
         <div className="w-8 h-8 bg-gradient-to-br from-accent-500 to-primary-500 rounded-lg flex items-center justify-center">
           <svg
@@ -121,18 +121,18 @@ const Recipe = ({
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="text-white"
+            className="text-background"
           >
             <path d="M12 3v18m9-9H3" />
           </svg>
         </div>
-        <h2 className="text-xl font-bold text-secondary-800">Layer Recipe</h2>
+        <h2 className="text-xl font-bold text-foreground">Layer Recipe</h2>
       </div>
 
       <div className="space-y-8">
         <div className="grid grid-cols-2 gap-6">
           <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-secondary-700">
+            <h3 className="text-lg font-semibold text-foreground">
               Embedding Layers
             </h3>
             <div className="space-y-3">
@@ -154,7 +154,7 @@ const Recipe = ({
           </div>
 
           <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-secondary-700">
+            <h3 className="text-lg font-semibold text-foreground">
               Linear Layers
             </h3>
             <div className="space-y-3">
@@ -178,10 +178,10 @@ const Recipe = ({
 
         <div className="space-y-4">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-secondary-700">
+            <h3 className="text-lg font-semibold text-foreground">
               Transformer Layers
             </h3>
-            <div className="text-xs text-secondary-500 space-x-4">
+            <div className="text-xs text-foreground space-x-4">
               <span>
                 Model 1:{" "}
                 {modelLayerCounts.model1 === "N/A"
@@ -200,14 +200,14 @@ const Recipe = ({
             {layerRecipe.map((layer, layerIndex) => (
               <div
                 key={layerIndex}
-                className="relative border-2 border-secondary-200 rounded-xl p-4 bg-white hover:border-primary-300 transition-all duration-200"
+                className="relative border-2 border-secondary-200 rounded-xl p-4 bg-background hover:border-primary-300 transition-all duration-200"
               >
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center space-x-3">
-                    <h4 className="font-medium text-secondary-700">
+                    <h4 className="font-medium text-foreground">
                       Layer {layerIndex + 1}
                     </h4>
-                    <div className="text-xs text-secondary-500 bg-secondary-100 px-2 py-1 rounded-md">
+                    <div className="text-xs text-foreground bg-secondary-100 px-2 py-1 rounded-md">
                       Total:{" "}
                       {Math.round(
                         layer.reduce((sum, block) => sum + block[2], 0) * 100
@@ -217,7 +217,7 @@ const Recipe = ({
                   </div>
                   <button
                     onClick={() => addBlockToLayer(layerIndex)}
-                    className="w-6 h-6 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors duration-200 flex items-center justify-center"
+                    className="w-6 h-6 bg-primary-500 text-background rounded-md hover:bg-primary-600 transition-colors duration-200 flex items-center justify-center"
                     title="Add block"
                   >
                     <svg
@@ -252,18 +252,16 @@ const Recipe = ({
                             e.preventDefault();
                             removeBlockFromLayer(layerIndex, blockIndex);
                           }}
-                          className="px-3 py-2 bg-white border-2 border-secondary-300 rounded-lg hover:border-primary-300 hover:bg-primary-50 transition-all duration-200 text-sm font-medium text-secondary-700 flex items-center space-x-2"
+                          className="px-3 py-2 bg-background border-2 border-secondary-300 rounded-lg hover:border-primary-300 hover:bg-primary-50 transition-all duration-200 text-sm font-medium text-foreground flex items-center space-x-2"
                           title="Left click to edit, Right click to delete"
                         >
                           <span className="text-primary-600">{modelName}</span>
-                          <span className="text-secondary-500">
-                            L{block[0]}
-                          </span>
+                          <span className="text-foreground">L{block[0]}</span>
                           <span className="text-accent-600">
                             {Math.round(block[2] * 100)}%
                           </span>
                           <svg
-                            className={`w-4 h-4 text-secondary-400 transition-transform duration-200 ${
+                            className={`w-4 h-4 text-foreground transition-transform duration-200 ${
                               isExpanded ? "rotate-180" : ""
                             }`}
                             fill="none"
@@ -281,12 +279,12 @@ const Recipe = ({
 
                         {isExpanded && (
                           <div
-                            className="absolute top-full left-0 mt-1 p-3 bg-white border-2 border-primary-200 rounded-lg shadow-lg z-10 min-w-64"
+                            className="absolute top-full left-0 mt-1 p-3 bg-background border-2 border-primary-200 rounded-lg shadow-lg z-10 min-w-64"
                             data-block-id={blockId}
                           >
                             <div className="space-y-3">
                               <div>
-                                <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                <label className="block text-xs font-medium text-foreground mb-1">
                                   Model
                                 </label>
                                 <Dropdown
@@ -309,7 +307,7 @@ const Recipe = ({
 
                               <div className="grid grid-cols-2 gap-3">
                                 <div>
-                                  <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                  <label className="block text-xs font-medium text-foreground mb-1">
                                     Layer
                                   </label>
                                   <NumberInput
@@ -337,7 +335,7 @@ const Recipe = ({
                                 </div>
 
                                 <div>
-                                  <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                  <label className="block text-xs font-medium text-foreground mb-1">
                                     Weight (%)
                                   </label>
                                   <NumberInput
@@ -366,7 +364,7 @@ const Recipe = ({
                                     );
                                     setExpandedBlock(null);
                                   }}
-                                  className="w-full px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors duration-200 text-sm font-medium"
+                                  className="w-full px-3 py-2 bg-red-800 text-background rounded-lg hover:bg-red-700 transition-colors duration-200 text-sm font-medium"
                                 >
                                   Remove Block
                                 </button>

frontend/src/index.css

@@ -1,38 +1,249 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary-50: #f0f9ff;
-  --color-primary-100: #e0f2fe;
-  --color-primary-200: #bae6fd;
-  --color-primary-300: #7dd3fc;
-  --color-primary-400: #38bdf8;
-  --color-primary-500: #0ea5e9;
-  --color-primary-600: #0284c7;
-  --color-primary-700: #0369a1;
-  --color-primary-800: #075985;
-  --color-primary-900: #0c4a6e;
+  /* Tokyo Night Light - Background and Foreground */
+  --color-background: #e6e7ed;
+  --color-foreground: #343b58;
 
-  --color-secondary-50: #f8fafc;
-  --color-secondary-100: #f1f5f9;
-  --color-secondary-200: #e2e8f0;
-  --color-secondary-300: #cbd5e1;
-  --color-secondary-400: #94a3b8;
-  --color-secondary-500: #64748b;
-  --color-secondary-600: #475569;
-  --color-secondary-700: #334155;
-  --color-secondary-800: #1e293b;
-  --color-secondary-900: #0f172a;
+  /* Tokyo Night Light - Primary (8C4351 - HSL: 0.97, 0.35, 0.41) */
+  --color-primary-50: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 45%)
+  );
+  --color-primary-100: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 40%)
+  );
+  --color-primary-200: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 30%)
+  );
+  --color-primary-300: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 20%)
+  );
+  --color-primary-400: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 10%)
+  );
+  --color-primary-500: #8c4351;
+  --color-primary-600: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 5%)
+  );
+  --color-primary-700: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 10%)
+  );
+  --color-primary-800: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 15%)
+  );
+  --color-primary-900: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 20%)
+  );
 
-  --color-accent-50: #f0fdf4;
-  --color-accent-100: #dcfce7;
-  --color-accent-200: #bbf7d0;
-  --color-accent-300: #86efac;
-  --color-accent-400: #4ade80;
-  --color-accent-500: #22c55e;
-  --color-accent-600: #16a34a;
-  --color-accent-700: #15803d;
-  --color-accent-800: #166534;
-  --color-accent-900: #14532d;
+  /* Tokyo Night Light - Secondary (343b58 - HSL: 0.63, 0.26, 0.29) */
+  --color-secondary-50: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 55%)
+  );
+  --color-secondary-100: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 45%)
+  );
+  --color-secondary-200: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 35%)
+  );
+  --color-secondary-300: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 25%)
+  );
+  --color-secondary-400: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 15%)
+  );
+  --color-secondary-500: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% + 5%)
+  );
+  --color-secondary-600: #343b58;
+  --color-secondary-700: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% - 5%)
+  );
+  --color-secondary-800: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% - 10%)
+  );
+  --color-secondary-900: hsl(
+    calc(0.63 * 360),
+    calc(0.26 * 100%),
+    calc(0.29 * 100% - 15%)
+  );
+
+  /* Tokyo Night Light - Accent (2959aa - HSL: 0.60, 0.61, 0.41) */
+  --color-accent-50: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% + 45%)
+  );
+  --color-accent-100: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% + 40%)
+  );
+  --color-accent-200: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% + 30%)
+  );
+  --color-accent-300: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% + 20%)
+  );
+  --color-accent-400: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% + 10%)
+  );
+  --color-accent-500: #2959aa;
+  --color-accent-600: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% - 5%)
+  );
+  --color-accent-700: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% - 10%)
+  );
+  --color-accent-800: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% - 15%)
+  );
+  --color-accent-900: hsl(
+    calc(0.6 * 360),
+    calc(0.61 * 100%),
+    calc(0.41 * 100% - 20%)
+  );
+
+  /* Red color scheme (8C4351 - HSL: 0.97, 0.35, 0.41) */
+  --color-red-50: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 45%)
+  );
+  --color-red-100: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 35%)
+  );
+  --color-red-200: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 25%)
+  );
+  --color-red-300: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 15%)
+  );
+  --color-red-400: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% + 5%)
+  );
+  --color-red-500: #8c4351;
+  --color-red-600: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 5%)
+  );
+  --color-red-700: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 10%)
+  );
+  --color-red-800: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 15%)
+  );
+  --color-red-900: hsl(
+    calc(0.97 * 360),
+    calc(0.35 * 100%),
+    calc(0.41 * 100% - 20%)
+  );
+
+  /* Green color scheme (385f0d - HSL: 0.25, 0.76, 0.21) */
+  --color-green-50: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% + 60%)
+  );
+  --color-green-100: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% + 50%)
+  );
+  --color-green-200: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% + 40%)
+  );
+  --color-green-300: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% + 30%)
+  );
+  --color-green-400: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% + 20%)
+  );
+  --color-green-500: #385f0d;
+  --color-green-600: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% - 3%)
+  );
+  --color-green-700: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% - 6%)
+  );
+  --color-green-800: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% - 9%)
+  );
+  --color-green-900: hsl(
+    calc(0.25 * 360),
+    calc(0.76 * 100%),
+    calc(0.21 * 100% - 12%)
+  );
 }
 
 :root {
@@ -64,13 +275,13 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #0ea5e9;
+  background: var(--color-accent-500);
   border-radius: 4px;
   transition: background 0.2s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #0284c7;
+  background: var(--color-accent-600);
 }
 
 ::-webkit-scrollbar-corner {
@@ -80,5 +291,5 @@ body {
 /* Firefox scrollbar styling */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #0ea5e9 transparent;
+  scrollbar-color: var(--color-accent-500) transparent;
 }