fix: css themiing

app/api/galleries/[id]/images/route.ts

@@ -54,8 +54,6 @@ export async function GET(
     .select('*')
     .eq('user_id', userId)
     .single();
-    //console.log(subscription)
-    //console.log(gallery.tier)
     switch(gallery.tier){
       case "Tier 3":
         if(subscription?.tier!="Tier 3"){

app/api/galleries/route.ts

@@ -13,18 +13,15 @@ export async function POST(request: Request) {
       .from('galleries')
       .select('*')
       .ilike('name', `%${search}%`)
-      //console.log(error)
     return NextResponse.json(galleries);
   }
   else{
     // Rest of the code...
-    console.log(tags)
   let { data: galleries, error } = await supabase
     .from('galleries')
     .select('*')
     .contains('tags', tags) // Fix: Use contains instead of overlaps
     .ilike('name', `%${search}%`)
-    //console.log(error)
 
   return NextResponse.json(galleries);
   }

app/gallery/page.tsx

@@ -14,7 +14,6 @@ function PageComponent() {
 
   useEffect(() => {
     getData();
-    console.log(selectedGallery)
   }, [selectedGallery]);
 
    const closeGallery = () => {
@@ -43,7 +42,7 @@ function PageComponent() {
              aria-hidden="true"
            >
              <div
-               className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
+               className="absolute inset-0 bg-secondary-dark opacity-70 z-30"
                onClick={() => closeGallery()}
              ></div>
              <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">

app/globals.css

@@ -16,23 +16,7 @@
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
-.my-masonry-grid {
-  display: -webkit-box; /* Not needed if autoprefixing */
-  display: -ms-flexbox; /* Not needed if autoprefixing */
-  display: flex;
-  margin-left: -30px; /* gutter size offset */
-  width: auto;
-}
-.my-masonry-grid_column {
-  padding-left: 30px; /* gutter size */
-  background-clip: padding-box;
-}
 
-/* Style your items */
-.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
-  background: grey;
-  margin-bottom: 30px;
-}
 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scrollbar {
   -ms-overflow-style: none;  /* IE and Edge */
@@ -63,11 +47,6 @@
   }
 }
 
-@layer base {
-  * {
-    @apply border-foreground/20;
-  }
-}
 
 .animate-in {
   animation: animateIn 0.3s ease 0.15s both;

app/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({
           <SpeedInsights/>
           <Analytics/>
         </div>
-        <main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-neroshi-blue-900 to-neroshi-blue-950 overflow-hidden">
+        <main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-primary to-secondary overflow-hidden">
           {children}
         </main>
       </body>

app/login/page.tsx

@@ -30,7 +30,6 @@ export default async function Login({
       password,
     });
 
-    //console.log(error);
     if (error) {
       return redirect("/login?message=Could not authenticate user");
     }
@@ -54,7 +53,6 @@ export default async function Login({
       },
     });
 
-    //console.log(error);
     if (error) {
       return redirect("/login?message=Could not authenticate user");
     }
@@ -104,14 +102,14 @@ export default async function Login({
       <div className="flex text-white white">
         <SubmitButton
           formAction={signIn}
-          className="bg-neroshi-blue-500 hover:bg-neroshi-blue-400 rounded-md px-4 py-2 text-white mb-2 mx-1 w-1/2"
+          className="bg-success hover:bg-success-light rounded-md px-4 py-2 text-white mb-2 mx-1 w-1/2"
           pendingText="Signing In..."
         >
           Sign In
         </SubmitButton>
         <SubmitButton
           formAction={signUp}
-          className="bg-neroshi-blue-300 hover:bg-neroshi-blue-200 border border-foreground/20 rounded-md px-4 py-2 text-white mb-2 mx-1 w-1/2"
+          className="bg-info hover:bg-info-light border border-foreground/20 rounded-md px-4 py-2 text-white mb-2 mx-1 w-1/2"
           pendingText="Signing Up..."
         >
           Sign Up

components/neroshitron/galleries.tsx

@@ -23,7 +23,6 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
         gallerySelected(gallery);
     };
 
-    console.log(tags)
 
     const getData = async () => {
         const galleriesResponse = await fetch(`/api/galleries?search=` + searchState + '&nsfw=' + nsfwState, {
@@ -42,7 +41,7 @@ const Galleries = ({ nsfw, tags, search, gallerySelected }: TagProps) => {
     }, [tagsState]);
 
     return (
-        <div className="absolute inset-0 mx-auto ml-16 md:ml-0 pt-48 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-60 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0">
+        <div className="absolute inset-0 mx-auto ml-16 md:ml-0 pt-48 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-20 gap-x-4 animate-in overflow-y-scroll no-scrollbar z-0">
 
             {galleries && galleries.map((gallery: any, index) => (
                 <GalleryThumbnail

components/neroshitron/gallery.tsx

@@ -106,10 +106,10 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
 
     const renderButtons = () => {
         return (
-            <div className="z-20 bottom-10 fixed pt-4 bg-purple-900 bg-opacity-40 animate-in rounded-2xl" style={{ backdropFilter: 'blur(10px)' }}>
+            <div className="z-20 bottom-10 fixed text-white pt-4 bg-primary bg-opacity-90 animate-in rounded-2xl" style={{ backdropFilter: 'blur(10px)' }}>
                 <div className='grid grid-cols-4 pl-4 gap-4 pr-4'>
                     <button
-                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-neroshi-blue-900 hover:bg-neroshi-blue-800`}
+                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
                         onClick={() => close()}
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
@@ -117,7 +117,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
                         </svg>
                     </button>
                     <button
-                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
+                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-secondary hover:bg-secondary-light'}`}
                         onClick={() => previous()}
                         disabled={!selectedImage}
                     >
@@ -127,7 +127,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
 
                     </button>
                     <button
-                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
+                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-secondary hover:bg-secondary-light'}`}
                         onClick={() => next()}
                         disabled={!selectedImage}
                     >
@@ -136,7 +136,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
                         </svg>
                     </button>
                     <button
-                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`}
+                        className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-success hover:bg-success-light'}`}
                         onClick={() => selectedImage && handleDownload(selectedImage)}
                         disabled={!selectedImage}
                     >

components/neroshitron/gallery_thumbnail.tsx

@@ -63,30 +63,30 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
                             </div>
                             <div className="text-white flex justify-between">
                                 <div className="flex items-center">
-                                    <span className="bg-neroshi-blue-900   text-white mr-2 px-2 py-1 rounded-md text-sm flex items-center h-full">
+                                    <span className="bg-secondary text-white mr-2 px-2 py-1 rounded-md text-sm flex items-center h-full">
                                         <span className="text-center">{imageCount}</span>
                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="pl-2 size-6">
                                             <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                                         </svg>
                                     </span>
                                     {nsfwState && (
-                                        <span className=" bg-red-900 text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
+                                        <span className=" bg-error text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
                                     )}
                                     {subscription === "Free" && (
-                                        <span className=" bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
+                                        <span className=" bg-free text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
                                     )}
                                     {subscription === "Tier 1" && (
-                                        <span className=" bg-purple-600 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
+                                        <span className=" bg-tier1 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
                                     )}
                                     {subscription === "Tier 2" && (
-                                        <span className=" bg-pink-700 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
+                                        <span className=" bg-tier2 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
                                     )}
                                     {subscription === "Tier 3" && (
-                                        <span className=" bg-fuchsia-500 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
+                                        <span className=" bg-tier3 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
                                     )}
                                 </div>
                             </div>
-                            <div className="text-white flex justify-between">
+                            {/* <div className="text-white flex justify-between">
                                 <div>
                                     <div className="flex">
                                         {tagsState.map((tag, index) => (
@@ -100,11 +100,11 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, showNsfw, nsfw, subscr
                                         ))}
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </>
                 ) : (
-                    <div className="animate-pulse bg-neroshi-blue-950 rounded-3xl" style={{ width: '20rem', height: '20rem' }}></div>
+                    <div className="animate-pulse bg-secondary-light rounded-3xl" style={{ width: '20rem', height: '20rem' }}></div>
                 )}
             </div>
         </div>

components/neroshitron/navigation_bar.tsx

@@ -22,7 +22,7 @@ export default async function AuthButton() {
 
   const heads = headers()
   const currentPage = heads.get('x-path')
-
+console.log(currentPage)
   const getGravatarUrl = () => {
     if (user == null) {
       return;
@@ -37,12 +37,12 @@ export default async function AuthButton() {
   const url = getGravatarUrl();
   return (
     <div className="flex justify-center items-center pt-2 ">
-      <nav className="w-auto bg-neroshi-blue-300 bg-opacity-10  flex justify-center z-10 h-16 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
+      <nav className="w-auto bg-info bg-opacity-80  flex justify-center z-10 h-16 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
         <div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm">
           <div className="flex items-center gap-2 z-10">
             <Link
               href="/gallery"
-              className={`py-2 px-3 flex rounded-md no-underline ${currentPage === '/gallery' ? 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700' : 'bg-neroshi-blue-900 hover:bg-neroshi-blue-800'}`}
+              className={`py-2 px-3 flex rounded-md no-underline ${currentPage!="gallery" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
             >
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden  block">
                 <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
@@ -52,7 +52,7 @@ export default async function AuthButton() {
             </Link>
             <Link
               href="/livestream"
-              className={`py-2 px-3 flex rounded-md no-underline ${currentPage === '/gallery' ? 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700' : 'bg-neroshi-blue-900 hover:bg-neroshi-blue-800'}`}
+              className={`py-2 px-3 flex rounded-md no-underline  ${currentPage!="livestream" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
             >
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden  block">
                 <path strokeLinecap="round" strokeLinejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
@@ -61,7 +61,7 @@ export default async function AuthButton() {
             </Link>
             <Link
               href="/commissions"
-              className={`py-2 px-3 flex rounded-md no-underline ${currentPage === '/gallery' ? 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700' : 'bg-neroshi-blue-900 hover:bg-neroshi-blue-800'}`}
+              className={`py-2 px-3 flex rounded-md no-underline  ${currentPage!="commissions" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
             >
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden  block">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
@@ -70,7 +70,7 @@ export default async function AuthButton() {
             </Link>
             <Link
               href="/subscriptions"
-              className={`py-2 px-3 flex rounded-md no-underline ${currentPage === '/gallery' ? 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700' : 'bg-neroshi-blue-900 hover:bg-neroshi-blue-800'}`}
+              className={`py-2 px-3 flex rounded-md no-underline  ${currentPage!="subscriptions" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
             >
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden  block">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
@@ -82,7 +82,7 @@ export default async function AuthButton() {
             {(user != null) ? (
               <>
                 <form action={signOut}>
-                  <button className="py-2 px-4 ml-2 rounded-md no-underline bg-pink-950 hover:bg-pink-900">
+                  <button className="py-2 px-4 ml-2 rounded-md no-underline bg-error hover:bg-error-light">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 md:hidden ">
                       <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                     </svg>
@@ -94,7 +94,7 @@ export default async function AuthButton() {
             ) : (
               <Link
                 href="/subscriptions"
-                className={`ml-2 py-2 px-3 flex rounded-md no-underline ${currentPage === '/gallery' ? 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700' : 'bg-neroshi-blue-900 hover:bg-neroshi-blue-800'}`}
+                className={`ml-2 py-2 px-3 flex rounded-md no-underline  bg-success hover:bg-secondary`}
               >
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 lg:hidden  block">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />

components/neroshitron/search_input.tsx

@@ -56,7 +56,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputPro
   }, []);
 
   const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
-  console.log(tagOptions)
   return (
     <>
       <div className="relative md:w-full lg:w-1/2 mx-auto flex flex-col items-center justify-center z-10">
@@ -92,12 +91,13 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged }: SearchInputPro
                         setSelectedTagsInput([value])
                       }
                     }}
-                    value={selectedTagsInput} primaryColor={'neroshi-blue'} />
+                    value={selectedTagsInput} 
+                    primaryColor={"indigo"} />
                   <span className="flex items-center rounded rounded-l-none border-0 px-3 font-bold text-grey-100">
                     <button
                       onClick={() => { setNsfw(!nsfw) }}
                       type="button"
-                      className={`animate-in text-sm text-white font-bold py-1 w-16 px-2 rounded ml-2 ${nsfw ? "bg-pink-900 hover:bg-pink-800" : "bg-green-900 hover:bg-green-800"}`}
+                      className={`animate-in text-sm text-white font-bold py-1 w-16 px-2 rounded ml-2 ${nsfw ? "bg-error hover:bg-error-light" : "bg-success hover:bg-success-light"}`}
 
                     >
                       {nsfw ? "NSFW" : "SFW"}

components/neroshitron/tag_selector.tsx

@@ -14,8 +14,6 @@ const TagSelector = forwardRef<TagSelectorProps, { tagSearch: string, selectedTa
     const [tagSearch, setTagSearch] = useState<string>(props.tagSearch);
     const [selectedTags, setSelectedTags] = useState<string[]>(props.selectedTagsInput);
 
-    console.log()
-
     const handleTag = (tag: string) => {
         if (selectedTags.includes(tag)) {
             setSelectedTags(selectedTags.filter(t => t !== tag));

tailwind.config.js

@@ -16,31 +16,42 @@ module.exports = {
       },
       aspectRatio: {}, // enable aspect-ratio plugin
       textShadow: {
-        'pink-glow': '0 0 4px #524FFD, 0 0 4px #524FFD, 0 0 4px #524FFD, 0 0 4px #524FFD',
+        // 'pink-glow': '0 0 4px #524FFD, 0 0 4px #524FFD, 0 0 4px #524FFD, 0 0 4px #524FFD',
-        'purple-grey-glow': '0 0 4px #9f7aea, 0 0 15px #9f7aea, 0 0 20px #9f7aea, 0 0 25px #9f7aea',
-        'green-grey-glow': '0 0 4px #32CD32, 0 0 15px #32CD32, 0 0 20px #32CD32, 0 0 25px #32CD32',
       },
       colors: {
-        
+        'primary': '#201240',
-        "neroshi-blue": {
+        'primary-light': '#403260',
-          50: "#EBEBFF",
+        'primary-dark': '#100120',
-          100: "#D2D2FE",
+        'secondary': '#4F3D70',
-          200: "#A6A4FE",
+        'secondary-light': '#6F5D90',
-          300: "#7E7CFD",
+        'secondary-dark': '#2F1D50',
-          400: "#524FFD",
+        'free': '#04396F',
-          500: "#2522FC",
+        'free-light': '#04396F',
-          600: "#0703E2",
+        'free-dark': '#001A35',
-          700: "#0502AB",
+        'tier1': '#006197',
-          800: "#03026F",
+        'tier1-light': '#006197',
-          900: "#020137",
+        'tier1-dark': '#003D5E',
-          950: "#01001E"
+        'tier2': '#008BB3',
-        },
+        'tier2-light': '#4AC8E1',
-        background: "hsl(var(--background))",
+        'tier2-dark': '#005F7A',
-        foreground: "hsl(var(--foreground))",
+        'tier3': '#00B5C0',
-        btn: {
+        'tier3-light': '#6CE2E8',
-          background: "hsl(var(--btn-background))",
+        'tier3-dark': '#008B94',
-          "background-hover": "hsl(var(--btn-background-hover))",
+        'error': '#862117',
-        },
+        'error-light': '#C44C4C',
+        'error-dark': '#5C0D0D',
+        'success': '#00C9A6',
+        'success-light': '#20E9C6',
+        'success-dark': '#00A986',
+        'warning': '#E17558',
+        'warning-light': '#E39578',
+        'warning-dark': '#C15538',
+        'info': '#222140',
+        'info-light': '#424260',
+        'info-dark': '#020120',
+        'neutral': '#78639A',
+        'neutral-light': '#9883BA',
+        'neutral-dark': '#58427A',
       },
     },
   },
@@ -49,4 +60,4 @@ module.exports = {
     require('tailwindcss-textshadow'),
     require('@tailwindcss/aspect-ratio')
   ],
-};
+};