/* ==========================================================================
   Nexuuscore Canonical Icon Design System (Deep Slate & Emerald Palette)
   ========================================================================== */

.app-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s ease, transform 0.15s ease;
}

/* Sizing Tokens */
.app-icon.icon-xs { width: 12px; height: 12px; }
.app-icon.icon-sm { width: 16px; height: 16px; }
.app-icon.icon-md { width: 20px; height: 20px; }
.app-icon.icon-lg { width: 24px; height: 24px; }
.app-icon.icon-xl { width: 32px; height: 32px; }

/* Color Variant Tokens */
.app-icon.icon-emerald {
  stroke: var(--color-primary-accent, #047857);
}

.app-icon.icon-emerald-bright {
  stroke: #10b981;
}

.app-icon.icon-muted {
  stroke: var(--color-text-muted, #94a3b8);
}

.app-icon.icon-warning {
  stroke: #f59e0b;
}

.app-icon.icon-danger {
  stroke: #ef4444;
}

/* Navigation Integration */
.nav-link .app-icon {
  margin-right: 8px;
  stroke: var(--color-text-muted, #94a3b8);
}

.nav-link:hover .app-icon,
.nav-link.active .app-icon {
  stroke: var(--color-primary-accent, #047857);
}

/* Button & Card Alignment */
.btn .app-icon {
  margin-right: 6px;
  vertical-align: -0.18em;
}

.btn-icon-only .app-icon {
  margin-right: 0;
}

.command-card .app-icon {
  margin-bottom: 0.5rem;
}

/* Status Chips & Badge Alignment */
.badge .app-icon,
.status-chip .app-icon {
  margin-right: 4px;
  vertical-align: -0.12em;
}