@layer blocks {
  .badge {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--badge-font-family);
    font-size: var(--badge-font-size);
    letter-spacing: var(--badge-letter-spacing);
    line-height: var(--badge-line-height);
    padding: var(--badge-padding);
    border-radius: var(--badge-border-radius);
    background: var(--badge-background-color);
    color: var(--badge-color);
  }

  /* ── Status variants ────────────────────────────────────────── */

  .badge[data-status="today"] {
    --badge-background-color: var(--brand-tint);
    --badge-color: var(--brand);
  }

  .badge[data-status="overdue"] {
    --badge-background-color: var(--warn-tint);
    --badge-color: var(--warn);
  }

  .badge[data-status="soon"] {
    --badge-background-color: var(--gold-tint);
    --badge-color: var(--gold);
  }

  .badge[data-status="live"] {
    --badge-background-color: var(--brand-tint);
    --badge-color: var(--brand-light);
  }

  .badge[data-status="building"] {
    --badge-background-color: var(--gold-tint);
    --badge-color: var(--gold);
  }

  .badge[data-status="planned"] {
    --badge-background-color: var(--paper-3);
    --badge-color: var(--text-3);
  }
}