/* ============================================================
   void-badge — Tone system component
   ============================================================ */

void-badge {
  --tone: var(--void-color-accent);

  display: inline-grid;
  place-content: center;
  padding: 0.25rem 0.375rem 0.125rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--void-radius-full);
  background: var(--tone);
  color: var(--void-color-text-on-accent);
  font-family: var(--void-font-sans);
  font-size: var(--void-text-xs);
  font-weight: var(--void-weight-semibold);
  line-height: var(--void-leading-tight);
  white-space: nowrap;
  text-align: center;
}

/* Colors */
void-badge[color="error"]     { --tone: var(--void-color-error); }
void-badge[color="warning"]   { --tone: var(--void-color-warning); }
void-badge[color="caution"]   { --tone: var(--void-color-caution); }
void-badge[color="success"]   { --tone: var(--void-color-success); }
void-badge[color="info"]      { --tone: var(--void-color-info); }
void-badge[color="notice"]    { --tone: var(--void-color-notice); }
void-badge[color="highlight"] { --tone: var(--void-color-highlight); }

/* Variants */
void-badge[variant="outline"] {
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 36%, transparent);
  color: var(--tone);
}

/* Sizes */
void-badge[size="sm"] { min-width: 1rem; min-height: 1rem; font-size: var(--void-text-2xs); padding: 0.0625rem var(--void-space-1) 0; }
void-badge[size="lg"] { min-width: 1.75rem; min-height: 1.75rem; font-size: var(--void-text-sm); padding: 0.3125rem var(--void-space-3) 0.1875rem; }
void-badge[size="xl"] { min-width: 2.25rem; min-height: 2.25rem; font-size: var(--void-text-base); padding: 0.375rem var(--void-space-4) 0.25rem; }
void-badge[size="xxl"] { min-width: 3rem; min-height: 3rem; font-size: var(--void-text-lg); padding: 0.4375rem var(--void-space-5) 0.3125rem; }