/* BERRY */
.bg-berry     { background-color: #FAE1E1; }
.text-berry   { color: #CA3030; }
.badge-berry  { background-color: #FAE1E1; color: #CA3030; }

/* EMBER */
.bg-ember     { background-color: #FCE8DF; }
.text-ember   { color: #D35D28; }
.badge-ember  { background-color: #FCE8DF; color: #D35D28; }

/* GOLDEN SAND */
.bg-golden-sand    { background-color: #FCF4DE; }
.text-golden-sand  { color: #D1A61E; }
.badge-golden-sand { background-color: #FCF4DE; color: #D1A61E; }

/* FOREST */
.bg-forest    { background-color: #E4F5E2; }
.text-forest  { color: #45AC3A; }
.badge-forest { background-color: #E4F5E2; color: #45AC3A; }

/* RIVER */
.bg-river    { background-color: #DDF5F3; }
.text-river  { color: #18AC9C; }
.badge-river { background-color: #DDF5F3; color: #18AC9C; }

/* SKY */
.bg-sky    { background-color: #E0ECFC; }
.text-sky  { color: #2972D1; }
.badge-sky { background-color: #E0ECFC; color: #2972D1; }

/* LAVENDER */
.bg-lavender    { background-color: #EBE5F9; }
.text-lavender  { color: #6F47C1; }
.badge-lavender { background-color: #EBE5F9; color: #6F47C1; }

/* BLOSSOM */
.bg-blossom    { background-color: #F9E2ED; }
.text-blossom  { color: #C1397C; }
.badge-blossom { background-color: #F9E2ED; color: #C1397C; }

/* Small colored circles for list indicators */
.color-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.color-circle-berry       { background-color: #CA3030; }
.color-circle-ember       { background-color: #D35D28; }
.color-circle-golden-sand { background-color: #D1A61E; }
.color-circle-forest      { background-color: #45AC3A; }
.color-circle-river       { background-color: #18AC9C; }
.color-circle-sky         { background-color: #2972D1; }
.color-circle-lavender    { background-color: #6F47C1; }
.color-circle-blossom     { background-color: #C1397C; }

/* Inline label — combine with badge-* for colored candidate/item labels */
.color-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Swatch picker component */
.color-swatch {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px;
    border: 2px solid transparent;
    display: inline-block;
}
.color-swatch--selected {
    border-color: #333333;
}
.color-swatch__inner {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.color-swatch__none {
    background-color: #f5f5f5;
    color: #666666;
    border: 1px solid #dddddd;
}