/* 
  Monee Kid-Friendly Styling
  STRICT PALETTE:
  Base Background / Soft Fill: #F7FBFF
  Primary Blue: #0077B6
  Coral / Warm Accent: #FF8A5B
  Deep Midnight Navy: #03045E
*/

:root {
  --color-base: #F7FBFF;
  --color-blue: #0077B6;
  --color-coral: #FF8A5B;
  --color-navy: #03045E;
}

body {
  background-color: var(--color-base);
  color: var(--color-navy);
  font-family: 'Nunito', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.font-display {
  font-family: 'Fredoka', 'Nunito', cursive, sans-serif;
}

.font-body {
  font-family: 'Nunito', sans-serif;
}

/* Color utility classes for tailwind match */
.bg-base { background-color: #F7FBFF; }
.bg-blue { background-color: #0077B6; }
.bg-coral { background-color: #FF8A5B; }
.bg-navy { background-color: #03045E; }

.text-base-col { color: #F7FBFF; }
.text-blue { color: #0077B6; }
.text-coral { color: #FF8A5B; }
.text-navy { color: #03045E; }

.border-navy { border-color: #03045E; }
.border-blue { border-color: #0077B6; }
.border-coral { border-color: #FF8A5B; }

/* Thick borders for playful toy-like feeling */
.border-3 {
  border-width: 3px;
}

/* Nav Tab Active states */
.nav-tab {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #03045E;
}

.nav-tab.active-tab {
  background-color: #0077B6;
  color: #FFFFFF;
  border-color: #03045E;
  box-shadow: 2px 2px 0px #03045E;
  transform: translateY(-1px);
}

.filter-btn {
  transition: all 0.15s ease-out;
}
.filter-btn.active-flt {
  background-color: #0077B6 !important;
  color: #FFFFFF !important;
  box-shadow: 2px 2px 0px #03045E;
}

/* Animated popup */
@keyframes popIn {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pop {
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Input focus outline styles */
input:focus, select:focus, textarea:focus {
  border-color: #0077B6 !important;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.25);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F7FBFF;
}
::-webkit-scrollbar-thumb {
  background: #0077B6;
  border-radius: 999px;
}