@import "tailwindcss";

/* Class-based dark variant so Bedtime Mode toggle drives every dark: style */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #fbf8f2;
    color: #2c2523;
    overflow-x: hidden;
  }

  h1, h2, h3, .font-heading {
    font-family: 'Fredoka', 'Quicksand', sans-serif;
  }

  .font-hand {
    font-family: 'Patrick Hand', cursive;
  }

  .font-reading {
    font-family: 'Quicksand', 'Nunito', sans-serif;
  }
}

@layer components {
  /* Custom whimsical storybook effects */
  .book-shadow {
    box-shadow: 0 20px 40px -15px rgba(45, 25, 20, 0.22),
                0 0 0 1px rgba(0, 0, 0, 0.05),
                0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .book-spine {
    box-shadow: inset 18px 0 30px -10px rgba(0, 0, 0, 0.15),
                inset -4px 0 8px rgba(0, 0, 0, 0.05);
  }

  .paper-texture {
    background-color: #fdfaf5;
    background-image: radial-gradient(#ece4d4 0.75px, transparent 0.75px), radial-gradient(#ece4d4 0.75px, #fdfaf5 0.75px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
  }

  /* Dark paper texture for Bedtime Mode */
  .dark .paper-texture {
    background-color: #0f172a;
    background-image: radial-gradient(rgba(99, 102, 241, 0.25) 0.75px, transparent 0.75px), radial-gradient(rgba(99, 102, 241, 0.18) 0.75px, #0f172a 0.75px);
  }

  .animate-float-slow {
    animation: floatSlow 5s ease-in-out infinite;
  }

  .animate-pulse-gentle {
    animation: gentlePulse 3.5s ease-in-out infinite;
  }

  .animate-sparkle {
    animation: shimmerSparkle 3s ease-in-out infinite;
  }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes shimmerSparkle {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
  50% { transform: scale(1.15) rotate(90deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(180deg); opacity: 0.4; }
}