@import './lib/styles/tokens.generated.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

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

body {
  font-family: var(--fs-font-body);
}

/* Card play-overlay: positioned absolutely over the card's art square,
 * fades in on hover (mouse) or stays visible (touch). Used by AlbumCard,
 * ArtistCard, PlaylistCard. The `.card` class is a marker used as the
 * :hover anchor; it has no styling of its own. */
.play-overlay {
  background: var(--fs-accent);
  color: var(--fs-parchment);
  opacity: 0;
  transition: opacity 150ms ease;
}
@media (hover: hover) {
  .card:hover .play-overlay { opacity: 1; }
}
@media (hover: none) {
  .play-overlay { opacity: 1; }
}