@layer components {
  /* ==========================================================================
     Status Badge Component
     ========================================================================== */

  .status-badge {
    display: inline-block;
    padding-block: 0.25em;
    padding-inline: 0.75em;
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--btn-radius);
    white-space: nowrap;
  }

  /* Status variants */
  .status-badge--incoming {
    background-color: oklch(92% 0.04 280);
    color: oklch(40% 0.12 280);
  }

  .status-badge--not_now {
    background-color: oklch(var(--lch-canvas-alt));
    color: oklch(var(--lch-ink-muted));
  }

  .status-badge--todo {
    background-color: oklch(92% 0.06 260);
    color: oklch(45% 0.12 260);
  }

  .status-badge--in_progress {
    background-color: oklch(var(--lch-orange-light));
    color: oklch(50% 0.12 55);
  }

  .status-badge--blocked {
    background-color: oklch(var(--lch-negative-light));
    color: oklch(45% 0.15 25);
  }

  .status-badge--done {
    background-color: oklch(var(--lch-positive-light));
    color: oklch(40% 0.15 145);
  }
}