@layer blocks {
  /* Statuses are told apart by SHAPE, not hue, because the brand red and the
     overdue red are now the same colour:

       solid ink    → now / shipped   (today, live)
       ink outline  → ahead of you    (soon, building)
       red outline  → past due        (overdue)
       muted outline→ neither         (planned, recurring)

     Keeping the border on the base rule, transparent by default, means the
     outline variants do not change the badge's box size. */
  .badge {
    display: inline-flex;
    align-items: center;
    column-gap: 0.25em;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--badge-font-family);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    letter-spacing: var(--badge-letter-spacing);
    line-height: var(--badge-line-height);
    padding: var(--badge-padding);
    border: 1.5px solid var(--badge-border-color);
    border-radius: var(--badge-border-radius);
    background: var(--badge-background-color);
    color: var(--badge-color);
  }

  /* Classless SVGs size to 1lh globally. Inside a chip that would be 1.6×
     the type, so the recurring icon tracks 1em of the badge font instead. */
  .badge svg {
    width: 1em;
    height: 1em;
  }

  /* ── Solid ink: happening now ───────────────────────────────── */

  .badge[data-status="today"],
  .badge[data-status="live"] {
    --badge-background-color: var(--color-text);
    --badge-border-color: var(--color-text);
    --badge-color: var(--color-bg);
  }

  /* ── Ink outline: still ahead ───────────────────────────────── */

  .badge[data-status="soon"],
  .badge[data-status="building"] {
    --badge-background-color: transparent;
    --badge-border-color: var(--color-text);
    --badge-color: var(--color-text);
  }

  /* ── Red outline: past due ──────────────────────────────────── */

  .badge[data-status="overdue"] {
    --badge-background-color: transparent;
    --badge-border-color: var(--color-danger);
    --badge-color: var(--color-danger);
  }

  /* ── Muted outline: no urgency attached ─────────────────────── */

  .badge[data-status="planned"],
  .badge[data-status="recurring"] {
    --badge-background-color: transparent;
    --badge-border-color: var(--color-border-strong);
    --badge-color: var(--color-text-muted);
  }

  /* ── Tinted: a remark rather than a state ───────────────────── */

  .badge[data-status="accent"] {
    --badge-background-color: var(--color-accent-tint);
    --badge-border-color: transparent;
    --badge-color: var(--color-accent-strong);
  }
}