:root {
    --color-light: rgba(241, 242, 239, 1);
    --color-olive: rgba(159, 165, 111, 1);
    --color-yellow: rgba(242, 176, 55, 1);
    --color-orange: rgba(242, 114, 67, 1);
    --color-brown: rgba(114, 28, 9, 1);
}

.bg-custom-light { background-color: var(--color-light); }
.text-custom-brown { color: var(--color-brown); }
.text-custom-olive { color: var(--color-olive); }
.text-custom-orange { color: var(--color-orange); }
.text-custom-yellow { color: var(--color-yellow); }
.bg-custom-olive { background-color: var(--color-olive); }
.bg-custom-brown { background-color: var(--color-brown); }
.bg-custom-orange { background-color: var(--color-orange); }
.bg-custom-yellow { background-color: var(--color-yellow); }
.border-custom-olive { border-color: var(--color-olive); }
.border-custom-yellow { border-color: var(--color-yellow); }

.font-kr { font-family: 'Noto Sans KR', sans-serif; }
.font-sc { font-family: 'Noto Sans SC', sans-serif; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
.scroll-reveal { opacity: 0; }
.scroll-reveal.active { animation: slideUp 0.6s ease-out forwards; }
.delay-100 { animation-delay: 0.1s; }