/* Ported from otto_leptos/diy_otto/diy_otto/src/styles/fonts.css — same two
   Fontshare families the original React prototype used (Clash Display for
   headings via .font-display, Satoshi as the body sans). */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-display {
  font-family: 'Clash Display', 'Satoshi', sans-serif;
}

/* App.tsx used `animate-slide-up` on each chat message; not present in the
   original globals.css (likely came from a Tailwind animation plugin that
   wasn't ported) — defined directly here instead of pulling in a plugin for
   one keyframe. */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.25s ease-out;
}