/**
 * Poupex Play 4.0 — Icons
 * SVG inline com currentColor. Tamanhos via --pp4-icon-*.
 * Placeholders vetoriais até os assets 3D oficiais serem exportados.
 */

.pp4-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
  color: currentColor;
  line-height: 0;
}

.pp4-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.pp4-icon--fill svg {
  fill: currentColor;
  stroke: none;
}

/* Tile circular para ícones de exploração */
.pp4-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-blue-soft);
  color: var(--pp4-color-blue-bright);
  border: 1px solid var(--pp4-color-border-blue);
}

.pp4-icon-tile--purple {
  background: var(--pp4-color-purple-soft);
  color: var(--pp4-color-purple-bright);
  border-color: rgba(124, 58, 237, 0.35);
}

.pp4-icon-tile--success {
  background: var(--pp4-color-success-soft);
  color: var(--pp4-color-success);
  border-color: rgba(34, 197, 94, 0.35);
}