:root {
    --emergency-red: #dc2626;
    --warning-amber: #f59e0b;
    --safe-green: #10b981;
    --info-blue: #3b82f6;
    --neutral-gray: #6b7280;
}

.emergency-alert {
    background: linear-gradient(45deg, var(--emergency-red), #b91c1c);
    animation: urgentPulse 2s infinite;
}

@keyframes urgentPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.volunteer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.disaster-gradient {
            background: linear-gradient(135deg, #3e3e3e 0%, #2e2e2e 50%, #1e1e1e 100%);
}

.impact-number {
    background: linear-gradient(45deg, var(--emergency-red), var(--warning-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.sticky-header.is-stuck {
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    body.with-mobile-padding {
        padding-top: var(--header-offset, 0);
    }
}