Big cleanup for styling

frontend/src/assets/main.css

@@ -3,16 +3,59 @@
 @tailwind utilities;
 
 :root {
-    --h-background: #1C1C1D;
+    /* Branding Colors */
+    --hutopy-primary: #6B0065;
+    --hutopy-secondary: #A30E79;
+
+    /* UI COLORS */
+    --h-background: #201b20;
     --h-on-background: #e2e5e9;
-    --h-surface: #252728;
+    --h-surface: #252829;
     --h-on-surface: #e2e5e9;
-    --h-primary: #231F20;
-    --h-on-primary: #d9e1e1;
-    --h-secondary: #683B1E;
-    --h-on-secondary: #b0b3b8;
+    --h-primary: #1B1B1F;
+    --h-on-primary: #c5c8c8;
+    --h-secondary: #e7e5ea;
+    --h-on-secondary: #000000;
     --h-tertiary: #272A44;
     --h-on-tertiary: #bdb6b6;
     --h-error: #bc2f2f;
     --h-on-error: #ffffff;
-}
+}
+
+@layer components {
+    .btn {
+        @apply min-w-24 w-full;
+        @apply p-4;
+        @apply flex flex-nowrap gap-4 items-center justify-center;
+        @apply rounded-lg;
+        @apply capitalize text-base font-sans font-medium;
+        @apply w-fit px-10;
+    }
+
+    button.primary {
+        @apply btn bg-hPrimary text-hOnPrimary;
+    }
+
+    button.secondary {
+        @apply btn bg-hSecondary text-hOnSecondary;
+    }
+
+    div.card {
+        @apply w-[800px];
+        @apply rounded-xl p-10 m-4;
+        @apply bg-hSurface text-hOnSurface;
+    }
+
+    div.card-title {
+        @apply font-sans font-bold text-2xl;
+        @apply mb-8;
+    }
+
+    div.card-entry {
+        @apply mb-4;
+    }
+
+    div.card-actions {
+        @apply flex flex-row gap-6 justify-end;
+    }
+}