/* Semantic tone helpers (text color + soft background). */

.tone-blue,
.tray-circle.tone-blue {
  color: var(--blue-strong);
  background: var(--blue);
}

.tone-coral,
.tray-circle.tone-coral {
  color: var(--coral-strong);
  background: var(--coral);
}

.tone-mint,
.tray-circle.tone-mint {
  color: var(--mint-strong);
  background: var(--mint);
}

.tone-yellow,
.tray-circle.tone-yellow {
  color: var(--yellow-strong);
  background: var(--yellow);
}

.tone-lilac,
.tray-circle.tone-lilac {
  color: var(--lilac-strong);
  background: var(--lilac);
}