@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.word-chip {
    @apply px-3 py-1 rounded-full text-sm font-medium transition-all;
}

.word-chip.valid {
    @apply bg-green-900/40 text-green-400 border border-green-800/50;
}

.word-chip.invalid {
    @apply bg-red-900/40 text-red-400 border border-red-800/50 cursor-pointer hover:bg-red-800/60;
}

.word-chip.corrected {
    @apply bg-blue-900/40 text-blue-400 border border-blue-800/50;
}

/* Light Mode Overrides */
body.light-mode {
    @apply bg-gray-100 text-gray-900;
}

body.light-mode .bg-gray-800 {
    @apply bg-white border-gray-200 shadow-lg;
}

body.light-mode .bg-gray-700 {
    @apply bg-gray-50 border-gray-300 text-gray-900;
}

body.light-mode .text-gray-400 {
    @apply text-gray-600;
}

body.light-mode .text-gray-300 {
    @apply text-gray-700;
}

body.light-mode .word-input {
    @apply bg-white border-gray-300 text-gray-900;
}

body.light-mode .word-chip.valid {
    @apply bg-green-100 text-green-700 border-green-200;
}

body.light-mode .word-chip.invalid {
    @apply bg-red-100 text-red-700 border-red-200;
}