/* База системы: фон и текст страницы, выделение, фокус, скроллбар, скелетон.
   Подключается любым сайтом Vymi после tokens.css и темы. */

body {
  /* слои отличаются тоном, без радиальных пятен */
  background-color: var(--canvas);
  color: var(--text);
  font: 400 var(--t-body) / var(--lh-body) var(--font-text);
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Строгий тонкий скроллбар (в духе Spotify): узкий, с фирменным ховером */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--fill-3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fill-4);
}

/* Скелетон-заглушки: мягкое переливание поверх приглушённого фона */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fill-1);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--fill-1),
    transparent
  );
  animation: skeleton-wave 1.6s infinite;
}
@keyframes skeleton-wave {
  100% {
    transform: translateX(100%);
  }
}