@import './lib/styles/tokens.generated.css' layer(base);

@import 'tailwindcss';

/* The FabledSword tokens as Tailwind's theme. `inline` makes each utility emit
 * the var(--fs-*) itself, so a theme swap that redefines the tokens reaches the
 * utilities without going through a second variable. */
@theme inline {
  --color-background: var(--fs-obsidian);

  --color-surface: var(--fs-iron);
  --color-surface-hover: var(--fs-slate);

  --color-border: var(--fs-pewter);

  --color-text-primary: var(--fs-parchment);
  --color-text-secondary: var(--fs-vellum);
  --color-text-muted: var(--fs-ash);

  --color-action-primary: var(--fs-moss);
  --color-action-secondary: var(--fs-bronze);
  --color-action-destructive: var(--fs-oxblood);
  --color-action-fg: var(--fs-on-action);

  --color-accent: var(--fs-accent);
  --color-accent-tint: color-mix(in srgb, var(--fs-accent) 12%, transparent);
  --color-accent-fg: var(--fs-accent-fg);

  --color-warning: var(--fs-warning);
  --color-warning-fg: var(--fs-warning-fg);

  --color-error: var(--fs-error);
  --color-error-fg: var(--fs-error-fg);

  --color-info: var(--fs-info);
  --color-info-fg: var(--fs-info-fg);

  --radius-sm: var(--fs-radius-sm);
  --radius-md: var(--fs-radius-md);
  --radius-lg: var(--fs-radius-lg);
  --radius-xl: var(--fs-radius-xl);

  --font-display: var(--fs-font-display);
  --font-sans: var(--fs-font-body);
  --font-mono: var(--fs-font-mono);
}

/* Tailwind 3's preflight defaults that 4 changed (#5021). Kept so the upgrade
 * changes nothing on screen; each can go once the elements relying on it name
 * the value themselves.
 * - A border with no colour utility was gray-200; 4 makes it currentcolor.
 * - Placeholder text was gray-400; 4 makes it the text colour at 50%.
 * - Buttons had a pointer cursor; 4 leaves the browser default. */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}

: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; }
}