@layer components {
/* Tag — pill-shaped label. Figma node 666:61712 (small/green) +
   666:61724 (medium/green). Static, non-interactive label.

   Structure: <span class="psw-tag psw-tag--<size> psw-tag--<color>">…</span>

   Sizes (2px stroke is inset, so it doesn't add to the height):
     --sm    14/16 type, 4×8 padding   -> 24px tall  (Figma "Small")
     --md    16/20 type, 6×12 padding  -> 32px tall  (Figma "Medium")

   Colors (Figma color names): blue, brown, green, red, gray, purple, black
*/

.psw-tag {
    display: inline-flex;
    align-items: center;
    /* Figma: 2px Border/border-subtle drawn INSIDE the pill so it doesn't
       enlarge the tag (keeps small=24px / medium=36px tall). */
    box-shadow: inset 0 0 0 var(--border-width-md) var(--color-border-subtle);
    border-radius: var(--radius-max);                                 /* Figma: Radius/radius-max (pill) */
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* --- sizes ----------------------------------------------------------------- */

/* Figma small: Padding/padding-small × Padding/padding-xsmall + Label/Small (14/16) */
.psw-tag--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-label-sm);
    line-height: var(--text-label-sm--line-height);
}
/* Figma medium (node 1589:205845): 6×12 padding + Label/Medium (16/20) -> 32px tall */
.psw-tag--md {
    padding: 6px var(--space-3);
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
}

/* --- colors --------------------------------------------------------------- */
/* Color-named variants matching the Figma tag set (nodes 666:6170x). Each
   references an existing color family token; the semantic token families
   (info/success/danger/warning) are NOT renamed — see tokens.css. */

/* Figma node 666:61708 — Blue (Cobalt) */
.psw-tag--blue {
    background-color: var(--color-cobalt-100);             /* #e2ecfe */
    color: var(--color-cobalt-500);                        /* #186af2 */
}

/* Figma node 666:61710 — Brown (yellow/warning family) */
.psw-tag--brown {
    background-color: var(--color-warning-100);            /* #fff3db */
    color: var(--color-warning-600);                       /* #9c7529 */
}

/* Figma node 666:61712 — Green (Basil; same pair the status pill in the emails uses) */
.psw-tag--green {
    background-color: var(--color-basil-100);              /* #eaf9f1 */
    color: var(--color-basil-500);                         /* #048848 */
}

/* Figma node 666:61714 — Red */
.psw-tag--red {
    background-color: var(--color-danger-100);             /* #ffedeb */
    color: var(--color-danger-400);                        /* #e11900 */
}

/* Figma node 666:61716 — Gray */
.psw-tag--gray {
    background-color: var(--color-gray-200);               /* #f0f0f0 */
    color: var(--color-gray-500);                          /* #757575 */
}

/* Figma node 666:61720 — Purple (the violet family; Figma names the tag
   "Purple" but the color "Violet", so the class and the token differ). */
.psw-tag--purple {
    background-color: var(--color-violet-100);             /* #e7e1f3 */
    color: var(--color-violet-400);                        /* #7751b8 */
}

/* Figma node 666:61717 — Black (gray-200 bg + gray-700 text) */
.psw-tag--black {
    background-color: var(--color-gray-200);               /* #f0f0f0 */
    color: var(--color-gray-700);                          /* #0f0f0f */
}
}