: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;
}


/*!* Define color variables *!*/
/*:root {*/
/*    --modern-post-bg: #FFD4B3;      !* Lighter pastel peach *!*/
/*    --modern-bg: #D7E8FA;           !* Very light pastel blue *!*/
/*    --early-modern-bg: #D1E7FE;     !* Lightest pastel purple *!*/
/*    --medieval-bg: #E8FFF4;         !* Softer mint pastel green *!*/
/*    --present-day-bg: #FAE8AC;      !* Lighter muted yellow *!*/
/*    --ancient-bg: #F4D1AE;         !* Pastel Tan *!*/
/*    --town-bg: #D3D3D3;            !* Pastel Grey *!*/
/*    --townland-bg: #82D8A5;        !* Slightly darker pastel green *!*/
/*    --parish-bg: #A7C7E7;          !* Pastel Blue *!*/
/*    --barony-bg: #FFE29A;          !* Pastel Yellow *!*/
/*    --city-bg: #CFECA3;            !* Pastel Yellow *!*/
/*    --county-bg: #D7BDE2;          !* Pastel Purple *!*/
/*    --province-bg: #c9a14a;        !* Pastel Gold *!*/
/*}*/

/*!* Muted versions of background colors *!*/
/*:root {*/
/*    --muted-modern-post-bg: #fbeee3;*/
/*    --muted-modern-bg: #e6f1fb;*/
/*    --muted-early-modern-bg: #f8f2f7;*/
/*    --muted-medieval-bg: #eefaf5;*/
/*    --muted-present-day-bg: #fdf5dd;*/
/*    --muted-ancient-bg: #f8e8db;*/
/*    --muted-town-bg: #eeeeee;*/
/*    --muted-townland-bg: #d6f0e0;*/
/*    --muted-parish-bg: #dce8f3;*/
/*    --muted-barony-bg: #fff6da;*/
/*    --muted-city-bg: #e8f6d4;*/
/*    --muted-county-bg: #eee2f3;*/
/*    --muted-province-bg: #ede0c7;*/
/*}*/

/*!* Non-muted styles (default) *!*/
/*[data-value="Medieval"],*/
/*[data-value*="Medieval-400-1499"] {*/
/*    background-color: var(--medieval-bg);*/
/*}*/

/*[data-value="Early Modern"],*/
/*[data-value*="Early-Modern-1500-1749"] {*/
/*    background-color: var(--early-modern-bg);*/
/*}*/

/*[data-value="Modern"],*/
/*[data-value*="Modern-1750-1921"] {*/
/*    background-color: var(--modern-bg);*/
/*}*/

/*[data-value="Modern Post 1922"],*/
/*[data-value*="Modern-Post-1922"] {*/
/*    background-color: var(--present-day-bg);*/
/*}*/




/*.muted-color {*/
/*    opacity: 0.85;*/
/*}*/


/*!* Add more as needed for your other data-value options *!*/
/*.muted-badge[data-value*="Present-Day"] {*/
/*    background-color: var(--muted-present-day-bg);*/
/*}*/

/*.muted-badge[data-value*="Ancient"] {*/
/*    background-color: var(--muted-ancient-bg);*/
/*}*/

/*.muted-badge[data-value*="Town"] {*/
/*    background-color: var(--muted-town-bg);*/
/*}*/

/*.muted-badge[data-value*="Townland"] {*/
/*    background-color: var(--muted-townland-bg);*/
/*}*/

/*.muted-badge[data-value*="Parish"] {*/
/*    background-color: var(--muted-parish-bg);*/
/*}*/

/*.muted-badge[data-value*="Barony"] {*/
/*    background-color: var(--muted-barony-bg);*/
/*}*/

/*.muted-badge[data-value*="City"] {*/
/*    background-color: var(--muted-city-bg);*/
/*}*/

/*.muted-badge[data-value*="County"] {*/
/*    background-color: var(--muted-county-bg);*/
/*}*/

/*.muted-badge[data-value*="Province"] {*/
/*    background-color: var(--muted-province-bg);*/
/*}*/


/*!* Apply background colors *!*/
/*.badge-modern-post {*/
/*    background-color: var(--modern-post-bg);*/
/*}*/

/*.badge-modern {*/
/*    background-color: var(--modern-bg);*/
/*}*/

/*.badge-early-modern {*/
/*    background-color: var(--early-modern-bg);*/
/*}*/

/*.badge-medieval {*/
/*    background-color: var(--medieval-bg);*/
/*}*/

/*.badge-present-day {*/
/*    background-color: var(--present-day-bg);*/
/*}*/

/*.badge-ancient {*/
/*    background-color: var(--ancient-bg);*/
/*}*/

/*.badge-town {*/
/*    background-color: var(--town-bg);*/
/*}*/

/*.badge-townland {*/
/*    background-color: var(--townland-bg);*/
/*}*/

/*.badge-parish {*/
/*    background-color: var(--parish-bg);*/
/*}*/

/*.badge-barony {*/
/*    background-color: var(--barony-bg);*/
/*}*/

/*.badge-city {*/
/*    background-color: var(--city-bg);*/
/*}*/

/*.badge-county {*/
/*    background-color: var(--county-bg);*/
/*}*/

/*.badge-province {*/
/*    background-color: var(--province-bg);*/
/*}*/