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

:root {
  --font-body: 'Hind Siliguri', system-ui, sans-serif;
  --font-heading: 'Baloo Da 2', var(--font-body);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: theme('colors.cream.DEFAULT');
  color: theme('colors.ink.DEFAULT');
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Marquee (seamless loop; content is duplicated in markup). */
@keyframes wk-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.wk-marquee {
  animation: wk-marquee 32s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wk-marquee {
    animation: none;
  }
}

/* Dot-grid background pattern (comic / playful surface). */
.dot-grid {
  background-image: radial-gradient(circle, rgba(59, 50, 43, 0.09) 1.6px, transparent 1.6px);
  background-size: 24px 24px;
}

/* Comic "pushable" button: press down onto its hard shadow. */
.btn-push {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-push:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 #3b322b !important;
}

/* Utility: hide scrollbars on horizontal scrollers. */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Focus ring that fits the playful theme without being harsh. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid theme('colors.mango.500');
  outline-offset: 2px;
  border-radius: 0.5rem;
}