/* ================================================================
   DataHints DS — Badges Component
   Requires: tokens.css
   ================================================================ */

  /* ────────────────────────────────────────────────────────────
     BASE BADGE
  ──────────────────────────────────────────────────────────── */
  .dh-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-weight: 500;
    font-size: 0.6875rem;               /* 11px */
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    /* no pointer by default — badges are non-interactive */
  }

  /* Pill shape modifier */
  .dh-badge-pill { border-radius: var(--r-pill); }

  /* Dot indicator */
  .dh-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* Icon slot */
  .dh-badge-icon {
    width: 12px; height: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center;
  }
  .dh-badge-icon svg { width: 100%; height: 100%; }

  /* ── Tier 1 · Primary — Amethyst ── */

  /* subtle (default) */
  .dh-badge-t1 {
    background: var(--accent-sub);
    color: var(--accent-text);
    border-color: transparent;
  }
  /* outline */
  .dh-badge-t1-outline {
    background: transparent;
    color: var(--accent-text);
    border-color: var(--border-a);
  }
  /* filled */
  .dh-badge-t1-fill {
    background: var(--accent-fill);
    color: var(--on-accent);
    border-color: transparent;
  }

  /* ── Tier 2 · Effects ── */

  /* FX · Violet */
  .dh-badge-fx {
    background: var(--fx-sub);
    color: var(--fx-h);
    border-color: transparent;
  }
  .dh-badge-fx-outline {
    background: transparent;
    color: var(--fx-h);
    border-color: rgba(126, 107, 255, 0.35); /* fallback */
    border-color: color-mix(in srgb, var(--fx) 35%, transparent);
  }

  /* Mint · Success */
  .dh-badge-mint {
    background: var(--mint-sub);
    color: var(--mint);
    border-color: transparent;
  }
  .dh-badge-mint-outline {
    background: transparent;
    color: var(--mint);
    border-color: rgba(78, 255, 184, 0.30);
  }

  /* Insight · Teal */
  .dh-badge-insight {
    background: var(--insight-sub);
    color: var(--insight);
    border-color: transparent;
  }
  .dh-badge-insight-outline {
    background: transparent;
    color: var(--insight);
    border-color: rgba(6, 188, 193, 0.30);
  }

  /* ── Tier 3 · Micro ── */

  /* Coral · Alerts & Warnings */
  .dh-badge-coral {
    background: var(--micro-coral-sub);
    color: var(--micro-coral-text);
    border-color: transparent;
  }
  .dh-badge-coral-outline {
    background: transparent;
    color: var(--micro-coral-text);
    border-color: rgba(255, 90, 60, 0.30);
  }

  /* Amber · Annotations & Notes */
  .dh-badge-amber {
    background: var(--micro-amber-sub);
    color: var(--micro-amber-text);
    border-color: transparent;
  }
  .dh-badge-amber-outline {
    background: transparent;
    color: var(--micro-amber-text);
    border-color: rgba(255, 176, 32, 0.30);
  }

  /* Neutral · Default / muted */
  .dh-badge-neutral {
    background: var(--bg-card);
    color: var(--fg-3);
    border-color: var(--border-s);
  }

  /* ── Code tag ── */
  .dh-badge-code {
    font-family: var(--font-mono); font-weight: 400;
    font-size: 0.75rem;             /* 12px — slightly larger, monospace */
    letter-spacing: 0;
    text-transform: none;
    background: var(--code-bg-inline);
    color: var(--code-accent);
    border-color: transparent;
    border-radius: var(--r-xs);
    padding: 3px 7px;
  }
  /* Bordered code tag variant */
  .dh-badge-code-outline {
    background: transparent;
    color: var(--code-accent);
    border-color: rgba(122, 115, 255, 0.28); /* fallback */
    border-color: color-mix(in srgb, var(--fx) 28%, transparent);
  }

  /* ────────────────────────────────────────────────────────────
     CHIP — interactive badge (filter, tag, selectable)
  ──────────────────────────────────────────────────────────── */
  .dh-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-sans); font-weight: 500;
    font-size: 0.8125rem;           /* 13px */
    line-height: 1;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-s);
    background: var(--bg-card);
    color: var(--fg-2);
    cursor: pointer;
    transition:
      background var(--ease-fast),
      border-color var(--ease-fast),
      color var(--ease-fast),
      box-shadow var(--ease-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .dh-chip:hover {
    background: var(--bg-card-h);
    border-color: var(--border-a);
    color: var(--fg);
  }
  .dh-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Selected state */
  .dh-chip.is-selected {
    background: var(--accent-sub);
    border-color: var(--accent);
    color: var(--accent-text);
  }
  .dh-chip.is-selected:hover {
    background: var(--accent-sub);
    border-color: var(--accent-h);
  }

  /* Dismiss button inside chip */
  .dh-chip-dismiss {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; flex-shrink: 0;
    background: none; border: none; padding: 0;
    color: currentColor; opacity: 0.6;
    cursor: pointer; border-radius: 50%;
    transition: opacity var(--ease-fast), background var(--ease-fast);
    margin-right: -2px;
  }
  .dh-chip-dismiss:hover { opacity: 1; background: var(--bg-elevated); }
  .dh-chip-dismiss svg { width: 10px; height: 10px; }

  /* Check icon for selected */
  .dh-chip-check {
    width: 13px; height: 13px; flex-shrink: 0;
    display: none;
  }
  .dh-chip-check svg { width: 100%; height: 100%; }
  .dh-chip.is-selected .dh-chip-check { display: inline-flex; align-items: center; }

  /* Chip color variants */
  .dh-chip-t1.is-selected {
    background: var(--accent-sub); border-color: var(--accent); color: var(--accent-text);
  }
  .dh-chip-mint.is-selected {
    background: var(--mint-sub); border-color: var(--mint); color: var(--mint);
  }
  .dh-chip-coral.is-selected {
    background: var(--micro-coral-sub); border-color: var(--micro-coral); color: var(--micro-coral-text);
  }

  /* ── SM size modifier (both badge and chip) ── */
  .dh-badge-sm {
    font-size: 9px;
    padding: 3px 6px;
    letter-spacing: 0.04em;
  }
  .dh-chip-sm {
    font-size: 0.75rem;
    padding: 4px 10px;
  }