/* assets/css/components/badge.css
 * @layer components — .badge BEM block
 * ════════════════════════════════════════════════════════════════════
 *
 * Use cases: status labels, phase indicators, trial tags, KPI flags.
 * All colour pairs verified ≥ 4.5:1 WCAG AA (see §19 badge tokens).
 *
 * Token sources: §19 --badge-*, §13 --radius-full, §4 --tracking-wide
 * ════════════════════════════════════════════════════════════════════ */


@layer components {

  /* ════════════════════════════════════════════════════════════════════
     Base .badge
     ════════════════════════════════════════════════════════════════════ */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--badge-gap);
    padding-block: var(--badge-padding-block);
    padding-inline: var(--badge-padding-inline);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    font-family: var(--font-body);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--badge-radius);
    white-space: nowrap;
    vertical-align: middle;
  }


  /* ════════════════════════════════════════════════════════════════════
     Color variants
     ════════════════════════════════════════════════════════════════════ */

  /* Primary — teal family · --badge-primary-text 5.80:1 ✅ */
  .badge--primary {
    background-color: var(--badge-primary-bg);
    color: var(--badge-primary-text);
  }

  /* Success — green · --badge-success-text 5.87:1 ✅ */
  .badge--success {
    background-color: var(--badge-success-bg);
    color: var(--badge-success-text);
  }

  /* Warning — amber · --badge-warning-text 6.18:1 ✅ */
  .badge--warning {
    background-color: var(--badge-warning-bg);
    color: var(--badge-warning-text);
  }

  /* Error — red · --badge-error-text 6.33:1 ✅ */
  .badge--error {
    background-color: var(--badge-error-bg);
    color: var(--badge-error-text);
  }

  /* Accent — warm gold · --badge-accent-text 5.69:1 ✅ */
  .badge--accent {
    background-color: var(--badge-accent-bg);
    color: var(--badge-accent-text);
  }

  /* Neutral — grey · --badge-neutral-text 6.02:1 ✅ */
  .badge--neutral {
    background-color: var(--badge-neutral-bg);
    color: var(--badge-neutral-text);
  }


  /* ════════════════════════════════════════════════════════════════════
     Style variants
     ════════════════════════════════════════════════════════════════════ */

  /* Outline — transparent fill, inset border in current text colour */
  .badge--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }

  /* Dot — prepends a coloured circle status indicator */
  .badge--dot::before {
    content: '';
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: var(--radius-full);
    background-color: currentColor;
    flex-shrink: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     V3 additions — explicit dot element, secondary, outline variants
     ════════════════════════════════════════════════════════════════════ */

  /* Dot as a child element (alternative to ::before) */
  .badge__dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: var(--radius-round);
    background-color: currentColor;
    flex-shrink: 0;
  }

  /* Icon inside badge */
  .badge__icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  /* Secondary — warm blush family */
  .badge--secondary {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary-ultra-dark);
  }
  .badge--secondary .badge__dot { background-color: var(--secondary-dark); }

  /* Specific outline variants (beyond the generic .badge--outline) */
  .badge--outline-primary {
    background-color: transparent;
    border: 1px solid var(--primary-light);
    color: var(--text-accent);
  }

  .badge--outline-secondary {
    background-color: transparent;
    border: 1px solid var(--secondary-dark);
    color: var(--secondary-ultra-dark);
  }
  .badge--outline-secondary .badge__dot { background-color: var(--secondary-dark); }

  .badge--outline-neutral {
    background-color: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
  }

}