@layer components {
  /*
   * Status badge - inline pill indicator for status states
   * Use semantic variants (success, warning, danger, neutral) for flexibility
   */
  .status-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--block-space-xs) var(--inline-space);
    border-radius: var(--radius-full);
  }

  /* Semantic variants */
  .status-badge--success {
    background-color: oklch(from var(--color-green) l c h / 0.15);
    color: oklch(40% 0.15 145);
  }

  .status-badge--warning {
    background-color: oklch(from var(--color-orange) l c h / 0.15);
    color: oklch(45% 0.15 50);
  }

  .status-badge--danger {
    background-color: oklch(from var(--color-red) l c h / 0.15);
    color: oklch(45% 0.18 25);
  }

  .status-badge--neutral {
    background-color: var(--color-grey-200);
    color: var(--color-grey-600);
  }

  .status-badge--info {
    background-color: oklch(from var(--color-blue) l c h / 0.15);
    color: oklch(45% 0.15 255);
  }

  /* Sex variants */
  .status-badge--male {
    background-color: oklch(from var(--color-blue) l c h / 0.15);
    color: oklch(45% 0.15 255);
  }

  .status-badge--female {
    background-color: oklch(90% 0.1 350 / 0.3);
    color: oklch(45% 0.18 350);
  }

  /* Legacy aliases for backwards compatibility */
  .status-badge--active {
    background-color: oklch(from var(--color-green) l c h / 0.15);
    color: oklch(40% 0.15 145);
  }

  .status-badge--inactive {
    background-color: var(--color-grey-200);
    color: var(--color-grey-600);
  }
}