/**
 * Font Awesome monochrome icon system (Phase 1). Icons render alone (inline,
 * inherit color) or inside a flat single-hue tint square for emphasis — used
 * by hub tiles (.hub__t-ic) and, later, stat cards. Never a gradient or bevel.
 */

.hub__t-ic i,
.hub__xl-ic i {
  font-size: 0.875em;
  color: var(--color-brand);
}

/* Neutral (default) tint square background: `--surface-2` is an undefined/legacy
   token referenced via fallback only; it always resolves to `--bg-tertiary` in
   this codebase. Semantic tone variants for stat/status contexts reuse the same
   4 semantic colors as badges. */
.icon-tint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-control);
  background: var(--surface-2, var(--bg-tertiary));
}
.icon-tint i { color: var(--color-text-default); }

.icon-tint--brand { background: var(--color-brand-100); }
.icon-tint--brand i { color: var(--color-brand); }

.icon-tint--success { background: var(--color-success-light); }
.icon-tint--success i { color: var(--color-success); }

.icon-tint--warning { background: var(--color-warning-light); }
.icon-tint--warning i { color: var(--color-warning); }

.icon-tint--danger { background: var(--color-danger-light); }
.icon-tint--danger i { color: var(--color-danger); }

.icon-tint--info { background: var(--color-info-light); }
.icon-tint--info i { color: var(--color-info); }

.dark .icon-tint { background: var(--bg-tertiary); }