/* Advoke CV — Badge Component */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background-color: var(--ink-100);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  vertical-align: middle;
}

.badge--accent {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.badge--accent-soft {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-active);
}

.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.badge--ink {
  background-color: var(--ink-900);
  color: var(--white);
}

.badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

.badge--outline-accent {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-active);
}

.badge--pill {
  border-radius: var(--radius-full);
  padding-inline: var(--space-2-5);
}

.badge--lg {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}

.badge--sm {
  font-size: 0.65rem;
  padding: 1px var(--space-1-5);
}

.badge--dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.badge--new {
  position: relative;
}

.badge--new::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--yellow-400);
  margin-left: var(--space-1);
  box-shadow: 0 0 0 2px var(--white);
}

.badge-ats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-sm);
}

.badge-ats::before {
  content: "✓";
  font-weight: var(--font-weight-bold);
  font-size: 10px;
}

.badge-ats--soft {
  background-color: #F0FDF4;
  color: var(--color-success);
}

.badge-category {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background-color: var(--ink-100);
  border-radius: var(--radius-sm);
}

.badge-category--a { background-color: #EFF6FF; color: #1E40AF; }
.badge-category--b { background-color: var(--yellow-100); color: var(--yellow-800); }
.badge-category--c { background-color: #F0FDF4; color: #166534; }
.badge-category--d { background-color: #FDF4FF; color: #86198F; }
.badge-category--e { background-color: #F0F9FF; color: #075985; }
.badge-category--f { background-color: #FEF2F2; color: #991B1B; }
.badge-category--g { background-color: #EEF2FF; color: #3730A3; }
.badge-category--h { background-color: #FFF7ED; color: #9A3412; }
.badge-category--i { background-color: #F5F3FF; color: #6D28D9; }

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1-5);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  background-color: var(--color-danger);
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.badge-count--accent {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.badge-count--muted {
  background-color: var(--ink-200);
  color: var(--color-text-secondary);
}

.badge-count--lg {
  min-width: 24px;
  height: 24px;
  font-size: var(--text-xs);
}