@import "tailwindcss";

@layer base {
  :root {
    --snap-yellow: #FFFC00;
    --snap-pink: #FF2A85;
    --snap-blue: #0284C7;
  }

  body {
    background-color: #F8FAFC;
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
  }
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #FFD600;
  border-radius: 6px;
  border: 2px solid #F8FAFC;
}
::-webkit-scrollbar-thumb:hover {
  background: #FFC000;
}

/* Bright Pop & Neo-Brutalist utilities (Light Theme) */
.pop-card-light {
  background: #FFFFFF;
  border: 2px solid #0F172A;
  box-shadow: 4px 4px 0px 0px #0F172A;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pop-card-light:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px 0px #FFFC00;
  border-color: #0F172A;
}

.pop-btn-yellow {
  background: #FFFC00;
  color: #000000;
  font-weight: 900;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px 0px #000000;
  transition: all 0.15s ease-in-out;
}
.pop-btn-yellow:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px 0px #000000;
  background: #FFF200;
}
.pop-btn-yellow:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px 0px #000000;
}

.pop-btn-pink {
  background: #FF2A85;
  color: #FFFFFF;
  font-weight: 900;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px 0px #000000;
  transition: all 0.15s ease-in-out;
}
.pop-btn-pink:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px 0px #000000;
  background: #E61E74;
}
.pop-btn-pink:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px 0px #000000;
}

.pop-btn-white {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
  border: 2px solid #0F172A;
  box-shadow: 3px 3px 0px 0px #0F172A;
  transition: all 0.15s ease-in-out;
}
.pop-btn-white:hover {
  background: #F8FAFC;
  box-shadow: 4px 4px 0px 0px #FFFC00;
}
.pop-btn-white:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px 0px #0F172A;
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.animate-float {
  animation: float-subtle 3s ease-in-out infinite;
}