main layout

src/main.css

@@ -2,6 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --primary: #990b00;
+    --secondary: #0c6672;
+    --accent: #bb1e10;
+    --error: #9a0d55;
+    --warning: #bb6210;
+    --info: #388994;
+    --success: #73ad0f;
+  }
+  .dark {
+    --primary: #ff0d00;
+    --secondary: #0f9aa9;
+    --accent: #bb1e10;
+    --error: #9a0d55;
+    --warning: #bb6210;
+    --info: #4ccbda;
+    --success: #73ad0f;
+  }
+}
+
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {
@@ -27,10 +48,34 @@
 
 html,
 body {
-  @apply h-full w-screen m-0 p-0 overflow-hidden bg-white;
+  @apply h-full w-screen m-0 p-0 overflow-hidden bg-gray-100;
   height: 100svh;
 }
 
 #app {
   @apply w-full h-full overflow-hidden flex flex-col;
 }
+
+button:not([headlessui]),
+a[button]:not([headlessui]) {
+  @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
+}
+
+button[primary]:not([primary="false"]),
+a[button][primary]:not([primary="false"]) {
+  @apply border border-transparent text-white bg-primary hover:bg-primary;
+}
+
+button[primary-outline]:not([primary-outline="false"]),
+a[button][primary-outline]:not([primary-outline="false"]) {
+  @apply border-2 border-primary text-black hover:bg-primary;
+}
+
+button:disabled {
+  @apply opacity-75 pointer-events-none;
+}
+
+input:not([type="checkbox"]),
+textarea {
+  @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
+}