@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink: #000000;
  --parchment: #F3EDE1;
  --parchment-dark: #E8DFCC;
  --brass: #B8894A;
  --sage: #6B7F6E;
  --rust: #A8442E;
  --charcoal: #2E2B28;
}

body { font-family: 'IBM Plex Sans', sans-serif; background-color: var(--parchment); color: var(--charcoal); }
.font-display { font-family: 'Fraunces', serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

/* Faint paper grain so the parchment background isn't flat */
.paper-texture {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(27,42,74,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Signature element: an ink due-date stamp used for statuses & accents */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px dashed currentColor;
  border-radius: 3px;
  padding: 0.15rem 0.55rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.stamp-available { color: var(--sage); }
.stamp-out { color: var(--rust); }
.stamp-new { color: var(--brass); }

/* Catalog-card tab on book cards, like an index card label */
.card-tab {
  position: absolute;
  top: -0.55rem;
  left: 1rem;
  background: var(--ink);
  color: var(--parchment);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

.nav-btn {
  color: rgba(0, 0, 0, 0.7);
  transition: background-color .15s, color .15s;
}

.nav-btn:hover {
  background-color: rgba(243,237,225,0.08);
  color: var(--brass);
}

.nav-btn.active {
  color: #000 !important;
}

.nav-btn.active:hover {
  color: var(--brass) !important;
}

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 4px; }

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