/* Shared Styles for EduKI */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Serif+Display&display=swap');

/* Custom Gradients - EduKI Logo & Brand */
.custom-gradient {
    background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 60%, #bfdbfe 100%);
}

@media (prefers-color-scheme: dark) {
    .custom-gradient {
        background: linear-gradient(135deg, #90c2ff 0%, #1457a9 60%, #3186ed 100%);
    }
}

.custom-gradient-AI {
    background: linear-gradient(135deg, #c8bffe 0%, #8460fa 60%, #c8bffe 100%);
}

@media (prefers-color-scheme: dark) {
    .custom-gradient-AI {
        background: linear-gradient(135deg, #90c2ff 0%, #1457a9 60%, #3186ed 100%);
    }
}

/* Custom Gradient Text Utilities */
.text-gradient-primary {
    background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 60%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback or override if needed */
}

.text-gradient-ai {
    background: linear-gradient(135deg, #c8bffe 0%, #8460fa 60%, #c8bffe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Scrollbar Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(203, 213, 225, 0.6);
    /* slate-300 with opacity */
    border-radius: 20px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.8);
    /* slate-400 */
}

@media (prefers-color-scheme: dark) {
    .thin-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(71, 85, 105, 0.6);
        /* slate-600 */
    }

    .thin-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(100, 116, 139, 0.8);
        /* slate-500 */
    }
}

/* Custom Gradient Hover Effects */
.custom-gradient-hover {
    transition: filter 0.2s ease;
}

.custom-gradient-hover:hover {
    filter: brightness(95%);
}

@media (prefers-color-scheme: dark) {
    .custom-gradient-hover:hover {
        filter: brightness(110%);
    }
}

/* Toggle Switch Gradient */
.peer:checked~.grad-toggle {
    background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 60%, #bfdbfe 100%);
}

@media (prefers-color-scheme: dark) {
    .peer:checked~.grad-toggle {
        background: linear-gradient(135deg, #90c2ff 0%, #1457a9 60%, #3186ed 100%);
    }
}

/* Aurora Animation (Blobs) */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}