/*
 * Font faces and a handful of primitives that Tailwind utilities cannot express.
 * Design tokens live in app/assets/tailwind/application.css.
 */

/* IBM Plex Sans — 300 / 400 / 500 / 600 (+ 300/400 italic for tile details) */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-300-73562412.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-300-italic-89e5734b.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-400-64251e64.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-400-italic-86b9c1f6.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-500-290aaea2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/IBMPlexSans-600-99b2fa32.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — numerics only: times, servings, counts, IDs */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-400-c9c3574e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-500-690bf350.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Hide number input arrows while keeping native behaviour. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Dialogs are used for import, add-to-list, invites and destructive confirms. */
dialog::backdrop {
  background: rgb(20 23 28 / 0.42);
}

dialog[open] {
  animation: dialog-in 120ms ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open] {
    animation: none;
  }
}