@theme {
    --color-primary: #3E48CE;
    --color-primary-hover: #2a3290;
    --color-dark: #0F172A;
    --color-dark-surface: #1E293B;
    --color-light: #F8FAFC;
    --font-outfit: "Outfit", sans-serif;

    --animate-fade-in-up: fadeInUp 0.5s ease-out forwards;
}

/* Global Transition Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base Styles */
body {
    font-family: var(--font-outfit);
    background-color: var(--color-light);
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
}

/* Utility */
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Clickable overrides */
a,
button,
input[type="button"],
input[type="submit"],
[role="button"] {
    cursor: pointer !important;
}

/* View Transitions */
@view-transition {
    navigation: auto;
}