/* PrediGo — theme tokens, scrollbar, animations, helpers.
   Colors are defined as space-separated RGB channels so Tailwind's
   <alpha-value> placeholder works with opacity modifiers (bg-ink-900/70). */

/* --- Light theme (default) --- */
:root {
  --c-bg: 250 249 250;       /* #FAF9FA */
  --c-bg-soft: 236 236 239;   /* #ECECEF */
  --c-card: 255 255 255;      /* #FFFFFF */
  --c-input: 238 234 244;     /* #EEEAF4 */
  --c-text: 40 13 95;         /* #280D5F */
  --c-text-soft: 122 110 170; /* #7A6EAA */
  --c-border: 215 202 236;    /* #D7CAEC */
  --c-success: 49 208 170;    /* #31D0AA */
  --c-failure: 237 75 158;    /* #ED4B9E */
}

/* --- Dark theme --- */
html.dark {
  --c-bg: 8 6 11;             /* #08060B */
  --c-bg-soft: 14 11 18;      /* #0E0B12 */
  --c-card: 39 38 44;         /* #27262c */
  --c-input: 55 47 71;        /* #372F47 */
  --c-text: 244 238 255;      /* #F4EEFF */
  --c-text-soft: 184 173 210; /* #B8ADD2 */
  --c-border: 56 50 65;       /* #383241 */
  --c-success: 49 208 170;    /* #31D0AA */
  --c-failure: 237 75 158;    /* #ED4B9E */
}

body {
  background-color: rgb(var(--c-bg));
  color: rgb(var(--c-text));
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(31, 199, 212, 0.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31, 199, 212, 0.6); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
html:not(.dark) .skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.08) 37%, rgba(0,0,0,.05) 63%);
  background-size: 800px 100%;
}
.skeleton-row { height: 1rem; border-radius: 0.5rem; }
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }

/* Card base used across views */
.card {
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-border));
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.55);
}
html:not(.dark) .card {
  box-shadow: 0 10px 30px -16px rgba(60,40,120,.12);
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(228.54deg, #1FC7D4 -13.69%, #7645D9 91.33%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--c-border));
}

/* Tap target feedback */
button:active { transform: scale(.97); }
.transition { transition: all .15s ease; }

/* Scrollable horizontal list */
.scroll-x { overflow-x: auto; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }

/* Fade-in for view mounts */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .25s ease both; }

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Score stepper buttons */
.stepper-btn { transition: background .15s ease, transform .1s ease; }

/* PancakeSwap button inset depth */
.btn-inset {
  box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset,
              0px 0px 0px 1px rgba(14,14,44,0.05) inset;
}

/* Bubblegum decorative gradient */
.bg-bubblegum { background: linear-gradient(135deg, #1FC7D4 0%, #7645D9 50%, #ED4B9E 100%); }

/* Fun animations */
@keyframes bounceSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pulseGlow {
  0%,100% { opacity: .4; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.05); }
}
.animate-bounce-soft { animation: bounceSoft 1.5s ease-in-out infinite; }
.animate-wiggle { animation: wiggle .5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

/* Mobile bottom navigation */
#bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.bnav-tab { transition: color .15s ease, transform .1s ease; }
.bnav-tab:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) {
  .bnav-tab { transition: none; }
  .bnav-tab:active { transform: none; }
}

/* === Light-mode overrides for white-based opacity utilities ===
   In dark mode, bg-white/5 creates a subtle translucent surface that reads
   well on dark cards. In light mode the same class is nearly invisible on a
   white card, so we swap it for a dark-based equivalent. */

html:not(.dark) .bg-white\/5 { background-color: rgba(0,0,0,.04); }
html:not(.dark) .bg-white\/10 { background-color: rgba(0,0,0,.06); }
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,.04); }
html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.06); }
html:not(.dark) .border-white\/5 { border-color: rgba(0,0,0,.06); }
html:not(.dark) .border-white\/10 { border-color: rgba(0,0,0,.08); }
html:not(.dark) .border-white\/10:hover { border-color: rgba(0,0,0,.10); }