@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-cream text-ink font-sans antialiased;
    }
    h1, h2, h3, h4 {
        @apply font-display text-ink;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3
               font-semibold transition-all duration-150 active:scale-95
               disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-primary { @apply btn bg-coral text-white shadow-soft hover:bg-coral-dark hover:shadow-lift; }
    .btn-mint    { @apply btn bg-mint text-white shadow-soft hover:bg-mint-dark; }
    .btn-ghost   { @apply btn bg-white text-ink border border-ink/10 hover:border-ink/20; }

    .card {
        @apply bg-white rounded-3xl shadow-soft border border-ink/5 p-6;
    }

    /* Kid zone: everything bigger, rounder, thumb-friendly */
    .kid-tile {
        @apply flex flex-col items-center justify-center gap-3 rounded-4xl
               min-h-tap p-8 text-2xl font-display font-semibold text-white
               shadow-lift transition-transform active:scale-95;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}