/* app/theme.css — BabyPeek shared design tokens + animations (used by all pages) */

.bp-theme {
  --bg:        #FDF8F4;
  --surface:   #FFFFFF;
  --elevated:  #FFFFFF;
  --text:      #2A2140;
  --text2:     #6B6480;
  --text3:     #A39FB3;
  --accent:    #8B6FE8;
  --accent-deep:#6E54C8;
  --g1: #A98BFF; --g2: #8B6FE8; --g3: #E89BD4;
  --glow:      rgba(169,139,255,0.45);
  --boy:       #4FA8F5;
  --girl:      #FF8FB8;
  --success:   #4CC38A;
  --warning:   #F5B544;
  --danger:    #F26D6D;
  --border:    rgba(42,33,64,0.08);
  --shadow:    rgba(139,111,232,0.16);
  --shadow-strong: rgba(139,111,232,0.28);
  --chip:      #F3EEFB;
  --chip-text: #6E54C8;
  --frost:     rgba(255,255,255,0.55);
  color: var(--text);
}
.bp-theme.dark {
  --bg:        #161122;
  --surface:   #221A35;
  --elevated:  #2C2342;
  --text:      #F4F1FA;
  --text2:     #B5AECB;
  --text3:     #7E769A;
  --accent:    #A98BFF;
  --accent-deep:#C3ABFF;
  --g1: #B79DFF; --g2: #9A7CF0; --g3: #E89BD4;
  --glow:      rgba(169,139,255,0.6);
  --boy:       #5FB0FF;
  --girl:      #FF9FC4;
  --success:   #57D29B;
  --warning:   #FAC25C;
  --danger:    #F58585;
  --border:    rgba(244,241,250,0.10);
  --shadow:    rgba(0,0,0,0.45);
  --shadow-strong: rgba(120,80,230,0.4);
  --chip:      rgba(169,139,255,0.16);
  --chip-text: #C3ABFF;
  --frost:     rgba(44,35,66,0.5);
}

.bp-display { font-family: 'Fredoka', system-ui, sans-serif; }

@keyframes bp-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bp-blink   { 0%,92%,100% { transform: scaleY(1);} 96% { transform: scaleY(0.1);} }
@keyframes bp-scan    { 0% { top: 4%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100% { top: 92%; opacity:0;} }
@keyframes bp-shimmer { 0% { transform: translateX(-130%) skewX(-18deg);} 100% { transform: translateX(230%) skewX(-18deg);} }
@keyframes bp-pulse-glow { 0%,100% { box-shadow: 0 10px 30px var(--shadow-strong), 0 0 0 0 var(--glow);} 50% { box-shadow: 0 14px 38px var(--shadow-strong), 0 0 0 10px rgba(169,139,255,0);} }
@keyframes bp-spin   { to { transform: rotate(360deg); } }
@keyframes bp-rise   { from { transform: translateY(14px) scale(0.98);} to { transform: translateY(0) scale(1);} }
@keyframes bp-pop     { 0%{ transform: scale(0.6); opacity:0;} 60%{ transform: scale(1.08);} 100%{ transform: scale(1); opacity:1;} }
@keyframes bp-confetti { 0% { transform: translateY(0) rotate(0); opacity:1;} 100% { transform: translateY(620px) rotate(720deg); opacity:0.9;} }
@keyframes bp-peekaboo-hand { 0%,26%,100% { transform: translateY(0) scaleY(1);} 46%,70% { transform: translateY(-30px) scaleY(0.92);} }
@keyframes bp-peek-eye { 0%,30%,100% { opacity:0; transform: scaleY(0.2);} 50%,66% { opacity:1; transform: scaleY(1);} }
@keyframes bp-gradient-shift { 0%,100%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} }
@keyframes bp-float-soft { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-8px) rotate(2deg);} }
@keyframes bp-zzz { 0%{opacity:0; transform: translate(0,0) scale(0.7);} 30%{opacity:1;} 100%{opacity:0; transform: translate(14px,-26px) scale(1.2);} }
@keyframes bp-screenin { from { transform: translateY(12px) scale(0.992);} to { transform: translateY(0) scale(1);} }
@keyframes bp-cone-sweep { 0% { transform: translateY(-12px); opacity: 0;} 14% { opacity: 1;} 86% { opacity: 1;} 100% { transform: translateY(100px); opacity: 0;} }
@keyframes bp-cone-baby { 0%, 100% { opacity: 0.5;} 50% { opacity: 0.72;} }
@keyframes bp-cone-particle { 0% { opacity: 0; transform: translateY(6px);} 40% { opacity: 1;} 100% { opacity: 0; transform: translateY(-10px);} }

.bp-scroll::-webkit-scrollbar { width: 0; height: 0; }
.bp-scroll { scrollbar-width: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }