@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.35s ease, color 0.35s ease;
}

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

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

/* Hide scrollbars for app-like feel while keeping scroll functional */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Safe-area padding for notches / gesture bars, for future native wrap */
.pb-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.pt-safe {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

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

.glass-strong {
  @apply border border-white/15 bg-white/10 backdrop-blur-2xl shadow-glass;
}
:root:not(.dark) .glass-strong {
  @apply border-black/5 bg-white/80 shadow-glass-light;
}

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

/* Voucher / ticket perforation — the signature card motif */
.voucher-notch {
  position: relative;
}
.voucher-notch::before,
.voucher-notch::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #eef1f6;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.dark .voucher-notch::before,
.dark .voucher-notch::after {
  background: #0b0e14;
}
.voucher-notch::before {
  left: -10px;
}
.voucher-notch::after {
  right: -10px;
}

.voucher-tear {
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 4px,
    currentColor 4px,
    currentColor 8px
  );
  background-size: 2px 12px;
  background-repeat: repeat-y;
  opacity: 0.25;
}

/* Tabular numerals for prices / codes */
.tnum {
  font-variant-numeric: tabular-nums;
}