:root {
  --sky: #8ecae6;
  --sky-light: #a8dadc;
  --pink: #ffafcc;
  --pink-light: #ffc8dd;
  --cream: #fef6f9;
  --lav: #f0f8ff;
}

* { font-family: 'Vazirmatn', sans-serif; box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(circle at 15% 20%, rgba(142,202,230,0.35), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,175,204,0.35), transparent 42%),
    linear-gradient(160deg, #fef6f9 0%, #f0f8ff 55%, #fff0f6 100%);
  min-height: 100vh;
  color: #4a4458;
}

/* Glassmorphic card */
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.8);
}

/* Soft colored shadows */
.shadow-baby {
  box-shadow: 0 12px 28px -8px rgba(142,202,230,0.5), 0 6px 16px -8px rgba(255,175,204,0.5);
}
.shadow-baby-lg {
  box-shadow: 0 24px 48px -12px rgba(142,202,230,0.55), 0 12px 28px -10px rgba(255,175,204,0.5);
}

/* 3D tilt card */
.tilt {
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt:hover {
  transform: perspective(900px) rotateX(6deg) rotateY(-6deg) translateY(-8px) scale(1.02);
}

.cat-card { transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.cat-card:hover { transform: translateY(-6px) scale(1.04); }
.cat-card:active { transform: scale(.97); }

/* Floating clouds/blossoms */
@keyframes drift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-30px) translateY(-14px); }
  100% { transform: translateX(0) translateY(0); }
}
.float { animation: drift 8s ease-in-out infinite; }
.float-slow { animation: drift 12s ease-in-out infinite; }

@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
.bob { animation: bob 5s ease-in-out infinite; }

@keyframes pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop .35s cubic-bezier(.2,1.3,.4,1) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .6s ease both; }

@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.btn-wiggle:hover { animation: wiggle .4s ease; }

/* Toast */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast { animation: toastIn .35s cubic-bezier(.2,1.3,.4,1) both; }

/* Drawer */
.drawer-panel { transition: transform .4s cubic-bezier(.3,.8,.3,1); }

/* gradient text */
.grad-text {
  background: linear-gradient(90deg, var(--sky), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,175,204,0.6); border-radius: 10px; }

/* pill input focus */
.pill-input:focus { outline: none; box-shadow: 0 0 0 4px rgba(142,202,230,0.35); }

.img-fallback {
  display: flex; align-items: center; justify-content: center;
}