/*
 * Contribute portal base styles
 * Loaded after @vite to override Tailwind's preflight font.
 */

/* Font: Nunito for all contribute portal pages */
body, input, textarea, select, button {
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

/* Body background */
body.contribute-body {
    background: linear-gradient(180deg, #D0CCEE 0%, #FAFAFF 45%) fixed;
}

/* Nav gradient */
.gradient-bg {
    background: linear-gradient(135deg, #D0CCEE 0%, #C0C0EB 100%);
}

/* =====================
   Floating Hearts
   ===================== */
.hearts {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.heart {
    position: absolute;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.5rem;
    animation: float 6s ease-in-out infinite;
}

.heart:nth-child(1)  { left: 10%; top: 20%; animation-delay: 0s; }
.heart:nth-child(2)  { left: 20%; top: 60%; animation-delay: 1s;   font-size: 1rem; }
.heart:nth-child(3)  { left: 80%; top: 15%; animation-delay: 2s; }
.heart:nth-child(4)  { left: 85%; top: 70%; animation-delay: 0.5s; font-size: 1.2rem; }
.heart:nth-child(5)  { left: 5%;  top: 80%; animation-delay: 1.5s; font-size: 0.8rem; }
.heart:nth-child(6)  { left: 70%; top: 85%; animation-delay: 2.5s; }
.heart:nth-child(7)  { left: 30%; top: 10%; animation-delay: 3s;   font-size: 1rem; }
.heart:nth-child(8)  { left: 90%; top: 40%; animation-delay: 0.8s; font-size: 0.9rem; }
.heart:nth-child(9)  { left: 50%; top: 50%; animation-delay: 1.8s; font-size: 0.7rem; }
.heart:nth-child(10) { left: 60%; top: 30%; animation-delay: 3.5s; font-size: 1.1rem; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%       { transform: translateY(-15px) rotate(5deg); }
}

/* =====================
   Dark mode
   ===================== */
@media (prefers-color-scheme: dark) {
    body.contribute-body {
        background: linear-gradient(180deg, #111827 0%, #030712 100%) fixed;
        color: #e5e7eb;
    }

    .gradient-bg {
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    }

    /* Card backgrounds */
    .contribute-card {
        background-color: #1f2937;
        border-color: #374151;
    }

    .contribute-card h1, .contribute-card h2, .contribute-card h3,
    .contribute-card .font-medium, .contribute-card .font-semibold,
    .contribute-card .font-bold {
        color: #f9fafb;
    }

    .contribute-card .text-gray-500,
    .contribute-card .text-gray-600 {
        color: #9ca3af;
    }

    .contribute-card .border-gray-100,
    .contribute-card .divide-gray-100 > :not(:last-child) {
        border-color: #374151;
    }

    .contribute-card .hover\:bg-gray-50:hover {
        background-color: rgba(55, 65, 81, 0.5);
    }
}