/* WarriorPings Icons v2: sizing, stroke, layers (STAGED). Use only via wpIcon() or the markup below.
   <svg class="wp-i wp-i--20" aria-hidden="true" focusable="false"><use href="/static/icons/wp-icons.svg?v=2#wp-bell"></use></svg>
   Filled variant (active tab, selected): same name + "-fill", e.g. #wp-bell-fill.
   Sizes are tokens: 16 (inline with 12 to 14px text), 20 (buttons, rows, nav), 24 (tab bar, empty states).
   Capsule strokes are optically compensated: about 2.5px at 24, 2.2px at 20, 1.9px at 16. */
.wp-i {
  --wp-i-size: 20px;
  --wp-i-stroke: 2.6;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--wp-i-size);
  height: var(--wp-i-size);
  stroke-width: var(--wp-i-stroke);
  color: inherit;
  vertical-align: -0.22em;
  overflow: visible;
  pointer-events: none;
}
.wp-i--16 { --wp-i-size: 16px; --wp-i-stroke: 2.8; }
.wp-i--20 { --wp-i-size: 20px; --wp-i-stroke: 2.6; }
.wp-i--24 { --wp-i-size: 24px; --wp-i-stroke: 2.5; }

/* duotone: the secondary layer (the light blue ribbon of the logo) sits at 40% of currentColor.
   Raise it for very small or low contrast placements, never lower than .3. */
.wp-i--solo { --wp-i-o2: 1; --wp-i-ao: 1; }

/* the ping wave and dot (bell, ping, broadcast, wand) take the accent when asked:
   unread state, live state. Default = currentColor at the secondary opacity. */
.wp-i--ping { --wp-i-dot: var(--wp-accent, #1aa3ff); --wp-i-ao: 1; }

/* tone helpers (meaning only) */
.wp-i--muted { color: var(--wp-text-3, #7d8ea6); }
.wp-i--accent { color: var(--wp-accent, #1aa3ff); }
.wp-i--success { color: var(--wp-success, #2fd17a); }
.wp-i--warning { color: var(--wp-warning, #f5b544); }
.wp-i--danger { color: var(--wp-danger, #ff6b6b); }

.wp-i--spin { animation: wp-i-spin 0.8s linear infinite; transform-origin: 50% 50%; }
@keyframes wp-i-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wp-i--spin { animation-duration: 1.6s; } }