/* =========================================================================
   Component — badges / status pills
   -------------------------------------------------------------------------
   Colour NEVER carries meaning alone (DESIGN_TOKENS.md §4): every badge shows
   a label, and the semantic colour appears as the dot and the border.

   The ink is the neutral --sd-text, not the semantic foreground. In the LIGHT
   palette the semantic fg/bg pairs measure 3.5:1 – 4.2:1, which is AA for
   large text only — a 12 px pill needs 4.5:1. See LEARNING_FRONTEND.md
   L-FE-03.

   ---------------------------------------------------------------------------
   THE ACCENT SITS IN THE BORDER, NOT IN THE FILL (DESIGN_TOKENS.md §9.3)
   ---------------------------------------------------------------------------
   A semantic badge used to be a TINTED AREA outlined with a paler tint of the
   same tint (--sd-<n>-bg with --sd-<n>-bd). Two problems, and the second is
   the one a measurement finds:

   1. They do not stay accents. A catalogue card carries a category, a price
      model, up to three editorial badges and two rating chips; twelve cards
      is forty-eight tinted areas, and none of them is then an accent. Colour
      marks STATE and never decorates -- so the tint is spent on the state and
      the facets go quiet.

   2. The quiet version has MORE contrast, not less. --sd-<n>-bd on
      --sd-<n>-bg is a tint on a tint; the semantic colour itself on the sunk
      ground measures 4.29:1 – 4.53:1 in light and 4.96:1 – 7.33:1 in dark,
      clearing WCAG 1.4.11's 3:1 for a non-text indicator in every theme and
      every semantic. Making the badge calmer made its outline stronger.

      (The dark figure read 4.50 in the first cut, and 4.50 is --sd-error
      against --doc-panel, not against the sunk ground the sentence is about:
      one range, two grounds. The value was plausible, the direction
      conservative and the 3:1 conclusion unaffected, which is how it reached
      three files before anybody recomputed it.)

   The one exception is WARNING, which keeps its fill: a warning is the state
   that may take a whole area, and it is the only one, so the area still means
   something when it appears.

   The ink does NOT change -- that is L-FE-03 and it is unaffected. The
   semantic foregrounds as TEXT reach only 4.30:1 – 4.53:1 on the sunk ground
   in light, under the 4.5:1 a 12 px chip needs; --sd-text measures 13.76:1
   (light) and 12.82:1 (dark) on the same ground.
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sd-text);
  /* The recess, not --sd-surface-alt: that token is BELOW the surface in
     light and ABOVE it in dark, so a chip reading as "set into the card"
     read as "raised off it" in dark mode (L-FE-44). In light the two values
     are the same #F4F4F4, so this changes nothing there -- which is what a
     correct fix to a one-theme defect looks like. */
  background: var(--sd-sunk);
  border-color: var(--sd-border);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.badge-success {
  border-color: var(--sd-success);
}

.badge-success::before { background: var(--sd-success); }

/* The exception. A warning is the one state allowed a filled area, so the
   fill still means something wherever it turns up — AND it keeps a border, in
   the semantic colour like every other accent.
 *
 * The first cut removed the border here, reasoning "one hairline, never two"
 * (§9.2). That rule is about two LINES on one edge — a border and a shadow —
 * and a fill is not a line. Measured on the same two grounds throughout: the
 * borderless chip separates from the light panel by 1.17:1 and from the dark
 * recess by **1.01:1**, where the pale `--sd-warning-bd` it replaced managed
 * 1.37:1 and 1.73:1 — so the change made the one chip that signals a problem
 * harder to find than it was. (1.57:1 is the same border against
 * --doc-panel; the recess is the ground the other figure uses.)
 * `--sd-warning` itself measures 3.93:1 – 8.03:1 across all six ground/theme
 * combinations, so the chip is now both bordered and consistent. */
.badge-warning {
  background: var(--sd-warning-bg);
  border-color: var(--sd-warning);
}

.badge-warning::before { background: var(--sd-warning); }

.badge-error {
  border-color: var(--sd-error);
}

.badge-error::before { background: var(--sd-error); }

.badge-info {
  border-color: var(--sd-info);
}

.badge-info::before { background: var(--sd-info); }

.badge-muted::before { background: var(--sd-muted); }

/* --- A facet is not a state (DESIGN_TOKENS.md §9.3) ---------------------- *
 * A category, a price model, a language, a tag: something the listing IS,
 * not something that has HAPPENED to it. It carries no semantic colour and
 * no dot -- the dot is the state marker, and a dot in the neutral ink in
 * front of every facet is the noise this whole section is about.
 *
 * The double class beats `.badge::before` on specificity (0,2,1 against
 * 0,1,1), so no !important and no reliance on file order.
 * ------------------------------------------------------------------------ */

.badge-facet {
  color: var(--sd-text-soft);
  font-weight: 500;
}

.badge.badge-facet::before {
  display: none;
}