/* ─── Badge ──────────────────────────────────────────────────────────────────
   Values: site/tokens.css
   Consumers: site/preview/badge.html + src/components/Badge/Badge.tsx
   States: data-attributes only (data-variant / data-intent / data-size)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Badge root ────────────────────────────────────────────────────────────── */

.ds-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--ds-radius-pill);
  font-family:      var(--ds-font);
  font-weight:      500;
  line-height:      1;
  white-space:      nowrap;
  font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════════════════════
   SIZES
   ══════════════════════════════════════════════════════════════ */

.ds-badge[data-size='sm'] {
  height:     var(--ds-bdg-sm-h);
  min-width:  var(--ds-bdg-sm-h);
  padding:    0 var(--ds-bdg-sm-px);
  font-size:  var(--ds-bdg-sm-fs);
}

.ds-badge[data-size='md'] {
  height:     var(--ds-bdg-md-h);
  min-width:  var(--ds-bdg-md-h);
  padding:    0 var(--ds-bdg-md-px);
  font-size:  var(--ds-bdg-md-fs);
}

/* ══════════════════════════════════════════════════════════════
   DOT variant
   ══════════════════════════════════════════════════════════════ */

.ds-badge[data-variant='dot'] {
  display:       inline-block;
  width:         8px;
  height:        8px;
  min-width:     unset;
  padding:       0;
  border-radius: 50%;
  font-size:     0;
}

.ds-badge[data-variant='dot'][data-intent='neutral']  { background: var(--ds-neutral-fill); }
.ds-badge[data-variant='dot'][data-intent='brand']    { background: var(--ds-surface-brand-accent); }
.ds-badge[data-variant='dot'][data-intent='info']     { background: var(--ds-surface-info-accent); }
.ds-badge[data-variant='dot'][data-intent='positive'] { background: var(--ds-pos-default); }
.ds-badge[data-variant='dot'][data-intent='warning']  { background: var(--ds-surface-warn-accent); }
.ds-badge[data-variant='dot'][data-intent='negative'] { background: var(--ds-surface-neg-accent); }

/* ══════════════════════════════════════════════════════════════
   SOLID variant
   ══════════════════════════════════════════════════════════════ */

.ds-badge[data-variant='solid'] {
  color: var(--ds-text-invert);
}

.ds-badge[data-variant='solid'][data-intent='neutral']  { background: var(--ds-neutral-fill); }
.ds-badge[data-variant='solid'][data-intent='brand']    { background: var(--ds-surface-brand-accent); }
.ds-badge[data-variant='solid'][data-intent='info']     { background: var(--ds-surface-info-accent); }
.ds-badge[data-variant='solid'][data-intent='positive'] { background: var(--ds-pos-default); }
.ds-badge[data-variant='solid'][data-intent='negative'] { background: var(--ds-surface-neg-accent); }
.ds-badge[data-variant='solid'][data-intent='warning']  { background: var(--ds-surface-warn-accent); }

/* ══════════════════════════════════════════════════════════════
   SOFT variant
   ══════════════════════════════════════════════════════════════ */

.ds-badge[data-variant='soft'][data-intent='neutral']  { background: var(--ds-nba-30);               color: var(--ds-text-primary); }
.ds-badge[data-variant='soft'][data-intent='brand']    { background: var(--ds-surface-brand-low);    color: var(--ds-brand-soft-text); }
.ds-badge[data-variant='soft'][data-intent='info']     { background: var(--ds-surface-info-low);     color: var(--ds-surface-info-text); }
.ds-badge[data-variant='soft'][data-intent='positive'] { background: var(--ds-surface-pos-low);      color: var(--ds-surface-pos-text); }
.ds-badge[data-variant='soft'][data-intent='warning']  { background: var(--ds-surface-warn-low);     color: var(--ds-warn-soft-text); }
.ds-badge[data-variant='soft'][data-intent='negative'] { background: var(--ds-surface-neg-low);      color: var(--ds-surface-neg-text); }

/* ── Soft High Contrast — white bg (Static/Surface/Neutral-Blue/High-Contrast); text unchanged ── */

.ds-badge[data-variant='soft'][data-high-contrast] { background: var(--ds-surface); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Solid text overrides
   Dark theme: --ds-text-invert = #1C2023 (тёмный, для Neutral white bg).
   Colored intents have dark bg → нужен белый текст.
   Warning: использует --ds-warn-solid-text (#FFFFFF, defined in dark tokens).
   ══════════════════════════════════════════════════════════════ */

:root:not([data-theme='light']) .ds-badge[data-variant='solid'][data-intent='brand'],
:root:not([data-theme='light']) .ds-badge[data-variant='solid'][data-intent='info'],
:root:not([data-theme='light']) .ds-badge[data-variant='solid'][data-intent='positive'],
:root:not([data-theme='light']) .ds-badge[data-variant='solid'][data-intent='negative'] {
  color: #ffffff; /* Static/Text/NB/High-Contrast — white on dark colored bg */
}

:root:not([data-theme='light']) .ds-badge[data-variant='solid'][data-intent='warning'] {
  color: var(--ds-warn-solid-text); /* #FFFFFF — Static/Text/NB/High-Contrast dark */
}

/* ══════════════════════════════════════════════════════════════
   DISABLED state
   ══════════════════════════════════════════════════════════════ */

.ds-badge[data-variant][data-disabled] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

.ds-badge[data-variant='dot'][data-disabled] {
  background: var(--ds-disabled-text);
}