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

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-paper text-ink font-body antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
  @apply bg-ink text-paper;
}

::selection {
  background: rgba(245, 185, 63, 0.35);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Thin, unobtrusive scrollbars for data-dense panels */
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(138, 147, 166, 0.35);
  border-radius: 999px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Card surface used throughout the dashboard */
.panel {
  @apply rounded-3xl border border-black/[0.06] bg-paper-elevated shadow-card;
}
.dark .panel {
  @apply border-white/[0.06] bg-ink-elevated shadow-card-dark;
}

.glass {
  @apply border border-white/10 bg-white/[0.06] backdrop-blur-xl shadow-glass;
}
:root:not(.dark) .glass {
  @apply border-black/5 bg-white/70 shadow-glass-light;
}

.skeleton {
  @apply bg-shimmer-dark bg-[length:200%_100%] animate-shimmer;
}
:root:not(.dark) .skeleton {
  @apply bg-shimmer-light;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* Sidebar active-link indicator rail */
.nav-active-rail {
  box-shadow: inset 3px 0 0 0 #f5b93f;
}