@layer components {
  tech-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: var(--color-tech-badge-bg);
    color: var(--color-tech-badge-text);
    white-space: nowrap;
  }

  .badge--newbie        { background: var(--color-success-subtle-bg);  color: var(--color-success-subtle-text);  }
  .badge--junior        { background: var(--color-info-subtle-bg);      color: var(--color-info-subtle-text);      }
  .badge--intermediate  { background: var(--color-warning-subtle-bg);   color: var(--color-warning-subtle-text);   }
  .badge--advanced      { background: var(--color-danger-subtle-bg);    color: var(--color-danger-subtle-text);    }
  .badge--guru          { background: var(--color-purple-subtle-bg);    color: var(--color-purple-subtle-text);    }
}