yeet

raggr-frontend/src/App.css

@@ -1,7 +1,170 @@
 @import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
+
+@theme {
+  --color-cream: #FBF7F0;
+  --color-cream-dark: #F3EDE2;
+  --color-warm-white: #FFFDF9;
+  --color-amber-glow: #E8943A;
+  --color-amber-soft: #F5C882;
+  --color-amber-pale: #FFF0D6;
+  --color-forest: #2D5A3D;
+  --color-forest-light: #3D763A;
+  --color-forest-pale: #E8F5E4;
+  --color-charcoal: #2C2420;
+  --color-warm-gray: #8A7E74;
+  --color-sand: #D4C5B0;
+  --color-sand-light: #E8DED0;
+  --color-blush: #F2D1B3;
+  --color-sidebar-bg: #2C2420;
+  --color-sidebar-hover: #3D352F;
+  --color-sidebar-active: #4A3F38;
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
 
 body {
-	margin: 0;
-	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-	background-color: #F9F5EB;
+  margin: 0;
+  font-family: var(--font-body);
+  background-color: var(--color-cream);
+  color: var(--color-charcoal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-sand);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-warm-gray);
+}
+
+/* Markdown content styling in answer bubbles */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+.markdown-content h1 { font-size: 1.25rem; }
+.markdown-content h2 { font-size: 1.1rem; }
+.markdown-content h3 { font-size: 1rem; }
+
+.markdown-content p {
+  margin: 0.5em 0;
+  line-height: 1.65;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.markdown-content li {
+  margin: 0.25em 0;
+  line-height: 1.6;
+}
+
+.markdown-content code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.88em;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.markdown-content pre {
+  background: var(--color-charcoal);
+  color: #F3EDE2;
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.markdown-content pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+}
+
+.markdown-content a {
+  color: var(--color-forest);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.markdown-content blockquote {
+  border-left: 3px solid var(--color-amber-glow);
+  padding-left: 1em;
+  margin: 0.75em 0;
+  color: var(--color-warm-gray);
+  font-style: italic;
+}
+
+/* Loading skeleton animation */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-sand-light) 25%,
+    var(--color-cream) 50%,
+    var(--color-sand-light) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+/* Fade-in animation for messages */
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message-enter {
+  animation: fadeSlideUp 0.35s ease-out forwards;
+}
+
+/* Subtle pulse for loading dots */
+@keyframes catPulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+.loading-dot {
+  animation: catPulse 1.4s ease-in-out infinite;
+}
+.loading-dot:nth-child(2) { animation-delay: 0.2s; }
+.loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+/* Textarea focus glow */
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-amber-soft);
 }