/*
 * Tag — Figma "tag-article" (4219:1199) and "tag-tutoriel" (4488:6913).
 *
 * A small uppercase caption on a coloured background, used to categorise an
 * article, a tutorial or an event.
 *
 * Three of the six backgrounds are written as raw hex in the maquette and are
 * bound to no Figma variable. The designer confirmed this is deliberate — a
 * colour used once does not earn a variable — so they stay literal here rather
 * than being promoted to the palette or aliased behind a custom property.
 */

.mo-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mo-spacing-xxs) var(--mo-spacing-xs);
    border-radius: var(--mo-radius-sm);
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-caption);
    font-weight: var(--mo-font-weight-caption-strong);
    line-height: var(--mo-line-height-caption);
    text-transform: uppercase;
    white-space: nowrap;
}

.mo-tag--work {
    background-color: var(--mo-secondary-200);
}

.mo-tag--hub {
    background-color: var(--mo-primary-100);
}

.mo-tag--webinar {
    background-color: var(--mo-surface-secondary);
}

.mo-tag--mission {
    background-color: #ff9f9f;
}

.mo-tag--lab {
    background-color: #fbc291;
}

.mo-tag--tools {
    background-color: #b9e4f5;
}