/* Position-chip colors -- shared across every `.pos` badge in the site
 * (lineup timeline bars/chips, draft pool, team roster, depth chart,
 * waivers, trades, weekly scores, admin tables). One file, one place to
 * retune a color.
 *
 * Palette policy matches lineup_timeline.css: raw Tailwind palette values,
 * not DaisyUI theme tokens, so a chip looks right regardless of which
 * DaisyUI theme (`data-theme`) is active without per-theme tuning --
 * DaisyUI's internal token names aren't something to guess at here.
 *
 * Treatment is a quiet tint + border, not a solid fill: `AGENTS.md`
 * "Status badge conventions" already spends badge-error/badge-warning on
 * player availability (Out/IR/Suspended/Questionable/Doubtful), and that
 * status badge often renders directly beside the position chip on the same
 * row (see lineup_timeline_render.py). The position color must read as a
 * secondary, scannable accent -- never louder than an availability warning.
 *
 * `[data-pos]` gates every rule (rather than bare `.pos`) so a value with no
 * entry below -- e.g. `FLEX`, which is a roster slot, not a real position,
 * or anything new from pfs-api -- falls back to the plain `badge-ghost`
 * look instead of rendering half-styled.
 */

.pos[data-pos] {
  --pos: 100 116 139; /* slate-500 -- fallback for any unmapped position */
}

.pos[data-pos="QB"] {
  --pos: 139 92 246; /* violet-500 */
}

.pos[data-pos="RB"] {
  --pos: 16 185 129; /* emerald-500 */
}

.pos[data-pos="WR"] {
  --pos: 59 130 246; /* blue-500 */
}

.pos[data-pos="TE"] {
  --pos: 236 72 153; /* pink-500 -- not orange/amber: lineup_timeline.css
                       * already spends amber-500 on the "set by hand" rail,
                       * and orange read as too close to it beside a bar. */
}

.pos[data-pos="K"] {
  --pos: 20 184 166; /* teal-500 */
}

/* DST / DEF / D/ST: same position, spelled differently across the codebase
 * (shared-constants.json and the draft filter use "DST"; AGENTS.md says
 * "DEF"). Map every spelling to one rule rather than picking one. */
.pos[data-pos="DST"],
.pos[data-pos="DEF"],
.pos[data-pos="D/ST"] {
  --pos: 100 116 139; /* slate-500 */
}

.pos[data-pos] {
  background-color: rgb(var(--pos) / 0.18);
  border-color: rgb(var(--pos) / 0.45);
  color: inherit;
}