/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-emergency { color: var(--emergency); }
.text-white { color: white; }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--primary); }
.bg-light { background-color: var(--bg-light); }
.bg-white { background-color: var(--bg-white); }

.m-0 { margin: 0; }
.mb-8 { margin-bottom: 0.5rem; }
.mb-16 { margin-bottom: 1rem; }
.mb-24 { margin-bottom: 1.5rem; }
.mb-32 { margin-bottom: 2rem; }
.mb-40 { margin-bottom: 2.5rem; }
.mb-48 { margin-bottom: 3rem; }
.mb-64 { margin-bottom: 4rem; }
.mb-80 { margin-bottom: 5rem; }

.mt-16 { margin-top: 1rem; }
.mt-32 { margin-top: 2rem; }
.mt-48 { margin-top: 3rem; }
.mt-64 { margin-top: 4rem; }

.w-full { width: 100%; }
.max-w-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }

.hidden { display: none !important; }
.visible { display: block; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.rounded-lg { border-radius: 12px; }
.border { border: 1px solid var(--border); }

/* Animation Classes */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(0.95); }

.animate-in {
    opacity: 1 !important;
    transform: translate(0) scale(1) !important;
}

.fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
