/* 🏛️ Modern Global Layout Adjustments */
:root {
    --unza-green: #016701;
    --unza-dark-green: #013214;
    --section-bg: #aa7878;
    --card-shadow: rgba(0, 0, 0, 0.04);
    --card-hover-shadow: rgba(1, 103, 1, 0.08);
}

/* 🌙 Dynamic Theme Adaptive Tokens */
[data-bs-theme="dark"] {
    --unza-dark-green: #4ade80; /* Clean readable neon green indicator text for dark headers */
    --section-bg: #121212;
    /* --card-bg: #1e1e1e; */
    --card-shadow: rgba(0, 0, 0, 0.25);
    --card-hover-shadow: rgba(74, 222, 128, 0.15);
}

/* Balanced Section Spacing Framework */
.section-spacer {
    padding-top: 2rem;   /* Decreased from 5rem to tighten layout spacing gaps */
    padding-bottom: 2rem;
    background-color: var(--section-bg);
    transition: background-color 0.3s ease;
}

@media (max-width: 767.98px) {
    .section-spacer {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
    }
}

/* Soft grey accent zone styling */
.bg-light-accent {
    background-color: #fcfdfe !important;
    border-top: 1px solid rgba(0, 0, 0, 0.01);
    border-bottom: 1px solid rgba(0, 0, 0, 0.01);
}
[data-bs-theme="dark"] .bg-light-accent {
    background-color: #161616 !important; /* Low contrast dark variant surface fallback */
    border-color: rgba(255, 255, 255, 0.02);
}

/* 🎯 Component Design Consistency Controls */
.section-spacer h2, 
.section-spacer .section-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--unza-dark-green);
    margin-bottom: 0.75rem;
}

/* Modern Theme Adaptive Card System Rules */
.section-spacer .card {
    border: none !important;
    border-radius: 16px !important;
    background-color: var(--card-bg) !important; /* Dynamic structural color fallback tokens */
    box-shadow: 0 4px 20px var(--card-shadow) !important;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), 
                box-shadow 0.3s ease,
                background-color 0.3s ease !important;
}

.section-spacer .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px var(--card-hover-shadow) !important;
}

.section-spacer .card-img-top {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}