/*
 * Badge / pill — small status and category labels (draft, posted, role
 * names, counts). Token-driven color: a variant sets `--badge-color` to
 * a palette anchor and the soft background / border / text are derived
 * from it via oklch(from …) — the same single-dial-per-hue pattern as
 * the flash banner. This is where the app gets its vibrant accents.
 */

@layer components {
  .badge {
    --badge-color: var(--color-slate-500);

    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid;
    font-size: var(--text-11);
    font-weight: 600;
    line-height: var(--leading-none);
    white-space: nowrap;

    background:   oklch(from var(--badge-color) 0.95 calc(c * 0.18) h);
    border-color: oklch(from var(--badge-color) 0.85 calc(c * 0.35) h);
    color:        oklch(from var(--badge-color) 0.42 calc(c * 0.9)  h);
  }

  .badge svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Hue variants — pull from the Tailwind ramps so the whole family
     stays in tune. */
  .badge--gray   { --badge-color: var(--color-slate-500); }
  .badge--indigo { --badge-color: var(--color-indigo-600); }
  .badge--blue   { --badge-color: var(--color-blue-600); }
  .badge--cyan   { --badge-color: var(--color-cyan-600); }
  .badge--green  { --badge-color: var(--color-green-600); }
  .badge--amber  { --badge-color: var(--color-amber-600); }
  .badge--orange { --badge-color: var(--color-orange-600); }
  .badge--red    { --badge-color: var(--color-red-600); }
  .badge--violet { --badge-color: var(--color-violet-600); }
  .badge--pink   { --badge-color: var(--color-pink-600); }

  /* Solid — filled fill for stronger emphasis (a single count chip,
     a "live" marker). */
  .badge--solid {
    background: var(--badge-color);
    border-color: var(--badge-color);
    color: var(--color-white);
  }

  /* Dot — a leading status dot in the badge color. */
  .badge__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--badge-color);
  }
}