simbarag/raggr-frontend/src/App.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
@import "tailwindcss";

@theme {
  /* === Animal Crossing × Claude Palette === */

  /* Backgrounds */
  --color-cream: #FAF8F2;
  --color-cream-dark: #F0EBDF;
  --color-warm-white: #FFFDF9;

  /* Forest / Nook Green system */
  --color-forest: #2A4D38;
  --color-forest-mid: #345E46;
  --color-forest-light: #4D7A5E;
  --color-leaf: #5E9E70;
  --color-leaf-dark: #3D7A52;
  --color-leaf-light: #B8DEC4;
  --color-leaf-pale: #EBF7EE;

  /* Amber / warm accents */
  --color-amber-glow: #E8943A;
  --color-amber-dark: #C97828;
  --color-amber-soft: #F5C882;
  --color-amber-pale: #FFF4E0;

  /* Neutrals */
  --color-charcoal: #2C2420;
  --color-warm-gray: #7A7268;
  --color-sand: #DECFB8;
  --color-sand-light: #EDE3D4;
  --color-blush: #F2D1B3;

  /* Sidebar */
  --color-sidebar-bg: #2A4D38;
  --color-sidebar-hover: #345E46;
  --color-sidebar-active: #3D6E52;

  /* Fonts */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  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 ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-warm-gray); }

/* ── Markdown in answer bubbles ─────────────────────── */
.markdown-content p { margin: 0.5em 0; line-height: 1.7; }
.markdown-content p:first-child { margin-top: 0; }
.markdown-content p:last-child { margin-bottom: 0; }

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 1em 0 0.4em;
  line-height: 1.3;
  color: var(--color-charcoal);
}
.markdown-content h1 { font-size: 1.2rem; }
.markdown-content h2 { font-size: 1.05rem; }
.markdown-content h3 { font-size: 0.95rem; }

.markdown-content ul,
.markdown-content ol { padding-left: 1.4em; margin: 0.5em 0; }
.markdown-content li { margin: 0.3em 0; line-height: 1.6; }

.markdown-content code {
  background: rgba(0,0,0,0.06);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  font-size: 0.85em;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.markdown-content pre {
  background: var(--color-charcoal);
  color: #F0EBDF;
  padding: 1em 1.1em;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0.8em 0;
}
.markdown-content pre code { background: none; padding: 0; color: inherit; }

.markdown-content a {
  color: var(--color-leaf-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-content blockquote {
  border-left: 3px solid var(--color-amber-soft);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--color-warm-gray);
  font-style: italic;
}

.markdown-content strong { font-weight: 700; }
.markdown-content em { font-style: italic; }

/* ── Animations ─────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message-enter {
  animation: fadeSlideUp 0.3s ease-out forwards;
}

@keyframes catPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }
  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; }

@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;
}

/* ── Toggle switch ──────────────────────────────────── */
.toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: var(--color-sand);
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-track.checked { background: var(--color-leaf); }
.toggle-thumb {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 99px;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-track.checked .toggle-thumb { transform: translateX(16px); }