:root {
    /* Medieval Colors */
    --medieval-color: #76335A;
    --medieval-muted-color: #FFDCE8;

    /* Early Modern Colors */
    --early-modern-color: #006595;
    --early-modern-muted-color: #D1E7FE;

    /* Modern Colors */
    --modern-color: #4D3E78;
    --modern-muted-color: #EADFF8;

    /* Modern Post Colors */
    --modern-post-color: #185642;
    --modern-post-muted-color: #D6EDD9;


    /* Present Day Colors */
    --present-day-color: #185642;
    --present-day-muted-color: #D6EDD9;
}



/* Theme Mappings */

.present-day-theme {
    --period-color: var(--present-day-color);
    --period-muted-color: var(--present-day-muted-color);
}


.modern-theme {
    --period-color: var(--modern-color);
    --period-muted-color: var(--modern-muted-color);
}

.modern-post-theme {
    --period-color: var(--modern-post-color);
    --period-muted-color: var(--modern-post-muted-color);
}

.modern-post-1922-theme {
    --period-color: var(--modern-post-color);
    --period-muted-color: var(--modern-post-muted-color);
}


.early-modern-theme {
    --period-color: var(--early-modern-color);
    --period-muted-color: var(--early-modern-muted-color);
}

.medieval-theme {
    --period-color: var(--medieval-color);
    --period-muted-color: var(--medieval-muted-color);
}



/* Utility classes */
.period-bg {
    background-color: var(--period-color);
}

.period-muted-bg {
    background-color: var(--period-muted-color);
    color: var(--period-color);

}

.period-text {
    color: var(--period-color);
}

.period-muted-text {
    color: var(--period-muted-color);

}

/* Custom Button — no Bootstrap */
.period-btn,
.period-btn-muted {
    display: inline-block;
    padding: 8px;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    background-color: var(--period-color);
    color: #fff;
}




.period-btn-muted {
    background-color: var(--period-muted-color) !important;
    border: 1px solid var(--period-color) !important;
    color: #fff !important;
}


.badge.period-muted-bg, .badge-rounded.period-muted-bg {
    border: 2px solid var(--period-color) !important;
    color: var(--period-color) !important;
    font-weight: 500;
}


/* Medieval Muted Badge */
[data-value="Medieval"],
[data-value*="Medieval-400-1499"] {
    background-color: var(--medieval-muted-color) !important;
    border: 2px solid var(--medieval-color) !important;
    color: var(--medieval-color) !important;
    font-weight: 500 !important;
}

/* Early Modern Muted Badge */
[data-value="Early Modern"],
[data-value*="Early-Modern-1500-1749"] {
    background-color: var(--early-modern-muted-color) !important;
    border: 2px solid var(--early-modern-color) !important;
    color: var(--early-modern-color) !important;
    font-weight: 500 !important;
}

/* Modern Muted Badge */
[data-value="Modern"],
[data-value*="Modern-1750-1921"] {
    background-color: var(--modern-muted-color) !important;
    border: 2px solid var(--modern-color) !important;
    color: var(--modern-color) !important;
    font-weight: 500 !important;
}
[data-value="Modern"],
[data-value*="Modern-1750-1922"] {
    background-color: var(--modern-muted-color) !important;
    border: 2px solid var(--modern-color) !important;
    color: var(--modern-color) !important;
    font-weight: 500 !important;
}

/* Modern Post 1922 Badge */
[data-value="Modern Post 1922"],
[data-value*="Modern-Post-1922"] {
    background-color: var(--present-day-muted-color) !important;
    border: 2px solid var(--present-day-color) !important;
    color: var(--present-day-color) !important;
    font-weight: 500 !important;
}

/* Present-Day Vocabulary Badge */
[data-value="https://www.w3id.org/virtual-treasury/vocabulary#Present-Day"],
[data-value*="Modern-Post-1922"] {
    background-color: var(--present-day-muted-color) !important;
    border: 2px solid var(--present-day-color) !important;
    color: var(--present-day-color) !important;
    font-weight: 500 !important;
}