:root {
    --brand-purple: #7d0097;
    --brand-purple-dark: #6a0080;
    --brand-orange: #f8b227;
    --brand-orange-light: #fde68a; /* A lighter shade for backgrounds */
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f8fafc; /* slate-50 */
}
.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

.bg-brand-purple { background-color: var(--brand-purple); }
.bg-brand-purple-dark { background-color: var(--brand-purple-dark); }
.bg-brand-orange { background-color: var(--brand-orange); }
.bg-brand-orange-light { background-color: var(--brand-orange-light); }
.text-brand-purple { color: var(--brand-purple); }
.text-brand-orange { color: var(--brand-orange); }
.border-brand-orange { border-color: var(--brand-orange); }
.hover\:bg-brand-orange-dark:hover { background-color: #d69e2e; /* A darker orange for hover */ }
.hover\:text-brand-orange:hover { color: var(--brand-orange); }

/* Custom focus ring color */
.focus\:ring-brand-orange:focus {
    --tw-ring-color: var(--brand-orange);
}
#main-header.scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8); /* white with opacity */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
[x-cloak] { display: none !important; }