/* ==========================================================
   SoftwareMX — Brand Icons Utilities
   SVG sprite: assets/icons/softwaremx-icons.svg
   DNA: 18×18 rounded square (rx=2) + green bar accent.
   Loaded after tokens.css. Pair with main.css.
   ========================================================== */

/* Base icon — inherits currentColor; green via .brand-stroke */
.smx-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.8;
  overflow: visible;
}

/* Brand-stroke helper (also defined inside sprite for standalone use) */
.smx-icon .brand-stroke,
.brand-stroke {
  stroke: #25D366;
  stroke: var(--brand, #25D366);
}

/* Sizing scale — use with .smx-icon */
.smx-icon--xs  { width: 0.875rem; height: 0.875rem; } /* 14px */
.smx-icon--sm  { width: 1rem;     height: 1rem;     } /* 16px — inline */
.smx-icon--md  { width: 1.5rem;   height: 1.5rem;   } /* 24px — default card */
.smx-icon--lg  { width: 2rem;     height: 2rem;     } /* 32px — feature hero */
.smx-icon--xl  { width: 2.75rem;  height: 2.75rem;  } /* 44px — spotlight */
.smx-icon--2xl { width: 3.5rem;   height: 3.5rem;   } /* 56px — display */

/* Container for card / feature usage — lifts the geometric square */
.smx-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-elevated, #232430);
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.28));
  color: var(--text, #FFFFFF);
}

.smx-icon-box--brand {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.28);
  box-shadow: var(--shadow-glow, 0 0 24px rgba(37,211,102,0.35));
}

.smx-icon-box--lg {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg, 14px);
}

.smx-icon-box .smx-icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* Alignment helpers */
.smx-icon--baseline { vertical-align: -0.125em; }
.smx-icon--lift     { vertical-align: 0.05em; }

/* Color variants */
.smx-icon--muted   { color: var(--text-muted, rgba(255,255,255,0.65)); }
.smx-icon--brand   { color: var(--brand, #25D366); }
.smx-icon--on-dark { color: #FFFFFF; }

/* Hover / interactive — green glow (opt-in) */
.smx-icon--interactive {
  transition: color var(--fast, 150ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              filter var(--fast, 150ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              transform var(--fast, 150ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1));
}

.smx-icon--interactive:hover {
  color: var(--brand, #25D366);
  filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.45));
}

a:hover .smx-icon--interactive,
button:hover .smx-icon--interactive {
  color: var(--brand, #25D366);
}

/* Accessibility — hide decorative icons from AT when needed */
.smx-icon[aria-hidden="true"] { pointer-events: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .smx-icon--interactive { transition: none; }
}