/**
 * SYNAI Icon System 1.0.0
 * 24px construction grid, 2px round stroke, currentColor.
 */
:root {
  --synai-icon-xs: 1rem;
  --synai-icon-sm: 1.25rem;
  --synai-icon-md: 1.5rem;
  --synai-icon-lg: 2rem;
  --synai-icon-xl: 3rem;
  --synai-icon-2xl: 4rem;
  --synai-icon-stroke: 2;
}

.synai-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  overflow: visible;
  color: currentColor;
  pointer-events: none;
}

.synai-icon--xs { width: var(--synai-icon-xs); height: var(--synai-icon-xs); }
.synai-icon--sm { width: var(--synai-icon-sm); height: var(--synai-icon-sm); }
.synai-icon--md { width: var(--synai-icon-md); height: var(--synai-icon-md); }
.synai-icon--lg { width: var(--synai-icon-lg); height: var(--synai-icon-lg); }
.synai-icon--xl { width: var(--synai-icon-xl); height: var(--synai-icon-xl); }
.synai-icon--2xl { width: var(--synai-icon-2xl); height: var(--synai-icon-2xl); }

.synai-icon-wrap {
  --icon-surface: color-mix(in srgb, var(--synai-blue, #1656d8) 10%, transparent);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--synai-blue, #1656d8);
  background: var(--icon-surface);
}

.synai-icon-wrap--dark {
  color: #fff;
  background: var(--synai-navy, #06152f);
}

.synai-icon-wrap--filled {
  color: #fff;
  background: var(--synai-blue, #1656d8);
}

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

.synai-icon-link .synai-icon {
  transition: transform .2s ease;
}

.synai-icon-link:hover .synai-icon,
.synai-icon-link:focus-visible .synai-icon {
  transform: translateX(.2rem);
}

@media (prefers-reduced-motion: reduce) {
  .synai-icon-link .synai-icon { transition: none; }
  .synai-icon-link:hover .synai-icon,
  .synai-icon-link:focus-visible .synai-icon { transform: none; }
}