@import '@pipu/design-tokens/tokens.css';
@import '@fontsource/onest/400.css';
@import '@fontsource/onest/500.css';
@import '@fontsource/onest/600.css';
@import '@fontsource/onest/700.css';
@import '@fontsource/unbounded/600.css';
@import '@fontsource/jetbrains-mono/400.css';

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

:root[data-theme='light'] body {
  color-scheme: light;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Элементы управления не выделяются при кликах и двойных кликах — текст остаётся выделяемым на страницах. */
button,
[role='button'],
[role='tab'],
[role='option'],
[role='menuitem'],
[role='listitem'],
nav a,
label {
  user-select: none;
  -webkit-user-select: none;
}

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

@keyframes pipuIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Выезжающие справа панели (очередь, docs/design.md#4). */
@keyframes pipuSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Эквалайзер текущего трека (docs/design.md#2). */
@keyframes pipuEq {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}