/* Badge — SKIN. Edit per project; never the structure file. */

.sp-badge {
  --ink: #292929;
  --ink-muted: #5d5d5d;
  --ink-faint: #9e9e9e;
  --surface: #ffffff;
  --surface-subtle: #f7f7f7;
  --border: #e5e5e5;
  --accent-soft: #dbeafe;

  --radius-pill: 9999px;
  --font-ui: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-ui: -0.15px;
  --text-xs: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-instant: 150ms;

  /* Brandable. Tints are deliberately pale with a dark ink on top — the pair
     is what keeps text contrast usable, so change them together. */
  --sp-badge-good: #15803d;
  --sp-badge-good-bg: #dcfce7;
  --sp-badge-warn: #92400e;
  --sp-badge-warn-bg: #fef3c7;
  --sp-badge-bad: #b91c1c;
  --sp-badge-bad-bg: #fee2e2;
  --sp-badge-info: #1d4ed8;
  --sp-badge-focus: #3b82f6;
}

:root.dark .sp-badge,
[data-theme="dark"] .sp-badge {
  --ink: #ededed;
  --ink-muted: #a5a5a5;
  --ink-faint: #767676;
  --surface: #1c1c1e;
  --surface-subtle: #252528;
  --border: #2c2c2f;
  --accent-soft: #1e3355;

  /* Dark inverts the pairing: the tint becomes the dark member and the text
     the bright one. Carrying the light values across gives dark text on a
     near-black chip. */
  --sp-badge-good: #4ade80;
  --sp-badge-good-bg: #14321f;
  --sp-badge-warn: #fbbf24;
  --sp-badge-warn-bg: #33270c;
  --sp-badge-bad: #f87171;
  --sp-badge-bad-bg: #3a1717;
  --sp-badge-info: #93c5fd;
}

/* ---- Brassword site: Brass appearance uses the app's warm charcoal ladder. */
:root.dark[data-theme="brass"] .sp-badge {
  --ink: #f4f0e8;
  --ink-muted: #b9b2a5;
  --ink-faint: #7f786d;
  --surface: #2a2721;
  --surface-subtle: #171613;
  --surface-hover: #332f28;
  --border: #3b352b;
}