/* Icons inherit contextual color — SVG hub/utility marks use stroke/fill: currentColor */
.sk-site-icon,
.hub-icon--inline,
.sk-icon {
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: -0.125em;
  color: inherit;
}

.sk-site-icon--external {
  font-size: 0.72em;
  opacity: 0.85;
}

.nav-link--icon,
.footer-link--icon,
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-link--icon .hub-icon--inline,
.footer-link--icon .hub-icon--inline,
.btn--icon .hub-icon--inline {
  width: 1.05em;
  height: 1.05em;
}

.section-title--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sk-text);
}

.section-title--icon .sk-site-icon,
.section-title--icon .hub-icon--inline {
  color: var(--sk-icon-accent, var(--sk-link));
}

.section-title--icon .hub-icon--inline {
  width: 1.35rem;
  height: 1.35rem;
}

.card-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Outline buttons on light surfaces */
.btn-portfolio-outline,
.btn-outline-coder {
  color: #1e3a2f;
}

.btn-portfolio-outline .sk-site-icon,
.btn-portfolio-outline .hub-icon--inline,
.btn-portfolio-outline .sk-icon,
.btn-outline-coder .sk-site-icon,
.btn-outline-coder .hub-icon--inline,
.btn-outline-coder .sk-icon {
  color: inherit;
}

/* Filled primary buttons */
.btn-portfolio-primary .sk-site-icon,
.btn-portfolio-primary .hub-icon--inline,
.btn-portfolio-primary .sk-icon {
  color: #ffffff;
}

/* Portfolio preview thumbnails */
.portfolio-preview-thumb__icon {
  color: var(--sk-link);
}

.portfolio-preview-thumb__icon.sk-site-icon.bi {
  color: var(--sk-muted);
}

/* Dark product panels */
.product-panel--dark .section-title--icon {
  color: #f1f5f9;
}

.product-panel--dark .section-title--icon .sk-site-icon,
.product-panel--dark .section-title--icon .hub-icon--inline {
  color: var(--sk-header-accent);
}

.product-panel--dark .sk-site-icon,
.product-panel--dark .hub-icon--inline,
.product-panel--dark .sk-icon {
  color: var(--sk-header-accent);
}

.product-panel--dark a:not(.btn) {
  color: var(--sk-header-accent);
}

.product-panel--dark a:not(.btn):hover {
  color: #a7f3d0;
}