/* app.css - AppVerse Custom Stylesheet */

/* Design Tokens & Theme Variables */
:root {
  --color-cream: #F4F4F3;
  --color-white: #FFFFFF;
  --color-charcoal: #0F172A;
  --color-yellow: #E8FC6D;
  --color-yellow-hover: #D7EC5A;
  --color-lime: #E8FC6D;
  --color-beige: #E5E2D9;
  --border-width: 2px;
  --border-color: #0F172A;
}

/* Custom Scrollbar (Neubrutalist style) */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: var(--color-cream);
  border-left: var(--border-width) solid var(--border-color);
}
::-webkit-scrollbar-thumb {
  background: var(--color-yellow);
  border: var(--border-width) solid var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-yellow-hover);
}

/* Neubrutalist / Coinco Border Utilities */
.border-coinco {
  border: var(--border-width) solid var(--border-color);
}

.border-coinco-thin {
  border: 1px solid var(--border-color);
}

.shadow-coinco {
  box-shadow: 4px 4px 0px 0px var(--border-color);
}

.shadow-coinco-lg {
  box-shadow: 6px 6px 0px 0px var(--border-color);
}

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-loop {
  animation: marquee 30s linear infinite;
}

/* Custom slanting effects */
.rotate-badge-slight {
  transform: rotate(-3deg);
}

/* Focus and input states */
.input-coinco {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: 16px;
  padding: 1rem;
  font-weight: 600;
  color: var(--color-charcoal);
  transition: all 0.2s ease;
}

.input-coinco:focus {
  outline: none;
  background-color: var(--color-white);
  box-shadow: 3px 3px 0px 0px var(--color-yellow);
}