/* ─────────────────────────────────────────────────────────────────
   css/symbols-libraries.css

   Wave 4 (2026-05-08) — per-library tinted badges for the image
   picker's AAC Pictograms section. Each badge color is unique so
   a therapist can scan the grid and pick the aesthetic that fits
   their student (ARASAAC = bright color, Mulberry = soft blue,
   Sclera = high-contrast B/W).

   Own file because builder.css is at YELLOW threshold — adding
   per-library tints to a 989-line file would compound the sin
   the no-monolith rule warns about. Future libraries (OpenMoji,
   Bliss, OpenSymbols-aggregator) add a tint here, never in
   builder.css.

   LABEL: PILOT-READY. Visual styling only — no JS impact if
   missing (badges fall back to the generic .img-source rule
   already in builder.css).
───────────────────────────────────────────────────────────────── */

/* ARASAAC — bright Aragonese red, matches their brand. */
.image-picker-item .img-source.img-source-arasaac {
  background: #C41E3A;
  color: #FFF;
}

/* Mulberry — calm UK-school blue. */
.image-picker-item .img-source.img-source-mulberry {
  background: #2E5090;
  color: #FFF;
}

/* Sclera — black on stark white edge for the line-art aesthetic. */
.image-picker-item .img-source.img-source-sclera {
  background: #1A1A2E;
  color: #FFF;
}

/* Reserved for Wave 5 additions — keep this list aligned with the
   server-side LibKey union in /api/symbols/search/route.ts. Add a
   tint here when wiring a new library. */
.image-picker-item .img-source.img-source-openmoji   { background: #000; color: #FFF; }
.image-picker-item .img-source.img-source-bliss      { background: #6B4423; color: #FFF; }
.image-picker-item .img-source.img-source-opensymbols{ background: #5B6FB8; color: #FFF; }