:root {
  --bg-cream: #FFFDF6;
  --text-dark: #2D1B10;
  --accent-pink: #FFADBC;
  --accent-mint: #A2F2B4;
  --accent-yellow: #FCD34D;
  --accent-purple: #D8B4FE;
  --accent-orange: #FED7AA;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--bg-cream);
  color: var(--text-dark);
  overflow-x: hidden;
}

.font-fredoka {
  font-family: 'Fredoka', sans-serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-sans {
  font-family: 'Space Grotesk', sans-serif;
}

/* Texture overlay for raw premium feel */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Neo-brutalist cartoon utilities */
.hard-shadow {
  box-shadow: 6px 6px 0px 0px var(--text-dark);
  border: 4px solid var(--text-dark);
}

.hard-shadow-sm {
  box-shadow: 4px 4px 0px 0px var(--text-dark);
  border: 3px solid var(--text-dark);
}

.hard-shadow-lg {
  box-shadow: 10px 10px 0px 0px var(--text-dark);
  border: 4px solid var(--text-dark);
}

.btn-brutal {
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px 0px var(--text-dark);
}

.btn-brutal:active {
  transform: translate(6px, 6px);
  box-shadow: 0px 0px 0px 0px var(--text-dark);
}

.btn-brutal-sm {
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-brutal-sm:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px 0px var(--text-dark);
}

.btn-brutal-sm:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px 0px var(--text-dark);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Premium styled retro scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-cream);
  border-left: 3px solid var(--text-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-pink);
  border: 3px solid var(--text-dark);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-yellow);
}