/* Custom styles for the word counter application */
:root {
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation styles */
.nav-link {
    @apply text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-blue-600 dark:text-blue-400;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

/* Stat card styles */
.stat-card {
    @apply bg-gray-50 dark:bg-gray-700 p-4 rounded-md text-center transition-all duration-200 hover:shadow-md;
}

/* Textarea auto-expand */
.auto-expand {
    min-height: 120px;
    max-height: 400px;
    resize: none;
}

/* File upload styles */
.file-upload-hover {
    @apply border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20;
}

/* Toast animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: slideInRight 0.3s var(--transition-timing);
}

.toast-exit {
    animation: slideOutRight 0.3s var(--transition-timing);
}

/* FAQ accordion styles */
.faq-question:hover .faq-icon {
    @apply text-blue-600 dark:text-blue-400;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--transition-timing), padding 0.3s var(--transition-timing);
}

.faq-answer.show {
    max-height: 200px;
    padding: 1rem;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Progress bar */
.progress-bar {
    @apply bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply bg-blue-600 h-full transition-all duration-300 ease-out;
}

/* Focus improvements for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .stat-card {
        @apply p-3;
    }
    
    .stat-card .text-2xl {
        @apply text-xl;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-before {
        page-break-before: always;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply border-2 border-blue-800;
    }
    
    .btn-secondary {
        @apply border-2 border-gray-600;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}