/* * {

    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease;
} */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:ital,opsz,wght@1,9..144,300&display=swap');

button{
    cursor: pointer;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse-slow {

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

    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

:root {
    /* Light mode - Ocean Breeze */
    --bg-primary: #f0f9ff;
    --bg-secondary: #ffffff;
    --text-primary: #0b2b44;
    --text-secondary: #2c5a7a;
    --accent-primary: #0891b2;
    --accent-secondary: #2dd4bf;
    --accent-tertiary: #0284c7;
    --border-light: #cbd5e1;
    --card-bg: #ffffff;
    --badge-bg: #e6f0fa;
    --badge-text: #0b2b44;
    --marquee-bg: #0b2b44;
    --marquee-text: #f0f9ff;
    --hover-scale: scale(1.02);



    --font-heading: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-accent: 'Fraunces', serif;
}

/* Dark mode - Deep Ocean */
.dark-mode {
    --bg-primary: #082032;
    --bg-secondary: #0f2b3b;
    --text-primary: #e6f0fa;
    --text-secondary: #9fc5e0;
    --accent-primary: #2dd4bf;
    --accent-secondary: #0891b2;
    --accent-tertiary: #0284c7;
    --border-light: #1e3a4a;
    --card-bg: #0f2b3b;
    --badge-bg: #1e3a4a;
    --badge-text: #e6f0fa;
    --marquee-bg: #082032;
    --marquee-text: #e6f0fa;
}

.container {
    width: 86%;
    margin: auto;
}

.theme-toggle .active {
    background: var(--accent-primary);
    color: white;
}

.dark-mode {
    --bg-secondary: #0f172a;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --badge-bg: #1e293b;
    --border-light: #334155;
}

.dark-mode .theme-toggle {
    background: var(--badge-bg);
    border-color: var(--border-light);
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient-shift {
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}