@import "tailwindcss";

@theme {
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Merriweather", serif;
  --font-mono: "DM Sans", ui-monospace, SFMono-Regular, monospace;

  --color-neon-pink: #fb51fb;
  --color-neon-lime: #dcff4f;
  --color-martian-ink: #23251f;
  --color-accent-primary: #fb51fb;
  --color-accent-secondary: #dcff4f;

  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
  @keyframes marquee-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
  @keyframes marquee-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  --animate-spin-slow: spin 12s linear infinite;
  --animate-marquee: marquee 30s linear infinite;
  --animate-marquee-up: marquee-up 40s linear infinite;
  --animate-marquee-down: marquee-down 40s linear infinite;
  --animate-float: float 6s ease-in-out infinite;
  --animate-fade-in-up: fadeInUp 0.8s ease-out forwards;
}

@layer base {
  body {
    @apply bg-white text-neutral-900 font-sans;
  }
}