From acf46776cd4206bc00978f1514ba77e1ff76edf2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 17 Sep 2025 07:40:16 +0000
Subject: [PATCH 1/2] Initial plan


From d856e3a2aeb6f5c88f251814a72bd5336b87e47c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 17 Sep 2025 07:49:32 +0000
Subject: [PATCH 2/2] Changes before error encountered

Co-authored-by: jmenichole <99936634+jmenichole@users.noreply.github.com>
---
 reactSetup/src/components/CooldownTimer.tsx   | 64 +++++++++--------
 reactSetup/src/components/HabitTracker.tsx    | 58 +++++++--------
 reactSetup/src/components/SpendingTracker.tsx | 63 ++++++++--------
 reactSetup/tailwind.config.ts                 | 71 ++++++++++++++++++-
 4 files changed, 167 insertions(+), 89 deletions(-)

diff --git a/reactSetup/src/components/CooldownTimer.tsx b/reactSetup/src/components/CooldownTimer.tsx
index f456114..a0473dc 100644
--- a/reactSetup/src/components/CooldownTimer.tsx
+++ b/reactSetup/src/components/CooldownTimer.tsx
@@ -45,10 +45,10 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({
   const seconds = Math.floor((timeRemaining - minutes) * 60);
 
   return (
-    <div className="bg-gradient-to-r from-orange-500 to-red-500 text-white p-6 rounded-lg mb-8 shadow-lg">
+    <div className="bg-gradient-to-br from-mindful-sky-400 via-mindful-sage-400 to-mindful-earth-400 text-white p-6 rounded-xl mb-8 shadow-xl border border-white/20">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center space-x-3">
-          <div className="bg-white bg-opacity-20 p-2 rounded-full">
+          <div className="bg-white bg-opacity-20 p-3 rounded-full backdrop-blur-sm">
             {isComplete ? (
               <CheckCircle className="h-6 w-6" />
             ) : (
@@ -57,16 +57,16 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({
           </div>
           <div>
             <h3 className="text-xl font-bold">
-              {isComplete ? 'Cool-down Complete!' : 'Cool-down Active'}
+              {isComplete ? '🌟 Cool-down Complete!' : '🧘‍♀️ Mindful Pause Active'}
             </h3>
-            <p className="text-orange-100 text-sm">{cooldown.reason}</p>
+            <p className="text-white/80 text-sm">{cooldown.reason}</p>
           </div>
         </div>
         
         {onCancel && !isComplete && (
           <button
             onClick={onCancel}
-            className="bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-full transition-colors"
+            className="bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-full transition-all duration-200 backdrop-blur-sm"
           >
             <X className="h-5 w-5" />
           </button>
@@ -75,50 +75,56 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({
 
       {!isComplete ? (
         <>
-          <div className="mb-4">
-            <div className="flex justify-between text-sm mb-2">
-              <span>Time remaining</span>
-              <span>{minutes}:{seconds.toString().padStart(2, '0')}</span>
+          <div className="mb-6">
+            <div className="flex justify-between text-sm mb-3">
+              <span className="text-white/90">Time remaining</span>
+              <span className="font-mono text-white">{minutes}:{seconds.toString().padStart(2, '0')}</span>
             </div>
-            <div className="bg-white bg-opacity-20 rounded-full h-3">
+            <div className="bg-white/20 rounded-full h-4 backdrop-blur-sm">
               <div
-                className="bg-white h-3 rounded-full transition-all duration-1000 ease-linear"
+                className="bg-gradient-to-r from-white via-mindful-sage-100 to-white h-4 rounded-full transition-all duration-1000 ease-linear shadow-inner"
                 style={{ width: `${progress}%` }}
               />
             </div>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-            <div className="bg-white bg-opacity-10 p-3 rounded-lg">
-              <h4 className="font-semibold mb-1">Take Deep Breaths</h4>
-              <p>Focus on slow, controlled breathing to reduce impulse intensity.</p>
+            <div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
+              <h4 className="font-semibold mb-2 text-white flex items-center">
+                🫁 <span className="ml-2">Take Deep Breaths</span>
+              </h4>
+              <p className="text-white/90">Focus on slow, mindful breathing to create space between impulse and action.</p>
             </div>
             
-            <div className="bg-white bg-opacity-10 p-3 rounded-lg">
-              <h4 className="font-semibold mb-1">Ask Yourself</h4>
-              <p>"Do I really need this? How will I feel about it tomorrow?"</p>
+            <div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
+              <h4 className="font-semibold mb-2 text-white flex items-center">
+                💭 <span className="ml-2">Gentle Reflection</span>
+              </h4>
+              <p className="text-white/90">"What am I really seeking? How might my future self feel about this choice?"</p>
             </div>
             
-            <div className="bg-white bg-opacity-10 p-3 rounded-lg">
-              <h4 className="font-semibold mb-1">Alternative Activity</h4>
-              <p>Go for a walk, call a friend, or engage in a hobby instead.</p>
+            <div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
+              <h4 className="font-semibold mb-2 text-white flex items-center">
+                🌱 <span className="ml-2">Nurturing Alternative</span>
+              </h4>
+              <p className="text-white/90">Connect with nature, reach out to loved ones, or engage in a creative activity.</p>
             </div>
           </div>
         </>
       ) : (
         <div className="text-center">
-          <p className="text-lg mb-4">
-            Great job taking time to pause and reflect! How are you feeling now?
+          <p className="text-lg mb-6 text-white/95">
+            🌟 Wonderful! You've created space for mindful reflection. How are you feeling in this moment?
           </p>
-          <div className="flex justify-center space-x-4">
-            <button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
-              Still want to buy
+          <div className="flex flex-wrap justify-center gap-3">
+            <button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
+              Still interested
             </button>
-            <button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
-              Changed my mind
+            <button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
+              Feeling grateful I waited
             </button>
-            <button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
-              Need more time
+            <button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
+              Need more reflection time
             </button>
           </div>
         </div>
diff --git a/reactSetup/src/components/HabitTracker.tsx b/reactSetup/src/components/HabitTracker.tsx
index ea339b7..b1bc2c6 100644
--- a/reactSetup/src/components/HabitTracker.tsx
+++ b/reactSetup/src/components/HabitTracker.tsx
@@ -30,53 +30,53 @@ export const HabitTracker: React.FC<HabitTrackerProps> = ({
   const isCooldownActive = cooldownPeriod ? isCoolDownActive(cooldownPeriod) : false;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
+    <div className="min-h-screen bg-gradient-to-br from-mindful-sage-50 via-mindful-sky-50 to-mindful-earth-50 p-6">
       <div className="max-w-6xl mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-800 mb-2">Mischief Manager</h1>
-          <p className="text-lg text-gray-600">Understanding your impulse spending patterns</p>
+          <h1 className="text-4xl font-bold text-mindful-earth-800 mb-2">Mischief Manager</h1>
+          <p className="text-lg text-mindful-earth-600">Your mindful companion for understanding spending patterns</p>
         </div>
 
         {/* Stats Overview */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-sage-100">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600">Total Tracked</p>
-                <p className="text-2xl font-bold text-gray-900">{formatCurrency(totalSpent)}</p>
+                <p className="text-sm font-medium text-mindful-earth-600">Total Tracked</p>
+                <p className="text-2xl font-bold text-mindful-earth-800">{formatCurrency(totalSpent)}</p>
               </div>
-              <TrendingUp className="h-8 w-8 text-blue-600" />
+              <TrendingUp className="h-8 w-8 text-mindful-sky-500" />
             </div>
           </div>
           
-          <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-coral-100">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600">Impulse Spending</p>
-                <p className="text-2xl font-bold text-red-600">{formatCurrency(impulsiveSpent)}</p>
+                <p className="text-sm font-medium text-mindful-earth-600">Impulse Spending</p>
+                <p className="text-2xl font-bold text-mindful-coral-600">{formatCurrency(impulsiveSpent)}</p>
               </div>
-              <AlertCircle className="h-8 w-8 text-red-600" />
+              <AlertCircle className="h-8 w-8 text-mindful-coral-500" />
             </div>
           </div>
           
-          <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-sage-100">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600">Entries This Week</p>
-                <p className="text-2xl font-bold text-gray-900">{entries.length}</p>
+                <p className="text-sm font-medium text-mindful-earth-600">Entries This Week</p>
+                <p className="text-2xl font-bold text-mindful-earth-800">{entries.length}</p>
               </div>
-              <Brain className="h-8 w-8 text-green-600" />
+              <Brain className="h-8 w-8 text-mindful-sage-500" />
             </div>
           </div>
           
-          <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-lavender-100">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600">Active Insights</p>
-                <p className="text-2xl font-bold text-purple-600">{insights.length}</p>
+                <p className="text-sm font-medium text-mindful-earth-600">Active Insights</p>
+                <p className="text-2xl font-bold text-mindful-lavender-600">{insights.length}</p>
               </div>
-              <Clock className="h-8 w-8 text-purple-600" />
+              <Clock className="h-8 w-8 text-mindful-lavender-500" />
             </div>
           </div>
         </div>
@@ -87,33 +87,33 @@ export const HabitTracker: React.FC<HabitTrackerProps> = ({
         )}
 
         {/* Navigation Tabs */}
-        <div className="flex space-x-1 bg-gray-200 p-1 rounded-lg mb-8">
+        <div className="flex space-x-1 bg-mindful-sage-100/50 p-1 rounded-xl mb-8 backdrop-blur-sm">
           <button
             onClick={() => setActiveView('tracker')}
-            className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
+            className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
               activeView === 'tracker'
-                ? 'bg-white text-blue-600 shadow-sm'
-                : 'text-gray-600 hover:text-gray-800'
+                ? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
+                : 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
             }`}
           >
             Track Spending
           </button>
           <button
             onClick={() => setActiveView('triggers')}
-            className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
+            className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
               activeView === 'triggers'
-                ? 'bg-white text-blue-600 shadow-sm'
-                : 'text-gray-600 hover:text-gray-800'
+                ? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
+                : 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
             }`}
           >
             Identify Triggers
           </button>
           <button
             onClick={() => setActiveView('insights')}
-            className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
+            className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
               activeView === 'insights'
-                ? 'bg-white text-blue-600 shadow-sm'
-                : 'text-gray-600 hover:text-gray-800'
+                ? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
+                : 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
             }`}
           >
             Your Insights
diff --git a/reactSetup/src/components/SpendingTracker.tsx b/reactSetup/src/components/SpendingTracker.tsx
index 3f5eb57..8df609e 100644
--- a/reactSetup/src/components/SpendingTracker.tsx
+++ b/reactSetup/src/components/SpendingTracker.tsx
@@ -89,21 +89,21 @@ export const SpendingTracker: React.FC<SpendingTrackerProps> = ({
   return (
     <div className="p-6">
       <div className="flex justify-between items-center mb-6">
-        <h2 className="text-2xl font-bold text-gray-800">Track Your Spending</h2>
+        <h2 className="text-2xl font-bold text-mindful-earth-800">✨ Track Your Journey</h2>
         <div className="flex space-x-2">
           <button
             onClick={() => handleStartCooldown(10)}
-            className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
+            className="bg-gradient-to-r from-mindful-sky-500 to-mindful-sage-500 hover:from-mindful-sky-600 hover:to-mindful-sage-600 text-white px-6 py-2 rounded-xl flex items-center space-x-2 transition-all duration-200 shadow-md hover:shadow-lg"
           >
             <Clock className="h-4 w-4" />
-            <span>10-min Cooldown</span>
+            <span>🧘‍♀️ 10-min Reflection</span>
           </button>
           <button
             onClick={() => setIsAddingEntry(true)}
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
+            className="bg-gradient-to-r from-mindful-earth-500 to-mindful-coral-500 hover:from-mindful-earth-600 hover:to-mindful-coral-600 text-white px-6 py-2 rounded-xl flex items-center space-x-2 transition-all duration-200 shadow-md hover:shadow-lg"
           >
             <Plus className="h-4 w-4" />
-            <span>Add Entry</span>
+            <span>💝 Add Entry</span>
           </button>
         </div>
       </div>
@@ -112,71 +112,74 @@ export const SpendingTracker: React.FC<SpendingTrackerProps> = ({
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <button 
           onClick={() => handleStartCooldown(5)}
-          className="p-4 bg-yellow-100 border border-yellow-300 rounded-lg hover:bg-yellow-200 text-center"
+          className="p-5 bg-gradient-to-br from-mindful-coral-100 to-mindful-coral-50 border border-mindful-coral-200 rounded-xl hover:from-mindful-coral-200 hover:to-mindful-coral-100 text-center transition-all duration-200 shadow-sm hover:shadow-md"
         >
-          <AlertTriangle className="h-6 w-6 mx-auto mb-2 text-yellow-600" />
-          <p className="text-sm font-medium">Feeling Triggered</p>
-          <p className="text-xs text-gray-600">5-min pause</p>
+          <AlertTriangle className="h-6 w-6 mx-auto mb-2 text-mindful-coral-600" />
+          <p className="text-sm font-medium text-mindful-coral-800">🌊 Feeling Waves</p>
+          <p className="text-xs text-mindful-earth-600">5-min mindful pause</p>
         </button>
         
         <button 
           onClick={() => handleStartCooldown(15)}
-          className="p-4 bg-red-100 border border-red-300 rounded-lg hover:bg-red-200 text-center"
+          className="p-5 bg-gradient-to-br from-mindful-lavender-100 to-mindful-lavender-50 border border-mindful-lavender-200 rounded-xl hover:from-mindful-lavender-200 hover:to-mindful-lavender-100 text-center transition-all duration-200 shadow-sm hover:shadow-md"
         >
-          <DollarSign className="h-6 w-6 mx-auto mb-2 text-red-600" />
-          <p className="text-sm font-medium">Strong Urge</p>
-          <p className="text-xs text-gray-600">15-min pause</p>
+          <DollarSign className="h-6 w-6 mx-auto mb-2 text-mindful-lavender-600" />
+          <p className="text-sm font-medium text-mindful-lavender-800">💫 Strong Pull</p>
+          <p className="text-xs text-mindful-earth-600">15-min reflection</p>
         </button>
         
-        <button className="p-4 bg-green-100 border border-green-300 rounded-lg hover:bg-green-200 text-center">
-          <CheckCircle className="h-6 w-6 mx-auto mb-2 text-green-600" />
-          <p className="text-sm font-medium">Resisted Urge</p>
-          <p className="text-xs text-gray-600">Log success</p>
+        <button className="p-5 bg-gradient-to-br from-mindful-sage-100 to-mindful-sage-50 border border-mindful-sage-200 rounded-xl hover:from-mindful-sage-200 hover:to-mindful-sage-100 text-center transition-all duration-200 shadow-sm hover:shadow-md">
+          <CheckCircle className="h-6 w-6 mx-auto mb-2 text-mindful-sage-600" />
+          <p className="text-sm font-medium text-mindful-sage-800">🌱 Gentle Victory</p>
+          <p className="text-xs text-mindful-earth-600">Celebrate growth</p>
         </button>
         
         <button 
           onClick={() => setIsAddingEntry(true)}
-          className="p-4 bg-blue-100 border border-blue-300 rounded-lg hover:bg-blue-200 text-center"
+          className="p-5 bg-gradient-to-br from-mindful-sky-100 to-mindful-sky-50 border border-mindful-sky-200 rounded-xl hover:from-mindful-sky-200 hover:to-mindful-sky-100 text-center transition-all duration-200 shadow-sm hover:shadow-md"
         >
-          <Plus className="h-6 w-6 mx-auto mb-2 text-blue-600" />
-          <p className="text-sm font-medium">Made Purchase</p>
-          <p className="text-xs text-gray-600">Track it</p>
+          <Plus className="h-6 w-6 mx-auto mb-2 text-mindful-sky-600" />
+          <p className="text-sm font-medium text-mindful-sky-800">📝 Mindful Log</p>
+          <p className="text-xs text-mindful-earth-600">Track with care</p>
         </button>
       </div>
 
       {/* Add Entry Form */}
       {isAddingEntry && (
-        <div className="bg-gray-50 p-6 rounded-lg mb-6">
-          <h3 className="text-lg font-semibold mb-4">Add Spending Entry</h3>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-gradient-to-br from-white/80 via-mindful-sage-50/50 to-mindful-sky-50/50 backdrop-blur-sm p-8 rounded-2xl mb-6 border border-mindful-sage-100/50 shadow-xl">
+          <h3 className="text-xl font-semibold mb-6 text-mindful-earth-800 flex items-center">
+            <span className="mr-2">🌸</span>
+            Mindful Entry
+          </h3>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Amount</label>
+                <label className="block text-sm font-medium text-mindful-earth-700 mb-2">💰 Amount</label>
                 <input
                   type="number"
                   step="0.01"
                   value={amount}
                   onChange={(e) => setAmount(e.target.value)}
-                  className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full p-3 border border-mindful-sage-200 rounded-xl focus:ring-2 focus:ring-mindful-sage-400 focus:border-mindful-sage-400 bg-white/60 backdrop-blur-sm transition-all duration-200"
                   required
                 />
               </div>
               
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                <label className="block text-sm font-medium text-mindful-earth-700 mb-2">🏷️ Category</label>
                 <input
                   type="text"
                   value={category}
                   onChange={(e) => setCategory(e.target.value)}
                   placeholder="e.g., Clothing, Food, Entertainment"
-                  className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full p-3 border border-mindful-sage-200 rounded-xl focus:ring-2 focus:ring-mindful-sage-400 focus:border-mindful-sage-400 bg-white/60 backdrop-blur-sm transition-all duration-200"
                   required
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+              <label className="block text-sm font-medium text-mindful-earth-700 mb-2">📝 Description</label>
               <input
                 type="text"
                 value={description}
diff --git a/reactSetup/tailwind.config.ts b/reactSetup/tailwind.config.ts
index 1cf4bea..1c15da4 100644
--- a/reactSetup/tailwind.config.ts
+++ b/reactSetup/tailwind.config.ts
@@ -6,8 +6,77 @@ export default {
   ],
   theme: {
     extend: {
-        fontFamily: {
+      fontFamily: {
         'inter': ['Inter', 'sans-serif'],
+      },
+      colors: {
+        // Mindful color palette with playful energy
+        mindful: {
+          // Soothing greens for growth and calm
+          sage: {
+            50: '#f6f8f6',
+            100: '#e9f1e9',
+            200: '#d3e3d3',
+            300: '#a8c9a8',
+            400: '#7ba87b',
+            500: '#5a8a5a',
+            600: '#477247',
+            700: '#3a5d3a',
+            800: '#2d4a2d',
+            900: '#1f331f',
+          },
+          // Warm earth tones for grounding
+          earth: {
+            50: '#faf9f7',
+            100: '#f3f1ed',
+            200: '#e8e3da',
+            300: '#d6ccba',
+            400: '#c0ad94',
+            500: '#a68d6d',
+            600: '#8f7355',
+            700: '#776147',
+            800: '#5e4d3a',
+            900: '#453a2d',
+          },
+          // Gentle blues for tranquility
+          sky: {
+            50: '#f5f9fc',
+            100: '#e8f3f8',
+            200: '#d1e7f1',
+            300: '#a6d0e4',
+            400: '#7bb4d3',
+            500: '#5697c2',
+            600: '#4279a3',
+            700: '#356184',
+            800: '#294c66',
+            900: '#1d3848',
+          },
+          // Playful but gentle accent colors
+          coral: {
+            50: '#fef7f5',
+            100: '#fdede8',
+            200: '#f9d5c9',
+            300: '#f2b5a0',
+            400: '#e88f73',
+            500: '#d16a4a',
+            600: '#b94d2c',
+            700: '#9a3e23',
+            800: '#7b321e',
+            900: '#5c2617',
+          },
+          lavender: {
+            50: '#f9f8fd',
+            100: '#f2f0fa',
+            200: '#e3def3',
+            300: '#cfc5e8',
+            400: '#b5a5db',
+            500: '#9684cb',
+            600: '#7b68b7',
+            700: '#64549a',
+            800: '#4f427c',
+            900: '#3b315d',
+          }
+        }
       }
     },
   },