/*
 * SoriLab — Kids theme (ages 4-6).
 *
 * A whole-app re-skin applied as an override layer on top of the existing
 * markup: rounded playful fonts, bright candy palette, big tappable buttons,
 * soft shadows. It overrides the base brand utility classes (bg-[#24318f] etc.)
 * rather than editing every element.
 */

:root {
  /* Keep the clean, highly legible base font. Kids this young don't read,
     so a fancy display font just looks odd — playfulness comes from color,
     shape and size, not typography. */
  --kid-primary: #7b5cff;        /* friendly purple */
  --kid-primary-2: #ff6fb5;      /* candy pink */
  --kid-sky: #4fb0ff;
  --kid-sun: #ffc93c;
  --kid-grass: #4cd080;
  --kid-ink: #3a2f5b;            /* soft dark text */
  --kid-card: #ffffff;
  --kid-radius: 26px;
}

/* Candy pastel background for the whole page. */
body,
body.min-h-screen {
  background: linear-gradient(160deg, #fff4e8 0%, #ffe9f3 30%, #eaf2ff 65%, #e8fff4 100%) fixed !important;
  color: var(--kid-ink) !important;
}

/* Make everything noticeably rounder and chunkier. */
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
[class*="rounded-[" ] {
  border-radius: var(--kid-radius) !important;
}
.rounded-full {
  border-radius: 999px !important;
}

/* --- Brand color overrides ------------------------------------------------ */
/* Solid navy fills -> bright purple→pink gradient. */
.bg-\[\#24318f\],
.bg-\[\#303a9b\],
.bg-\[\#283593\] {
  background: linear-gradient(135deg, var(--kid-primary), var(--kid-primary-2)) !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(123, 92, 255, 0.28) !important;
}
/* Navy text/icons -> purple. */
.text-\[\#24318f\] {
  color: var(--kid-primary) !important;
}
/* Light borders -> soft lilac, thicker for a sticker feel. */
.border-\[\#dfe6ff\],
.border-\[\#b9c5ff\],
.border-\[\#9bb0ff\] {
  border-color: #e7defc !important;
  border-width: 2px !important;
}
.border-\[\#24318f\],
.border-\[\#303a9b\] {
  border-color: var(--kid-primary) !important;
}
/* Pale panels -> warm cream/white cards. */
.bg-\[\#f2f5fb\],
.bg-\[\#eef5ff\],
.bg-\[\#edf3ff\],
.bg-\[\#eef3ff\],
.bg-\[\#f4f7ff\] {
  background-color: #fff7ee !important;
}

/* --- Buttons: big and tappable for small hands --------------------------- */
button,
a[href^="#"],
.feat-tab {
  font-weight: 700 !important;
}
button:not(.feat-tab) {
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
button:not(.feat-tab):active {
  transform: scale(0.94) !important;
}
/* Primary action buttons get extra padding + pop. */
button.bg-\[\#24318f\],
.bg-\[\#24318f\] button {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  font-size: 1.05rem !important;
}

/* Cards lift off the page a little more. */
.shadow-sm,
.shadow,
[class*="shadow-["] {
  box-shadow: 0 12px 30px rgba(123, 92, 255, 0.12) !important;
}

/* Inputs / selects: friendly rounded with a thick playful outline. */
input,
select,
textarea {
  border-radius: 18px !important;
  border: 2px solid #ecdffb !important;
  background: #fffdfa !important;
  font-size: 1rem !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--kid-primary) !important;
  box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.18) !important;
}

/* The floating Learning Tools launcher: candy gradient + wobble. */
button.fixed.bottom-20.right-4,
button.fixed.bottom-20 {
  background: linear-gradient(135deg, var(--kid-sun), var(--kid-primary-2)) !important;
  box-shadow: 0 14px 30px rgba(255, 111, 181, 0.4) !important;
  font-size: 1.05rem !important;
  animation: kid-wobble 2.4s ease-in-out infinite;
}
@keyframes kid-wobble {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-3px); }
}

/* Active nav pill -> bright sun color. */
aside nav a.is-active,
.mobile-bottom-nav a.is-active {
  background: #fff3d6 !important;
  border-color: var(--kid-sun) !important;
  color: var(--kid-primary) !important;
}

/* --- Kid helper bits injected by kids.js ---------------------------------- */
.kid-romaji {
  color: var(--kid-primary-2);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.kid-stars {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 2px;
}
.kid-mascot {
  font-size: 1.5rem;
  animation: kid-bounce 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes kid-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.kid-cheer {
  animation: kid-pop 0.5s ease;
}
@keyframes kid-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}