.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  display: block;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton--logo        { width: 48px;  height: 48px;  border-radius: 10px; }
@media (max-width: 767px) {
  .skeleton--logo-xsmall { width: 24px;  height: 24px;  border-radius: 4px; }
}
.skeleton--logo-xsmall { width: 24px;  height: 24px;  border-radius: 4px; }
.skeleton--badge       { width: 80px;  height: 24px;  border-radius: 100px; }
.skeleton--text        { height: 14px; border-radius: 4px; margin-bottom: 6px; }
.skeleton--text-sm     { width: 40%; }
.skeleton--text-md     { width: 70%; }
.skeleton--text-lg     { width: 90%; height: 20px; }
.skeleton--text-xl     { width: 60%; height: 26px; }
.skeleton--blog-img         { width: 100%; aspect-ratio: 16/9; border-radius: 0; }
.skeleton--blog-img-hero    { width: 100%; height: 400px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #efefef; }
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}