1 files changed, 43 insertions, 56 deletions
diff --git a/src/app.css b/src/app.css
index c04131bd..fca47b23 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,50 +1,59 @@
+/* 1) Load Tailwind first */
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
-@font-face {
-  font-family: "PublicSans";
-  src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf")
-    format("truetype");
+/* 2) Register DaisyUI themes */
+@plugin "daisyui" {
+  themes: lofi --default, black --prefersdark;
 }
 
-html {
-  font-family: PublicSans, sans-serif;
+@plugin "daisyui/theme" {
+  name: "lofi";
+  default: true;
+  --gradient: #C3CFE2;
+  --color-error: #b91c1c;
 }
 
-::selection {
-  color: black;
-  background: #eaf2ff;
+@plugin "daisyui/theme" {
+  name: "black";
+  prefersdark: true;
+  --gradient: #C3CFE2;
+  --color-secondary: #CCC;
+  --color-error: #f87171;
 }
 
-:fullscreen {
-  background-color: white;
-}
+/* 3) Tell Tailwind which layers we’ll @apply from */
+@reference utilities;
+@reference components;
 
-input:not([type="range"]) {
-  @apply input
+/* 4) Now your custom CSS that uses @apply */
+.btn-menu {
+  @apply flex justify-center items-center bg-base-100 p-2 rounded-full
+         w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl;
 }
 
-.input {
-  @apply input-lg input-primary;
+@font-face {
+  font-family: "PublicSans";
+  src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf") format("truetype");
 }
 
-textarea {
-  @apply textarea textarea-lg textarea-primary;
-}
+html { font-family: PublicSans, sans-serif; }
 
-select {
-  @apply select select-lg select-primary;
-}
+::selection { color: black; background: #eaf2ff; }
+:fullscreen { background-color: white; }
 
-input:not([type="range"]), textarea, select, .input  {
-  @apply w-full rounded-2xl;
-}
+/* Note: @apply-ing DaisyUI component classes requires components reference */
+.input { @apply input-lg input-primary h-16 px-4; }
+
+/* If you want to *turn* native inputs into DaisyUI inputs via @apply: */
+input:not([type="range"]) { @apply input input-lg input-primary h-16 px-4; }
+textarea { @apply textarea textarea-lg textarea-primary py-4; }
+select { @apply select select-lg select-primary h-16 px-4; }
 
-textarea:focus, textarea:focus-within, .input:focus, .input:focus-within {
-  @apply outline-offset-0;
+input:not([type="range"]), textarea, select, .input  {
+  @apply rounded-2xl w-full;
 }
 
 input.clean, textarea.clean {
@@ -56,33 +65,11 @@ input.clean, textarea.clean {
   box-shadow: none !important;
 }
 
-.btn {
-  @apply rounded-2xl btn-lg btn-block outline-none
-}
-
-@plugin "daisyui" {
-  themes: light --default, dark --prefersdark;
-}
-
-@plugin "daisyui/theme" {
-  name: "light";
-  default: true;
-
-  --gradient: #C3CFE2;
-  --color-error: #b91c1c; 
-  --color-primary: #000;
-  --color-secondary: #111;
-}
-
-@plugin "daisyui/theme" {
-  name: "dark";
-  prefersdark: true;
-
-  --gradient: #C3CFE2;
-  --color-primary: #FFF;
-  --color-secondary: #CCC;
-  --color-error: #f87171;
-}
+button { cursor: pointer !important; }
+.btn { @apply rounded-2xl btn-lg btn-block outline-none h-16 cursor-pointer; }
 
-:root, [data-theme="dark"] {
+@layer components {
+  :where(input, textarea, select, .input, .textarea, .select) {
+    outline-offset: 0 !important;
+  }
 }