Upload styles/globals.css with huggingface_hub

styles/globals.css

@@ -7,32 +7,81 @@
 @layer base {
   html {
     scroll-behavior: smooth;
+    font-size: 16px;
   }
   
   body {
     font-family: 'Inter', system-ui, sans-serif;
+    line-height: 1.6;
+    color: #374151;
+    background-color: #f9fafb;
   }
   
   h1, h2, h3 {
     font-family: 'Playfair Display', serif;
+    line-height: 1.2;
+    letter-spacing: -0.025em;
+  }
+
+  /* Improved focus styles for accessibility */
+  *:focus {
+    outline: 2px solid #3b6fff;
+    outline-offset: 2px;
+  }
+
+  /* Skip to content link for screen readers */
+  .skip-to-content {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: #000;
+    color: #fff;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 4px;
+    z-index: 9999;
+  }
+
+  .skip-to-content:focus {
+    top: 6px;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl;
+    @apply bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white font-medium py-3 px-6 rounded-xl transition-all duration-200 shadow-soft hover:shadow-medium focus:ring-4 focus:ring-primary-200 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95;
   }
   
   .btn-secondary {
-    @apply bg-white hover:bg-gray-50 text-primary-700 font-medium py-3 px-6 rounded-lg border border-primary-200 transition-colors duration-200;
+    @apply bg-white hover:bg-gray-50 active:bg-gray-100 text-primary-700 font-medium py-3 px-6 rounded-xl border border-primary-200 hover:border-primary-300 transition-all duration-200 shadow-soft hover:shadow-medium focus:ring-4 focus:ring-primary-200 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95;
   }
   
+  .btn-ghost {
+    @apply text-gray-700 hover:text-primary-600 hover:bg-primary-50 font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:ring-4 focus:ring-primary-200;
+  }
+
   .card {
-    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100;
+    @apply bg-white rounded-2xl shadow-soft hover:shadow-medium transition-all duration-300 border border-gray-100 hover:border-primary-200;
   }
   
   .input-field {
-    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all duration-200;
+    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-primary-200 focus:border-primary-500 outline-none transition-all duration-200 bg-white hover:border-gray-400;
+  }
+
+  .search-input {
+    @apply w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-primary-200 focus:border-primary-500 outline-none transition-all duration-200 bg-white hover:border-gray-400 text-gray-900 placeholder-gray-500;
+  }
+
+  .tag {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 hover:bg-primary-100 hover:text-primary-800 transition-colors duration-200 cursor-pointer;
+  }
+
+  .category-card {
+    @apply bg-white rounded-2xl p-6 shadow-soft hover:shadow-medium transition-all duration-300 border border-gray-100 hover:border-primary-200 cursor-pointer group;
+  }
+
+  .prompt-card {
+    @apply bg-white rounded-xl p-6 shadow-soft hover:shadow-medium transition-all duration-300 border border-gray-100 hover:border-primary-200 group;
   }
 }
 
@@ -49,4 +98,19 @@
       radial-gradient(circle at 1px 1px, rgba(59, 111, 255, 0.1) 1px, transparent 0);
     background-size: 20px 20px;
   }
+
+  .glass-effect {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+  }
 }