/* ================================================================== */
/* 4c. STATUS BADGES (Okabe-Ito palette)                               */
/* ================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-6);
  padding: 0 var(--sp-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-field);
  background: var(--tone-bg, var(--status-gray-bg));
  color: var(--tone-fg, var(--status-gray-fg));
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

button.status-badge,
a.status-badge {
  cursor: pointer;
}

button.status-badge:hover,
a.status-badge:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface-hover);
  text-decoration: none;
}

/*
 * Shared visual tones. Domain statuses stay table-specific; templates map each
 * status, event kind, or filter label to one of these presentation tones.
 */
[data-tone="info"] {
  --tone-bg: var(--status-blue-bg);
  --tone-fg: var(--status-blue-fg);
}

[data-tone="accent"] {
  --tone-bg: var(--status-purple-bg);
  --tone-fg: var(--status-purple-fg);
}

[data-tone="warning"] {
  --tone-bg: var(--status-amber-bg);
  --tone-fg: var(--status-amber-fg);
}

[data-tone="success"] {
  --tone-bg: var(--status-green-bg);
  --tone-fg: var(--status-green-fg);
}

[data-tone="danger"] {
  --tone-bg: var(--status-red-bg);
  --tone-fg: var(--status-red-fg);
}

[data-tone="muted"],
[data-tone="neutral"] {
  --tone-bg: var(--status-gray-bg);
  --tone-fg: var(--status-gray-fg);
}