:root {
  --syntia-icon-primary: #9EF01A;
  --syntia-icon-secondary: #12D6DF;
  --syntia-icon-accent: #D946EF;
  --syntia-icon-hover-primary: #B7FF2C;
  --syntia-icon-hover-secondary: #2BE8F0;
  --syntia-icon-size-sm: 18px;
  --syntia-icon-size-md: 24px;
  --syntia-icon-size-lg: 32px;
  --syntia-icon-size-xl: 40px;
}

.syntia-icon {
  display: inline-block;
  vertical-align: middle;
  color: var(--syntia-icon-primary);
  transition: color .18s ease, transform .18s ease, filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 0 8px rgba(158, 240, 26, 0.18));
}

.syntia-icon-neon {
  filter:
    drop-shadow(0 0 7px rgba(158, 240, 26, 0.4))
    drop-shadow(0 0 12px rgba(18, 214, 223, 0.3));
}

.syntia-icon-cyan {
  color: var(--syntia-icon-secondary);
  filter: drop-shadow(0 0 10px rgba(18, 214, 223, 0.36));
}

.syntia-icon-duo {
  color: var(--syntia-icon-secondary);
  filter:
    drop-shadow(0 0 7px rgba(18, 214, 223, 0.33))
    drop-shadow(0 0 11px rgba(217, 70, 239, 0.22));
}

.syntia-icon-magenta {
  color: var(--syntia-icon-accent);
  filter: drop-shadow(0 0 10px rgba(217, 70, 239, 0.35));
}

.syntia-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(75, 225, 247, 0.4);
  background: rgba(6, 14, 22, 0.72);
  box-shadow:
    0 0 0 1px rgba(63, 185, 232, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.syntia-icon-chip--lime {
  border-color: rgba(201, 242, 74, 0.45);
  box-shadow:
    0 0 0 1px rgba(201, 242, 74, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.syntia-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.syntia-icon-sm { width: var(--syntia-icon-size-sm); height: var(--syntia-icon-size-sm); }
.syntia-icon-md { width: var(--syntia-icon-size-md); height: var(--syntia-icon-size-md); }
.syntia-icon-lg { width: var(--syntia-icon-size-lg); height: var(--syntia-icon-size-lg); }
.syntia-icon-xl { width: var(--syntia-icon-size-xl); height: var(--syntia-icon-size-xl); }

.syntia-icon-interactive:hover .syntia-icon,
.syntia-icon-interactive:focus-visible .syntia-icon {
  transform: translateY(-1px) scale(1.03);
  opacity: .98;
  filter:
    drop-shadow(0 0 10px rgba(18, 214, 223, 0.35))
    drop-shadow(0 0 14px rgba(158, 240, 26, 0.28));
}

.syntia-icon-button {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}

.syntia-icon-card {
  display: flex;
  align-items: center;
  gap: .875rem;
}