/*
 * Signal and Echo design system: the site tag part (site profile, issue 164; .claude/reference/site-profile.md s4).
 *
 * <span class="sds-tag" data-variant="neutral|accent|success|warning|danger">: an outlined label in
 * the eyebrow role and font.ui, with corners at tag.radius (default radius.xs). A tag never acts; a
 * chip or a button acts. The kit badge is the filled pill; a tag is the site's square outline.
 * *
 * Colors: neutral is text-muted in a line-strong outline (no variant means neutral); accent is
 * accent-text, text and outline. The status variants keep color.text and draw the status color on
 * the outline only: the contract holds success, warning and danger at 3:1 on bg (a UI line), not
 * 4.5:1 (text), so the words stay readable in every theme and the outline carries the status.
 * The background is transparent: a tag sits on the page, a card or a post row.
 * Every value is a token; the only literals are 0 and unitless numbers.
 */

/* sds-claims: tag */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: var(--sds-space-1) var(--sds-space-2);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-tag-radius);
    background: transparent;
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-ui);
    font-size: max(var(--sds-type-min-size), calc(var(--sds-type-eyebrow-size) * var(--sds-type-scale)));
    font-weight: var(--sds-type-eyebrow-weight);
    letter-spacing: var(--sds-type-eyebrow-tracking);
    line-height: var(--sds-type-eyebrow-line-height);
    text-transform: var(--sds-type-eyebrow-transform);
    white-space: nowrap;
    vertical-align: middle;
  }

  .sds-tag:where([data-variant="neutral"]) {
    border-color: var(--sds-color-line-strong);
    color: var(--sds-color-text-muted);
  }

  .sds-tag:where([data-variant="accent"]) {
    border-color: var(--sds-color-accent-text);
    color: var(--sds-color-accent-text);
  }

  .sds-tag:where([data-variant="success"]) {
    border-color: var(--sds-color-success);
    color: var(--sds-color-text);
  }

  .sds-tag:where([data-variant="warning"]) {
    border-color: var(--sds-color-warning);
    color: var(--sds-color-text);
  }

  .sds-tag:where([data-variant="danger"]) {
    border-color: var(--sds-color-danger);
    color: var(--sds-color-text);
  }
}