/* RG Badge — visual indicator (score, status, tag).
 *
 * Replaces, going forward: match-score-compact, match-score, opportunity-score-display,
 * school-match, activity-badge, note-badge, calendar-badge, notification-badge.
 *
 * Namespaced as .rg-badge to coexist with the legacy css-zero .badge class until
 * those usages migrate (admin views, match_results/show, etc.).
 *
 * Variants are switched via class names; see BadgeComponent.
 */

.rg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display, system-ui), sans-serif;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  border: 0;
  text-decoration: none;
}

/* Sizes ----------------------------------------------------------------- */
.rg-badge--size-sm { font-size: 0.6875rem; padding: 0.15em 0.5em;   min-height: 1.5rem;  }
.rg-badge--size-md { font-size: 0.8125rem; padding: 0.25em 0.625em; min-height: 1.75rem; }
.rg-badge--size-lg { font-size: 0.875rem;  padding: 0.375em 0.75em; min-height: 2rem;    }
.rg-badge--size-xl { font-size: 1rem;      padding: 0.5em 1em;      min-height: 2.5rem;  }

/* Shapes ---------------------------------------------------------------- */
.rg-badge--shape-pill   { border-radius: 9999px; }
.rg-badge--shape-square { border-radius: 4px;    }

/* Circle: enforce 1:1 aspect, override padding to keep it round */
.rg-badge--shape-circle {
  border-radius: 50%;
  padding: 0;
  aspect-ratio: 1 / 1;
  font-weight: 900;
}
.rg-badge--shape-circle.rg-badge--size-sm { width: 2rem;   height: 2rem;   }
.rg-badge--shape-circle.rg-badge--size-md { width: 2.5rem; height: 2.5rem; }
.rg-badge--shape-circle.rg-badge--size-lg { width: 3rem;   height: 3rem;   }
.rg-badge--shape-circle.rg-badge--size-xl { width: 3.5rem; height: 3.5rem; }

/* Tones ----------------------------------------------------------------- */
/* Score severity */
.rg-badge--tone-high   { background: var(--stoplight-green);  color: white;              }
.rg-badge--tone-medium { background: var(--stoplight-yellow); color: var(--text-strong); }
.rg-badge--tone-low    { background: var(--stoplight-red);    color: white;              }

/* Neutral / inverse */
.rg-badge--tone-neutral { background: var(--surface-sunken); color: var(--text-default);  }
.rg-badge--tone-inverse { background: var(--text-strong);    color: var(--text-inverse);  }
.rg-badge--tone-brand   { background: var(--brand-primary);  color: white;                }

/* Status palette */
.rg-badge--tone-info    { background: var(--status-info-bg);    color: var(--status-info-fg);    }
.rg-badge--tone-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.rg-badge--tone-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.rg-badge--tone-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg);  }
.rg-badge--tone-accent  { background: var(--status-accent-bg);  color: var(--status-accent-fg);  }