:root {
  /* Hostrend Icon System: semantic global icon classes. */
}

.host-icon {
  display: inline-block;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex: 0 0 auto;
  color: var(--icon-color-default);
  vertical-align: middle;
  line-height: 0;
}

.host-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Size tokens */
.host-icon--xs { width: var(--icon-size-xs); height: var(--icon-size-xs); }
.host-icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.host-icon--md { width: var(--icon-size-md); height: var(--icon-size-md); }
.host-icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.host-icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.host-icon--2xl { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }
.host-icon--3xl { width: var(--icon-size-3xl); height: var(--icon-size-3xl); }

/* Semantic color tokens */
.host-icon--default { color: var(--icon-color-default); }
.host-icon--primary { color: var(--icon-color-primary); }
.host-icon--secondary { color: var(--icon-color-secondary); }
.host-icon--muted { color: var(--icon-color-muted); }
.host-icon--disabled { color: var(--icon-color-disabled); }
.host-icon--inverse { color: var(--icon-color-inverse); }
.host-icon--success { color: var(--icon-color-success); }
.host-icon--warning { color: var(--icon-color-warning); }
.host-icon--error { color: var(--icon-color-error); }
.host-icon--info { color: var(--icon-color-info); }

/* Common state helpers */
.host-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color-default);
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.host-icon-button:hover { color: var(--icon-color-primary); }
.host-icon-button:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.host-icon-button[aria-pressed="true"],
.host-icon-button.is-active { color: var(--icon-color-primary); }
.host-icon-button:disabled,
.host-icon-button.is-disabled { color: var(--icon-color-disabled); cursor: not-allowed; }

/* Icon + text relationships */
.host-icon-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap);
}

.host-icon-inline--large { gap: var(--icon-gap-lg); }

/* Optional background containers */
.host-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--icon-container-radius);
}
.host-icon-container--feature { border-radius: var(--icon-container-feature-radius); }
.host-icon-container--circle { border-radius: var(--icon-container-circle-radius); }

@media (prefers-reduced-motion: reduce) {
  .host-icon-button { transition: none; }
}